1、前言

最近做的大數(shù)據(jù)平臺，里面很多部分用到了ECharts，其中有個功能，要求將圖表分組，根據(jù)用戶選擇的組，來確定ECharts要顯示那些線條和柱子，也就是動態(tài)的顯示option.series。

2、思路

找了一下EChart的文檔，發(fā)現(xiàn)可以通過控制option.legend.selected，來動態(tài)設置，無論餅圖、折線圖、還是柱狀圖，都可以通過這個來控制顯示哪些，只需要把數(shù)據(jù)變化set到ECharts實例上就可以了。

3、實現(xiàn)

EChart的legend.selected屬性是一個對象，可以把series的每一個系列的name作為鍵名，值為Boolean，來控制是否顯示。然后setOption實例化后的EChart對象，就可以實現(xiàn)動態(tài)更改顯示。

• 曲線圖數(shù)據(jù)：體驗地址

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]
    }
  ]
};

• 柱狀圖數(shù)據(jù)：體驗地址

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],
    }
  ]
};

• 餅圖數(shù)據(jù)：體驗地址

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' }
      ]
    }
  ]
};

打開體驗地址，將數(shù)據(jù)粘貼上去，就可以查看效果。

本次分享就到這兒啦，我是鵬多多，如果您看了覺得有幫助，歡迎評論，關(guān)注，點贊，轉(zhuǎn)發(fā)，我們下次見~

往期文章

• Vue2全家桶+Element搭建的PC端在線音樂網(wǎng)站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超詳細！Vue的九種通信方式
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
• 超詳細！Vue-Router手把手教程

個人主頁文章來源地址http://www.zghlxwxcb.cn/news/detail-694097.html

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金

到了這里，關(guān)于ECharts圖表動態(tài)修改series顯示隱藏的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！