Echarts line chart clicks on a certain area and highlights it (multiple lines)
demand analysis
If the product wants to click a line on the line chart, or click a certain area to trigger an event, then one or more data points corresponding to the clicked place or area will be highlighted, not only at the inflection point of the line chart, but also at the inflection point of the line chart. I have thought of two ways to deal with it, as follows
1. Use the native click event of echarts to trigger the implementation,
which is the myChart.on('click', function(){}) method, but then I think that this method can only be clicked on the point to get the data information of that point , so relying solely on this method is not enough.
2. Obtain the click position, return this point which is the subscript of this piece of data, and then use the subscript to find which point was clicked, or the area where the point is located was clicked.
And what we want to highlight is not just that a certain point on the line chart becomes larger, but the color is different from other points, and that point becomes larger, as shown in the following figure:
It seems impossible to customize the color and the number of highlighted points with the official magnification. Later, I thought of such an implementation method,
because our data volume may not be very large, so I get it every time I click After the subscript of that data point, the configuration of the corresponding data point will be changed to highlight, and then setOption will be reset to achieve highlighting, which can realize the highlighting of multiple points and meet business requirements.
The configuration items of the line chart are not listed one by one, just write the function code directly:
Note:
It should be noted here that, in addition to clicking on a certain area to update the data and highlight it, if you re-query the data in other time ranges to update the map, you must empty the series and the subscript array you stored, otherwise There will be bugs
// this.chart 折线图实例
// this.series 折线图series数据
// this.selectIndex 存放高亮数据下标数组
this.chart.getZr().on('click', (e) => {
let pointInPixel = [e.offsetX, e.offsetY];
let pointInGrid = this.chart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0];
let handleIndex = Number(xIndex); //索引下标
// 如果没有数据得话下边逻辑可以不用走了
if (this.series.length == 0) return
// 这里是判断是否点击的是同一个点，如果当前点击的点已经高亮则不需要再进来
if (this.selectIndex.indexOf(handleIndex) == -1) {
this.selectIndex.push(handleIndex);
this.series.forEach(item => {
let obj = item;
var arr = [];
obj.data.map((val, ind) => {
// 这里自己选择，我的需求是实现高亮2个点，如果大于两个则取消第一个
if (this.selectIndex.length == 3) {
if (ind == this.selectIndex[0]) {
val = val.value;
}
}
// 高亮当前点击的数据点
if (ind == handleIndex) {
val = {
value: val,
itemStyle: {
normal: {
color: "#ff1493",
},
},
}
}
arr.push(val)
})
obj.data = arr;
})
// 更新数据
this.chart.setOption({
series: this.series
})
// 同上 这里自己选择，如果下标数组为3则删除第一个点
if (this.selectIndex.length == 3) {
this.selectIndex.shift();
}
}
});
这个点击事件应该是万能的，柱状图及其他类型图谱都可以复用，稍加改造就可以实现。