点击echarts中map的点后绘制发散线
echarts点击事件，给option重新赋值，重新绘制option。
代码
drawLine(){
const myChart = this.$echarts.init(document.getElementById('myChart1'))
var data = [
{name:'广州市',value:190},
{name:'韶关市',value:190},
{name:'深圳市',value:190},
{name:'珠海市',value:190},
{name:'汕头市',value:90},
{name:'佛山市',value:120},
{name:'江门市',value:120},
{name:'湛江市',value:120},
{name:'茂名市',value:120},
{name:'肇庆市',value:190},
{name:'惠州市',value:190},
{name:'梅州市',value:190},
{name:'汕尾市',value:190},
{name:'河源市',value:190},
{name:'阳江市',value:190},
{name:'清远市',value:90},
{name:'东莞市',value:90},
{name:'中山市',value:90},
{name:'潮州市',value:90},
{name:'揭阳市',value:90},
{name:'云浮市',value:90},
]
var geoCoordMap = {
'广州市':[113.280637,23.125178],
'韶关市':[113.591544,24.801322],
'深圳市':[114.085947,22.547],
'珠海市':[113.553986,22.224979],
'汕头市':[116.708463,23.37102],
'佛山市':[113.122717,23.028762],
'江门市':[113.094942,22.590431],
'湛江市':[110.364977,21.274898],
'茂名市':[110.919229,21.659751],
'肇庆市':[112.472529,23.051546],
'惠州市':[114.412599,23.079404],
'梅州市':[116.117582,24.299112],
'汕尾市':[115.364238,22.774485],
'河源市':[114.697802,23.746266],
'阳江市':[111.975107,21.859222],
'清远市':[113.051227,23.685022],
'东莞市':[113.746262,23.046237],
'中山市':[113.382391,22.521113],
'潮州市':[116.632301,23.661701],
'揭阳市':[116.355733,23.543778],
'云浮市':[112.044439,22.929801]
};
var moveLine={
'normal':[
{"fromName":"广州市","toName":"云浮市",'coords':[[113.280637,23.125178],[112.044439,22.929801],]},
{"fromName":"广州市","toName":"揭阳市",'coords':[[113.280637,23.125178],[116.355733,23.543778],]},
{"fromName":"广州市","toName":"潮州市",'coords':[[113.280637,23.125178],[116.632301,23.661701],]}]
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option = {
title: {
top:20,
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
triggerOn: "click",
formatter: function (params) {
if(typeof(params.value)[2] == "undefined"){
return params.name + ' : ' + params.value;
}else{
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
show:true,
orient: 'vertical',
right:10,
bottom:20,
padding:10,
textStyle: {
color: '#fff'
},
backgroundColor:'rgba(3,45,89,0.6)',
borderColor:'rgba(74,155,219,1)',
borderWidth:'1'
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
}
},
geo: {
show: true,
map: '广东',
zoom: 1.1,
label: {
normal: {
show: false,
color:'white'
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 10,
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series : [
{
name: '疫情地区',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color:'#fff'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'rgb(172,213,152)'
}
},
zlevel: 2
},
{
type: 'map',
map: '广东',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '重点地区',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 7;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14,
},
formatter (value){
return value.data.value[2]
}
}
},
tooltip: {
triggerOn: "click",
backgroundColor:'rgb(106,182,234)',
formatter: function(e, t, n) {
return "<span style='font-size:16px;font-family:Lantinghei SC;font-weight:600;color:rgba(4,14,45,1);'>"+e.name+"</span>"+ "<br /><span style='font-size:14px;font-family:Lantinghei SC;font-weight:600;color:rgba(4,14,45,1);'>"+"风险指数：" + e.value[2]+"</span>"
}
},
itemStyle: {
normal: {
color: 'rgb(249,123,47)',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 3
},
{
type: 'lines',
coordinateSystem: 'geo',
zlevel: 1,
large: true,
effect: {
show: true,
constantSpeed: 30,
symbol: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 0,
trailLength: 0,
},
lineStyle: {
normal: {
show:false,
color:'rgb(249,123,47)',
width: 2,
opacity: 1.0,
curveness: 0.15
}
},
data: []
}
]
};
myChart.setOption(option);
myChart.on('click', function(params) {
console.log(params.name)
if (params.name=='广州市'){
option.series[3].data=moveLine.normal
}
myChart.setOption(option)
})
window.addEventListener('resize', () => { myChart.resize() })//跟随页面大小变化
},
扫一扫
1376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
