ECharts图表动态修改series显示隐藏

1、前言

ECharts.gif

最近做的大数据平台，里面很多地方用到了ECharts，其中有个功能，要求将图表分组，根据用户选择的组，来确定ECharts要显示那些线条和柱子，也就是动态的显示option.series。

2、思路

找了一下EChart的文档，发现可以通过控制option.legend.selected，来动态设置，无论饼图、折线图、还是柱状图，都可以通过这个来控制显示哪些。

3、实现

EChart的legend.selected属性是一个对象，可以把series的每一个系列的name作为键名，值为Boolean，来控制是否显示。通过实例化后的EChart对象来setOption，就可以实现动态更改显示，只需要把数据变化set到ECharts实例上就可以了。

曲线图数据：体验地址

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    selected: {
      AAA: false
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'AAA',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'BBB',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'CCC',
      type: 'line',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'DDD',
      type: 'line',
      data: [320, 332, 301, 334, 390, 330, 320]
    }
  ]
};

柱状图数据：体验地址

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  legend: {
    selected: {
      AAA: false
    }
  },
  tooltip: {
    trigger: 'item'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'AAA',
      type: 'bar',
      data: [10,20,30,40,50,60,70],
    },
    {
      name: 'BBB',
      type: 'bar',
      data: [20,30,40,50,60,70,80],
    },
    {
      name: 'CCC',
      type: 'bar',
      data: [30,40,50,60,70,80,90],
    },
    {
      name: 'DDD',
      type: 'bar',
      data: [40,50,60,70,80,90,100],
    },
    {
      name: 'EEE',
      type: 'bar',
      data: [50,60,70,80,90,100,110],
    }
  ]
};

饼图数据：体验地址

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    selected: {
      AAA: false
    }
  },
  series: [
    {
      name: 'Pie',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'AAA' },
        { value: 735, name: 'BBB' },
        { value: 580, name: 'CCC' },
        { value: 484, name: 'DDD' },
        { value: 300, name: 'EEE' }
      ]
    }
  ]
};

打开体验地址，将数据粘贴上去，就可以查看效果。

本次分享就到这儿啦，我是@鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦

往期文章

个人主页

最后编辑于：2023.08.29 18:41:08