在echarts中的地图中,使用lines,想要实现鼠标移上去的高亮和虚化其他series
。
对series
是scatter的可以实现。
$.get(ROOT_PATH + '/data/asset/geo/Map_of_Iceland.svg', function (svg) {
echarts.registerMap('iceland_svg', { svg: svg });
option = {
tooltip: {},
geo: {
tooltip: {
show: true
},
selectedMode: true,
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem',
itemStyle: {
color: 'yellow'
}
},
map: 'iceland_svg',
roam: true,
select: {
itemStyle: {
color: '#b50205'
}
}
},
series: [
{
type: 'lines',
name: '111',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: function (params) {
return (params[2] / 100) * 15 + 5;
},
polyline: true,
lineStyle: {
width: 4
},
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
},
encode: {
tooltip: 2
},
data: [{
coords: [
[488.2358421078053, 459.70913833075736, 100],
[770.3415644319939, 757.9672194986475, 30],
[1180.0329284196291, 743.6141808346214, 80],
[894.03790632245, 1188.1985153835008, 61],
[1372.98925630313, 477.3839988649537, 70],
[1378.62251255796, 935.6708486282843, 81]
]
}]
// data: [
// [488.2358421078053, 459.70913833075736, 100],
// [770.3415644319939, 757.9672194986475, 30],
// [1180.0329284196291, 743.6141808346214, 80],
// [894.03790632245, 1188.1985153835008, 61],
// [1372.98925630313, 477.3839988649537, 70],
// [1378.62251255796, 935.6708486282843, 81]
// ]
}, {
type: 'lines',
name: '222',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: function (params) {
return (params[2] / 100) * 15 + 5;
},
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
},
encode: {
tooltip: 2
},
polyline: true,
lineStyle: {
width: 5
},
data: [{
coords: [
[100, 100, 100],
[100, 300, 80],
[100, 500, 60],
[100, 700, 41],
[100, 900, 20],
[100, 1100, 1]
]
}]
}
]
};
myChart.setOption(option);
myChart.getZr().on('click', function (params) {
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
});
});
这是在官网的例子上直接修改的。
舅舅孩子吧!!!!
找找看可有想要的
https://www.makeapie.cn/echar...