Echarts 折线图实现图例反选

最新推荐文章于 2024-07-11 17:20:27 发布

Felice_

最新推荐文章于 2024-07-11 17:20:27 发布

阅读量609

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Felice_/article/details/131104600

版权

Echarts 折线图实现图例反选，点击图例，其他图例代表的折现消失

代码如下

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {}; 
    var option; 
    option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    } 
    this.myChart.on('legendselectchanged', function(legend) {
        const {selected, name} = legend; 
        if ( selected) {
            Object.keys(selected).forEach(key => {
                selected[key] = key === name ? true : false; 
            });  
        } else {
            let open = selected[name];
            selected[name] = open; 
        }
        option.legend.selected = selected;
        // 101行 处this 指向 this.myChart
        // 官方： chart.setOption(option, notMerge, lazyUpdate); 
        // setOption的第二个参数 是否不跟之前设置的 option 进行合并，默认为 false，即合并
        this.setOption(option,true);

    });
    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>