打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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之前

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Python绘图还在用Matplotlib?out了 !一款手绘可视化神器!
Javascript图表库: Dojo Charting - Dojo中文博客 - CSD...
百度地图、ECharts整合HT for Web网络拓扑图应用
echarts在一个折线/柱状图浮窗显示多条数据
动画折线图,你还可以试试这个图表
canvas重画,解决重影问题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服