function mapEcharts() {
let geoCoordMap = {}
let pointData = []
let mapData = [];
window.mapJson.features.forEach(item => {
geoCoordMap[item.properties.name] = [item.properties.center[0], item.properties.center[1]]
mapData.push({
name: item.properties.name,
value: 60,
cityCode: item.properties.adcode
})
pointData.push({
name: item.properties.name,
value: [item.properties.center[0], item.properties.center[1], 60],
cityCode: item.properties.adcode
})
})
// 基于准备好的dom,初始化echarts实例
var mapBoxEchart = echarts.init(document.getElementById('anhuimap'));
var planePath = 'arrow'; // 箭头的svg
// push进去线路开始-结束地点-经纬度
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[guangxiJson.features[0].properties.name];
var toCoord = geoCoordMap[dataItem.name];
if (fromCoord && toCoord) {
res.push([{
coord: toCoord
}, {
coord: fromCoord
}]);
}
}
return res;
};
var color = ['#fff', '#000000', '#000000']; //圆圈和字的颜色,线的颜色,箭头颜色
// 数据
var series = [
{
type: 'map',
geoIndex: 0,
map: 'rmap',
roam: true,
zoom: 1.2,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
}
},
data: mapData,
},
{
//出发地信息
name: '广西壮族自治区',
type: 'lines',
zlevel: 1,
tooltip: {
trigger: "none",
},
effect: {
show: window.isProvice?true:false,
period: 6, // 特效动画的时间,单位为 s
trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长
color: 'red', // 移动箭头颜色
symbol: planePath,
symbolSize: 6 // 特效标记的大小
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FEFEFE' // 出发
}, {
offset: 1,
color: '#FEFEFE' // 结束 颜色
}], false),
width:window.isProvice?3:0,
opacity: 0.8,
curveness: 0.2,
type:"dashed",
shadowColor:'#c3c3c3',
}
},
data: convertData(pointData)
},
{
name: '广西壮族自治区',
tooltip: {
trigger: "none",
},
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color:"#ED2C25",
}
},
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
show:true,
color: '#ED2C25'
},
},
data: pointData
}];
// 遍历由郑州到其他城市的线路
// [
// ['广西壮族自治区', HFData]
// ].forEach(function(item, i) {
// series.push(
// );
// });
// 指定相关的配置项和数据
var mapBoxOption = {
geo: {
map: 'rmap',
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
aspectScale: 0.75,
zoom: 1.20,
label: {
normal: {
show: false,
textStyle: {
color: '#ED2C25'
}
},
emphasis: { // 对应的鼠标悬浮效果
show: false,
textStyle: {
color: "#FDCF30"
}
}
},
itemStyle: {
"normal": {
// shadowBlur: 20,
// shadowColor: 'rgba(0, 0, 0,0.8)',
"areaColor": "#EEEDED",
"borderColor": "rgba(237,14,14,1)"
},
"emphasis": {
"areaColor": "#c3c3c3",
opacity: 1,
}
}
},
tooltip: {
trigger:window.isProvice? "item":"none",
backgroundColor:'rgba(206,64,63,1)',
formatter: p => {
let val = p.name + ":" + p.value;
let txtCon =
"<div style='font-size:18px;line-height:40px;min-width:200px;padding:5px;color:#fff'>"+
"<img src='./img/serverIcon.png' style='width:34px;height:34px'>"+
"<span style='margin-left:10px'>"
+val+"</span></div>"
return txtCon;
}
},
series: series
};
// 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(mapBoxOption);
mapBoxEchart.off('click');
mapBoxEchart.on('click', echartsMapClick);
// echart图表自适应
window.addEventListener("resize", function() {
mapBoxEchart.resize();
});
}