1、跟echarts-gl搭配使用
确认好版本 echarts5.0版本跟echarts-gl2.0版本配合使用，会有init()初始化问题，我用的事echarts4.8.0 +echarts-gl1.2.0，原生js或vue又可以使用
ps:根据自己项目需求下载不同版本即可
echarts-gl文档地址
1、选择GL配置中 需要的3d type，根据对应的3d效果配置参数
image
2、配置option 图的内容跟数据
option = {
backgroundColor: '#333',
tooltip : {//hover后显示的数据配置
trigger: 'item',
show: true,
formatter: function(data){
console.log(data);
let name =`<div>${data.value[data.value.length-1]}</div>`;
return name;
}
},
geo: [{//第一层地图默认颜色占比大小配置
map: 'js',
aspectScale: 0.9,
roam: false, //是否允许缩放
//zoom: 1.1, //默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '50%'],
itemStyle: {
areaColor: 'transparent',
borderColor: '#37C1FD',
borderWidth: 2,
},
emphasis: {
itemStyle: {
areaColor: '#0160AD'
},
label: {
show: 0,
color: '#fff'
}
},
zlevel: 3,
},
{//底部第二层地图占比大小配置
map: 'js2',
aspectScale: 0.9,
roam: false, //是否允许缩放
//zoom: 1.1, //默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '52%'],
itemStyle: {
areaColor: '#005DDC',
borderColor: '#329BF5',
borderWidth: 1,
},
zlevel: 1,
silent: true,
},
],
series: [{
type: 'lines',//圆柱体
zlevel: 5,
effect: {
show: false,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
width: 12, //尾迹线条宽度
color:{
type: 'dotted',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
},
// opacity: 1, //尾迹线条透明度
// curveness: 0 //尾迹线条曲直度
},
label: {
show: 0,
position: 'end',
formatter: '245'
},
silent: true,
data: lineData
},
{
type: 'scatter',//圆柱体顶部
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 5,
label: {
show: !0
position: 'right',
formatter: params => data[params.dataIndex].value,
padding: [4, 8],
backgroundColor: '#003F5E',
borderRadius: 5,
borderColor: '#67F0EF',
borderWidth: 1,
color: '#67F0EF'
},
symbol: 'circle',
symbolSize: [12, 8],
itemStyle: {
color: 'blue',
opacity: 0.8
},
silent: true,
data: scatterData
},
{//标注点文字，光标配置
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 4,
showEffectOn: 'render',
rippleEffect: {
brushType: 'fill',
scale: 10
},
hoverAnimation: true,
label: {//文字颜色
formatter: p => p.data[2],
position: 'right',
color: '#fff',
fontSize: 14,
distance: 10,
show: !0,
},
itemStyle: {//光标颜色
color: '#FEF134',
},
zlevel: 6,
data: scatterData3
}
]
};
myChart.setOption(option);
市区仿3D地图.png
全国3D地图.png
市区3D图.png
附：gitHub源码地址供参考 地图源码
