需求:折线图点击具体某条线线变宽,再次点击恢复,如果点击其他的线,上次点击的恢复
this.chart.getZr().on('click', (params) => {
// 如果点击echart空白地方则topTarget为空
if (params.topTarget) {
var seriesIndex = params.target.seriesIndex
// 得到点击的seriesIndex就可以写业务代码了
var option = this.chart.getOption()
// 如果当前点击和上一次点击的曲线不同,将上一次点击的变回之前的宽度
if (this.clickSeriesIndex !== null && seriesIndex !== this.clickSeriesIndex) {
option.series[this.clickSeriesIndex].lineStyle = {
width: 2
}
}
// 这里点击线会变粗,再点击恢复细线
if (option.series[seriesIndex].lineStyle.width === 2) {
option.series[seriesIndex].lineStyle = {
width: 4
}
this.clickSeriesIndex = seriesIndex
} else {
option.series[seriesIndex].lineStyle = {
width: 2
}
this.clickSeriesIndex = null
}
this.chart.setOption(option)
}
})
上面代码seriesIndex 获取有问题params.target.seriesIndex 只能获取到点击拐点对应的seriesIndex值 所以seriesIndex获取方式如下
this.chart.getZr().on('click', (params) => {
let seriesIndex = 0
if (params.target) { // 点击拐点
seriesIndex = params.target.seriesIndex
} else if (params.topTarget && params.topTarget.parent && params.topTarget.parent.parent) { // 点击线
seriesIndex = params.topTarget.parent.parent.__ecComponentInfo.index
} else {
return
}
// 得到点击的seriesIndex就可以写业务代码了
var option = this.chart.getOption()
// 如果当前点击和上一次点击的曲线不同,将上一次点击的变回之前的宽度
if (this.clickSeriesIndex !== null && seriesIndex !== this.clickSeriesIndex) {
option.series[this.clickSeriesIndex].lineStyle = {
width: 2
}
}
// 这里点击线会变粗,再点击恢复细线
if (option.series[seriesIndex].lineStyle.width === 2) {
option.series[seriesIndex].lineStyle = {
width: 4
}
this.clickSeriesIndex = seriesIndex
} else {
option.series[seriesIndex].lineStyle = {
width: 2
}
this.clickSeriesIndex = null
}
this.chart.setOption(option)
})