当前位置：首页 > news >正文

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

news 2025/8/8 16:00:16

文章目录

1、前言
2、思路
3、实现

1、前言

ECharts

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

2、思路

找了一下EChart的文档，发现可以通过控制option.legend.selected，来动态设置，无论饼图、折线图、还是柱状图，都可以通过这个来控制显示哪些，只需要把数据变化set到ECharts实例上就可以了。

3、实现

EChart的legend.selected属性是一个对象，可以把series的每一个系列的name作为键名，值为Boolean，来控制是否显示。然后setOption实例化后的EChart对象，就可以实现动态更改显示。

曲线图数据：体验地址

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