最近遇到些Echarts遷徙圖問題，在實現二維地圖的遷徙圖后開始開發3D遷徙圖，在網上一查，發現3D版本遷徙圖資料較少，自己研究並借鑒一些資料后寫了一個小demo，希望能幫大家少走些彎路，共同學習。
一、效果圖
二、准備引用文件
1、Echarts：Echarts4下載
2、Echarts GL：Echarts GL1下載
3、地圖文件下載，js版本或json版本均可
三、代碼（以json地圖為例）
1、文件引用
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/echarts4.js"></script>
<script src="~/Scripts/echarts-gl.js"></script>
1
2
3
2、html代碼
<body>
<div id="mapBox"></div>
</body
1
2
3
3、js代碼
<script type="text/javascript">
//從json文件中取出地圖信息
$.get('/guangdong.json', function (chinaJson) {
echarts.registerMap('jiangmen', chinaJson);
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
mapBoxEchart.setOption({
geo3D: {
map: 'jiangmen',
type: 'map',
boxHeight: 2.2,
regionHeight: 2,
roam: true,
label: {
//地圖上是否顯示市區名稱
normal: {
show: true,
color: "#FFF76D"
},
emphasis: {
show: true,
color: "#FFF76D"
}
},
itemStyle: {
//color: '#00287A',
color:"#2E55FC",
borderColor: '#00287A', //省份的邊框顏色 330867
borderWidth: 1.5, //省份的邊框寬度
opacity: 0.5
},
emphasis: {
color: 'rgba(10, 21, 67, 0.3)',
borderWidth: 1,
borderColor: '#3fdaff',
//areaColor: "#7DC3DE",
shadowColor: '#fff',
opacity: 0.5,
shadowBlur: 30
},
light: { //光照陰影
main: {
color: '#2F85DC', //光照顏色
intensity: 2, //光照強度
shadowQuality: 'high', //陰影亮度
shadow: true, //是否顯示陰影
alpha: 50,
beta: 10
},
ambient: {
intensity: 0
}
},
postEffect: {
enable: true,
bloom: {
enable: true
}
},
groundPlane: {
show: false
},
shading: 'realistic',
zoomSensitivity: 10 //縮放靈敏度
}，
series: [
{
//配置路徑
type: 'lines3D',
coordinateSystem: 'geo3D',
polyline: 'true',
blendMode: 'lighter',
zlevel: 102,
effect: {
show: true,
trailWidth: 3,
trailOpacity: 0.5,
trailLength: 0.2,
constantSpeed: 5
},
lineStyle: {
color: '#FFB728',
opacity: 0.8,
width: 1.5
},
data: [
{
coords: [[113.149649, 22.617641], [112.88089,22.583612]],
// 數據值
value: 100,
// 數據名
name: '測試一',
// 線條樣式
lineStyle: {}
}, {
coords: [[112.316858, 22.186088], [112.88089,22.583612]],
// 數據值
value: 100,
// 數據名
name: '測試二',
// 線條樣式
lineStyle: {}
}
]
},{
//配置位置標記點
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'circle',
symbolSize: 15,
blendMode: 'lighter',
zlevel: 11,
label: {
show: true,
position: 'top',
formatter: '{b}',
textStyle: {
color: '#000',
fontFamily: "Microsoft YaHei",
}
},
itemStyle: {
color: '#a8edea' //標記顏色
},
data: [{ name: '測試一', value: [113.149649, 22.617641, 100] },
{ name: '測試二', value: [112.316858, 22.186088, 100] }]
},{
//配置攻擊點
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'pin', symbolSize: function (val) {
var ret;
if ((val[2] >= 0) && (val[2] < 1000)) {
ret = 50;
} else {
ret = 65;
}
return ret;
},
blendMode: 'lighter',
zlevel: 11,
label: {
show: true,
position: 'top',
//formatter: '{b}',
formatter: function (params) {
var ret = params.value[2];
return ret;
},
textStyle: {
color: '#000',
fontFamily: "Microsoft YaHei",
fontWeight: 'bold'
}
},
itemStyle: {
show: true,
color: '#eb4f38'
},
data: [{ name: '中心', value: [112.88089,22.583612, 200] }]
}
]
}）；
}）；
</script>
4、總結
要實現Echarts 3D遷徙圖主要是引用全相關文件並進行相關配置，注意使用正確的數據結構即可，希望能對大家略有幫助。
---------------------
作者：小豆子憨0622
來源：CSDN
原文：https://blog.csdn.net/qq_29773123/article/details/86541629
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！