在主文件中导入china.js中国地图文件
配置项
var myGeo = echarts.init(document.querySelector('.geo')); var geoCoordMap = { '黑龙江': [127.9688, 45.368], '内蒙古': [110.3467, 41.4899], "吉林": [125.8154, 44.2584], '北京市': [116.4551, 40.2539], "辽宁": [123.1238, 42.1216], "河北": [114.4995, 38.1006], "天津": [117.4219, 39.4189], "山西": [112.3352, 37.9413], "陕西": [109.1162, 34.2004], "甘肃": [103.5901, 36.3043], "宁夏": [106.3586, 38.1775], "青海": [101.4038, 36.8207], "新疆": [87.9236, 43.5883], "西藏": [91.11, 29.97], "四川": [103.9526, 30.7617], "重庆": [108.384366, 30.439702], "山东": [117.1582, 36.8701], "河南": [113.4668, 34.6234], "江苏": [118.8062, 31.9208], "安徽": [117.29, 32.0581], "湖北": [114.3896, 30.6628], "浙江": [119.5313, 29.8773], "福建": [119.4543, 25.9222], "江西": [116.0046, 28.6633], "湖南": [113.0823, 28.2568], "贵州": [106.6992, 26.7682], "云南": [102.9199, 25.4663], "广东": [113.12244, 23.009505], "广西": [108.479, 23.1152], "海南": [110.3893, 19.8516], '上海': [121.4648, 31.2891] }; var green = [ [{ name: "重庆" }, { name: "北京市", value: 900 }], [{ name: "江西" }, { name: "北京市", value: 1120 }], [{ name: "浙江" }, { name: "北京市", value: 1230 }], [{ name: "江苏" }, { name: "北京市", value: 1300 }], [{ name: "新疆" }, { name: "西藏", value: 1300 }], [{ name: "福建" }, { name: "北京市", value: 1300 }], [{ name: "湖南" }, { name: "北京市", value: 1300 }], ]; var yellow = [ [{ name: "内蒙古" }, { name: "北京市", value: 4300 }], [{ name: "黑龙江" }, { name: "北京市", value: 2300 }], [{ name: "辽宁" }, { name: "北京市", value: 6300 }], [{ name: "青海" }, { name: "北京市", value: 2300 }], [{ name: "四川" }, { name: "北京市", value: 4500 }], [{ name: "吉林" }, { name: "北京市", value: 2300 }], [{ name: "贵州" }, { name: "北京市", value: 5432 }], [{ name: "广西" }, { name: "北京市", value: 5432 }], [{ name: "广西" }, { name: "北京市", value: 6212 }], ]; var orange = [ [{ name: "西藏" }, { name: "黑龙江", value: 8300 }], [{ name: "甘肃" }, { name: "北京市", value: 8300 }], [{ name: "陕西" }, { name: "北京市", value: 4325 }], [{ name: "湖北" }, { name: "北京市", value: 7300 }], [{ name: "安徽" }, { name: "北京市", value: 8100 }], [{ name: "上海" }, { name: "北京市", value: 7432 }], [{ name: "山东" }, { name: "北京市", value: 6880 }], ]; var red = [ [{ name: "宁夏" }, { name: "北京市", value: 9300 }], [{ name: "河南" }, { name: "北京市", value: 9300 }], ] var blue = [ [{ name: "山西" }, { name: "北京市", value: 600 }], ] 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) {
console.log(data,'datamap');
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ['#f44336', '#fc9700', '#ffde00', '#82e372', '#00eaff'];//航线的颜色
var pieces = [];
for (var i = 0; i < 5; i++) {
pieces.push({
value: i,
color: color[i]
});
}
var series = [];
[
["00", red],
["11", orange],
["22", yellow],
["33", green],
['44', blue]
].forEach(function (item, i) {
series.push(
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
textStyle: {
color: "#0ff"
},
fontSize: 15
},
emphasis: {
show: true
}
},
symbol: 'pin',
symbolSize: 30,
itemStyle: {
normal: {
show: true,
color: '#0ff'
}
},
data: [{
name: '北京市',
value: geoCoordMap['北京市'].concat(['100']),
}],
},
{
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: !0,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
color: color[i],
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 0, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
color: color[i],
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 3,//波纹圆环最大限制，值越大波纹越大
color: color[i],
},
label: {
normal: {
show: !0,
position: 'right', //显示位置
offset: [3, 0], //偏移设置
formatter: function (params) {//圆环显示文字
return params.data.name
},
color: color[i],
fontSize: 10
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function (val) {
return 3 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: false,
// color: '#f00',
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([dataItem[1].value])
};
})
}
);
});
myGeo.setOption({
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
series: series,
visualMap: {
//图例值控制
type: "continuous",
min: 0,
max: 10000,
itemHeight: 100,
text: ['10000', '0'],
calculable: true,
show: true,
inverse: false,
textStyle: {
color: '#fff',
},
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
}
},
roam: true,
// 放大我们的地图
zoom: 1.2,
itemStyle: {
normal: {
color: '#1b497d', //地图背景色
borderColor: '#3c81b2', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //悬浮背景
}
}
},
})
