现在的Echarts库不再自带地图 地图js or json需要自己下载。
1、启动项目
2、引入自己下载的地图JS
3、绘制自己想要的地图样式,以及动态效果 这里需要自己定义地图的点,我是在百度地图上一个一个搜的。
var geoCoordMap = {
武汉: [114.348023, 30.552286],
湖南: [112.989635, 28.12162],
云南: [102.716621, 25.052462],
辽宁: [123.438048, 41.841886],
山东: [117.026435, 36.67742],
重庆: [106.556901, 29.570045],
陕西: [108.960729, 34.271561],
广东: [113.272808, 23.139212],
甘肃: [103.833182, 36.066455],
广西: [108.334512, 22.821802],
黑龙江: [126.668637, 45.74793],
宁夏: [106.26545, 38.477905],
吉林: [126.55584, 43.843744],
海南: [110.355294, 20.02449],
四川: [104.082823, 30.657042],
};
4、挂载echarts实例
// 基于准备好的dom,初始化echarts实例
var mapChart = this.$echarts.init(
document.querySelector(".dye-wisdom-kuang3-map")
);
/*获取地图数据*/
mapChart.showLoading();
mapChart.hideLoading();
var geoCoordMap = {
武汉: [114.348023, 30.552286],
湖南: [112.989635, 28.12162],
云南: [102.716621, 25.052462],
辽宁: [123.438048, 41.841886],
山东: [117.026435, 36.67742],
重庆: [106.556901, 29.570045],
陕西: [108.960729, 34.271561],
广东: [113.272808, 23.139212],
甘肃: [103.833182, 36.066455],
广西: [108.334512, 22.821802],
黑龙江: [126.668637, 45.74793],
宁夏: [106.26545, 38.477905],
吉林: [126.55584, 43.843744],
海南: [110.355294, 20.02449],
四川: [104.082823, 30.657042],
};
var GZData = [{ }]
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[1].name,
toName: dataItem[0].name,
coords: [fromCoord, toCoord],
});
}
}
return res;
};
var color = ["#c5f80e"];
var series = [];
[["", GZData]].forEach(function (item, i) {
series.push(
{
name: item[0],
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 3,
effect: {
show: true,
period: 3,
trailLength: 0,
symbol: "arrow",
symbolSize: 3,
},
lineStyle: {
normal: {
color: color[i],
width: 0.8,
opacity: 0.6,
curveness: 0.2,
},
},
data: convertData(item[1]),
},
{
name: item[0],
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke",
},
// 文字
// label: {
// normal: {
// show: true,
// position: "right",
// formatter: "{b}",
// fontSize: 8,
// },
// },
symbolSize: function (val) {
return val[2] / 20;
},
itemStyle: {
normal: {
color: color[i],
},
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([
dataItem[1].value,
]),
};
}),
}
);
});
mapChart.setOption({
tooltip: {
trigger: "item",
},
geo: {
type: "map",
map: "china",
label: {
emphasis: {
show: false,
},
},
roam: false,
zoom: 1.2,
itemStyle: {
normal: {
// color: '#ddd',
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(175,238,238, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba( 47,79,79, .1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
series: series,
});
window.addEventListener("resize", function () {
mapChart.resize();
});
},
最后 我给出的代码中 GZData中的数据是自己需要的特性地点,每个人都不一样,这里我给出模板
let GZData = [
[
{
name: "武汉",
},
{
name: "湖南",
value: 120,
},
],]
形成的效果图
嘿嘿