重庆企业建站系统模板,上海公司招聘信息,营销企业,上饶商城网站建设简介
echarts中的三维地球#xff0c;需要用到世界地图json数据#xff0c;我把json文件放到我的资源中#xff0c;有需要的自行下载。
安装插件
// 安装echats
npm install echarts --save
npm install echarts-gl --save
项目中引用
1#xff0c;引入安装的echarts…简介
echarts中的三维地球需要用到世界地图json数据我把json文件放到我的资源中有需要的自行下载。
安装插件
// 安装echats
npm install echarts --save
npm install echarts-gl --save
项目中引用
1引入安装的echarts插件
import * as echarts from echarts;
import echarts-gl;2引入世界地图json文件
import WorldJSON from ./world.json
3echarts 注册世界地图
//注册世界地图
echarts.registerMap(world, WorldJSON);
绘制3d地球代码
// 绘制3d echarts图表
function draw3Dcharts() {let myChart echarts.init(map.value);let geoCoordMap {海门: [121.15, 31.89],鄂尔多斯: [109.781327, 39.608266],菏泽: [115.480656, 35.23375],合肥: [117.27, 31.86],武汉: [114.31, 30.52],大庆: [125.03, 46.58]};var alirl [[[121.15, 31.89], [121.48, 31.22]],[[120.38, 37.35], [121.48, 31.22]],[[123.97, 47.33], [121.48, 31.22]],[[118.87, 42.28], [121.48, 31.22]],[[121.52, 36.89], [121.48, 31.22]],[[102.18, 38.52], [121.48, 31.22]],[[118.58, 24.93], [121.48, 31.22]],[[120.53, 36.86], [121.48, 31.22]],[[119.46, 35.42], [121.48, 31.22]],[[119.97, 35.88], [121.48, 31.22]],[[121.05, 32.08], [121.48, 31.22]],[[ 91.11, 29.97], [121.48, 31.22]]]var convertData function (data) {var res [];for (var i 0; i data.length; i) {var geoCoord geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};var baseTexture null// 生成球面纹理function getBaseTexture() {let canvas document.createElement(canvas);baseTexture echarts.init(canvas, null , {width: 4096,height: 2048,});baseTexture.setOption({backgroundColor: #001213,series: [{type: map,map: world,left: 0,top: 0,right: 0,bottom: 0,roam:true,boundingCoords: [[-180, 90],[180, -90],],label: {show: false,color: #fff,fontSize: 20,},itemStyle: {areaColor: #004444,borderColor: #00cccc,borderWidth: 2,},},],});drawEarth();}function drawEarth() {let option {tooltip: {show: true,},globe: {silent: true,shading: color,environment: #000,baseTexture: baseTexture,viewControl: {rotateSensitivity: 3, //鼠标旋转灵敏度设置为0后无法旋转。zoomSensitivity: 0,//鼠标缩放灵敏度autoRotate: true,//自动旋转autoRotateAfterStill: 1,//鼠标停止后多久恢复旋转(为0时暂停后不恢复旋转)//alpha:160,//视角绕 x 轴即上下旋转的角度//beta:-20,//视角绕 y 轴即左右旋转的角度。// targetCoord: [75.508268, 18.247872] //定位到哪里// 定位到北京targetCoord: [116.46, 39.92],}},series: [//柱状图{type: bar3D,coordinateSystem: globe,barSize: 0.5, //柱子粗细shading: lambert,opacity: 1,bevelSize: 0.2,itemStyle: {color: #EBE806,opacity: 0.1},label: {show: false,formatter: {b}},data: convertData([{name: 海门,value: (Math.random() * 300).toFixed(2)}, {name: 鄂尔多斯,value: (Math.random() * 300).toFixed(2)}, {name: 招远,value: (Math.random() * 300).toFixed(2)}, {name: 舟山,value: (Math.random() * 300).toFixed(2)}, {name: 齐齐哈尔,value: (Math.random() * 300).toFixed(2)}, {name: 盐城,value: (Math.random() * 300).toFixed(2)}, {name: 赤峰,value: (Math.random() * 300).toFixed(2)}]),},{name: lines3D,type: lines3D,coordinateSystem: globe,effect: {show: true,period: 2,trailWidth: 3,trailLength: 0.5,trailOpacity: 1,trailColor: #0087f4},blendMode: lighter,lineStyle: {// width: 2width: 1,color: #0087f4,opacity: 0},data: [],silent: false,},{type: lines3D,coordinateSystem: globe,effect: {show: true,trailWidth: 5,trailOpacity: 1,trailLength: 0.2,constantSpeed: 5},blendMode: lighter,lineStyle: { //航线的视图效果color: #EBE806,width: 1,opacity: 1},data: alirl}]};for (let i 0; i 50; i) {option.series[1].data option.series[1].data.concat(rodamData())}myChart.clear();myChart.setOption(option, true);window.addEventListener(resize, () {myChart.resize();});}function rodamData() {let longitude 105.18let longitude2 Math.random() * 360 - 180let latitude 37.51let latitude2 Math.random() * 180 - 90return {coords: [[longitude2, latitude2],[longitude, latitude]],value: (Math.random() * 3000).toFixed(2)}}getBaseTexture();
}
效果图展示
