分享

echarts 怎么点击图例显示该折线,隐藏其他折线

 化茧成蝶时光机 2021-04-01

接上一篇内容  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之前

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多