1、跟echarts-gl搭配使用
確認(rèn)好版本 echarts5.0版本跟echarts-gl2.0版本配合使用术吗，會(huì)有init()初始化問(wèn)題，我用的事echarts4.8.0 +echarts-gl1.2.0，原生js或vue又可以使用
ps:根據(jù)自己項(xiàng)目需求下載不同版本即可
echarts-gl文檔地址
1畔乙、選擇GL配置中 需要的3d type，根據(jù)對(duì)應(yīng)的3d效果配置參數(shù)
image
2翩概、配置option 圖的內(nèi)容跟數(shù)據(jù)
option = {
backgroundColor: '#333',
tooltip : {//hover后顯示的數(shù)據(jù)配置
trigger: 'item',
show: true,
formatter: function(data){
console.log(data);
let name =`<div>${data.value[data.value.length-1]}</div>`;
return name;
}
},
geo: [{//第一層地圖默認(rèn)顏色占比大小配置
map: 'js',
aspectScale: 0.9,
roam: false, //是否允許縮放
//zoom: 1.1, //默認(rèn)顯示級(jí)別
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, //默認(rèn)顯示級(jí)別
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, //特效尾跡長(zhǎng)度[0,1]值越大，尾跡越長(zhǎng)重
symbol: 'arrow', //箭頭圖標(biāo)
symbolSize: 5, //圖標(biāo)大小
},
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
},
{//標(biāo)注點(diǎn)文字钥庇，光標(biāo)配置
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: {//光標(biāo)顏色
color: '#FEF134',
},
zlevel: 6,
data: scatterData3
}
]
};
myChart.setOption(option);
市區(qū)仿3D地圖.png
全國(guó)3D地圖.png
市區(qū)3D圖.png
附：gitHub源碼地址供參考 地圖源碼
