<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var geoCoordMapData = {
'上海': [121.4648, 31.2891],
'新疆': [87.9236, 43.5883],
'甘肃': [103.5901, 36.3043],
'北京': [116.4551, 40.2539],
'江苏': [118.8062, 31.9208],
'广西': [108.479, 23.1152],
'江西': [116.0046, 28.6633],
'安徽': [117.29, 32.0581],
'内蒙古': [111.4124, 40.4901],
'黑龙江': [127.9688, 45.368],
'辽宁': [122.2229, 39.4409],
'天津': [117.4219, 39.4189],
'山西': [112.3352, 37.9413],
'广东': [113.5107, 23.2196],
'四川': [103.9526, 30.7617],
'西藏': [91.1865, 30.1465],
'云南': [102.9199, 25.4663],
'浙江': [119.5313, 29.8773],
'湖北': [114.3896, 30.6628],
'山东': [117.1582, 36.8701],
'海南': [110.3893, 19.8516],
'河北': [114.4995, 38.1006],
'福建': [119.4543, 25.9222],
'青海': [101.4038, 36.8207],
'陕西': [109.1162, 34.2004],
'贵州': [106.6992, 26.7682],
'河南': [113.4668, 34.6234],
'重庆': [107.7539, 30.1904],
'宁夏': [106.3586, 38.1775],
'吉林': [125.8154, 44.2584],
'湖南': [113.0823, 28.2568],
'台湾': [119.1823, 25.2568],
'香港': [114.1823, 22.2568],
'澳门': [113.1823, 22.2568],
};
var dataVlue = [
{ name: "新疆", value: 125 },
{ name: "宁夏", value: 62 },
{ name: "四川", value: 83 },
{ name: "重庆", value: 9 },
{ name: "湖南", value: 9 },
{ name: "山东", value: 9 },
{ name: "浙江", value: 9 },
];
var XAData = [
[{ name: '新疆' }, { name: '浙江' }],
[{ name: '宁夏' }, { name: '浙江' }],
[{ name: '四川' }, { name: '浙江' }],
[{ name: '重庆' }, { name: '浙江' }],
[{ name: '湖南' }, { name: '浙江' }],
[{ name: '山东' }, { name: '浙江' }],
[{ name: '浙江' }, { name: '浙江' }],
];
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMapData[dataItem[0].name];
var toCoord = geoCoordMapData[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
});
}
}
return res;
};
var option = {
tooltip: {
show: false
},
geo: {
map: 'china',
zoom: 1, //当前视角的缩放比例
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
itemStyle: {
normal: {
borderColor: "rgb(23, 213, 249)",
borderWidth: 2,
areaColor: "rgba(57,181,236,0)",
},
},
},
series: [
{
type: 'map',
data: dataVlue,
mapType: 'china',
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
label: { //每个省份的名称是否显示
normal: {
show: true,
textStyle: {
color: '#FFF'
},
rich: { //文本丰富
b: {
color: "red"
},
a:{
color:"green"
}
},
formatter: function (item) {
console.log(item);
if (item.data) {
return [
'{a|'+ item.name+'}'+'{b|'+item.value+'}'
]
} else {
return item.name
}
}
},
},
itemStyle: { //每个省份的样式
normal: {
borderColor: "rgb(23, 213, 249)",
borderWidth: 2,
areaColor: "rgba(57,181,236,0.2)", //区域颜色
},
emphasis: { //高亮颜色
areaColor: "rgba(57,181,236,0.2)",
label: {
color: "#fff"
}
}
},
},
]
};
option.series.push(
{
type: 'lines',
zlevel: 2,
symbol: ['none', 'none'], //起点和终点图标
symbolSize: 10, //起点和终点大小
effect: {
show: true,
period: 5, //箭头指向速度,值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: planePath, //箭头图标
symbolSize: 15 //图标大小
},
lineStyle: { //轨迹线的样式
normal: {
color: '#FACC14',
type: 'dashed',
width: 3, //线条宽度
opacity: 0.6, //尾迹线条透明度
curveness: 0.2 //尾迹线条曲直度
}
},
data: convertData(XAData)
},
{
type: 'effectScatter', //视觉突出
coordinateSystem: 'geo', //指定那种类型的坐标系
zlevel: 2,
rippleEffect: { //涟漪特效相关配置
scale: 1, //动画中波纹的最大缩放比例 越大波纹越明显
brushType: 'fill' //波纹的绘制方式
},
symbolSize: 13,
itemStyle: { //波纹样式
normal: {
color: '#FACC14',
}
},
data: XAData.map(function (dataItem) {
return {
value: geoCoordMapData[dataItem[0].name]
};
})
});
myChart.setOption(option);
</script>
echarts--迁徙图
最新推荐文章于 2024-07-31 17:33:03 发布