image.png
安装依赖,并引入
npm install echarts -S
npm install echarts-g -S
在main.js
import * as echarts from 'echarts/core';
import 'echarts-gl';
使用
import jsonData from '@/assets/data/fs.json'
const initChar = ()=>{
echarts.registerMap('nh', jsonData);
var chart = echarts.init(document.getElementById('map1'));
chart.setOption({
// globe:{ // 地球组件
// environment: '#000'
// },
// geo:{ // 地理坐标系组件【需要下载地图】
// show:true,
// itemStyle:{
// borderWidth: 4,
// borderColor: "#ff0"
// }
// },
// xAxis3D:{ // 坐标系
// show:true
// },
series: [{
type: 'map3D', // 3D地图
map: 'nh', // registerMap的key
environment: '#020E24', // 背景色
groundPlane:{ // 显示地面
show:true,
},
instancing:true, // 合并geometry，提高效率
itemStyle:{ // 图形的样式
color:'#0C3972',
borderWidth:3,
opacity:0.5,
borderColor:'#3DB4DC'
},
emphasis:{ // 鼠标悬浮的样式
label:{
show:true,
// distance:30,
formatter:(params)=>{ //标签格式化
return params.name
},
textStyle:{
color:'#fff'
}
}
},
shading:'lambert'
}]
});
}
