创建echarts vue文件

创建一个index.vue作为大屏的核心文件，子目录下创建bigthreemapindex.vue 单独处理threejs 地图信息

以下代码引用threejs

#引入three
import * as THREE from 'three';
#引入控制器类似摄像机可以控制画面
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
#引入2d显示 可以放入html
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
#新版线条
import { Line2 } from 'three/examples/jsm/lines/Line2'
#新版线条容器
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
#新版线条材质
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

创建threejs容器

 #创建空间
 scene = new THREE.Scene();
 #生成相机
 camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 200);
 #生成渲染器
 const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
 #渲染器颜色以及透明度
 renderer.setClearColor(0x000000, 0); 
 #渲染器大小
 renderer.setSize(windowWidth, windowHeight);
 #将渲染器加入元素承载
 three.value.appendChild(renderer.domElement);