echarts 怎么点击图例显示该折线,隐藏其他折线
接上一篇内容 html实现,改为vue中实现
ChangeChartLegend.js文件
export default function changeLegend(chart) {
chart.on('legendselectchanged', function(params) {
// console.log(params);
var selected = params.selected
var name = params.name // current clicked one
if (selected !== undefined) {
var unSelectedCount = 0
var selectedCount = 0
var legend = []
for (const item in selected) {
if (!selected.hasOwnProperty(item)) {
continue
} else {
legend.push({ name: item })
}
// 所有 selected Object 里面 true 代表 selected, false 代表 unselected
if (selected[item] === false) {
++unSelectedCount
} else {
++selectedCount
}
}
if (unSelectedCount === 1 && selected[name] === false) {
chart.dispatchAction({ type: 'legendToggleSelect', batch: legend })
} else if (selectedCount === 0) {
chart.dispatchAction({ type: 'legendSelect', batch: legend })
}
}
})
}
chart.vue文件中引用:
import changeLegend from '@/components/Charts/js/ChangeChartLegend'
changeLegend(this.chart) //写在setoption之前