问题: 当我们点击echart图表上的图例时, 图表中的数据虽然消失了,但是对应的y轴依然不存在,在y轴多时较为难看
一, 先上option配置 ,可以复制到echarts官网测试
option = { "legend": { "data": [ "A", "B", "C", ], selected:{ A: true, B: false, } }, "yAxis": [ { "name": "A", "type": "value", }, { "name": "C", offset: 20, "type": "value", }, ], "xAxis": { "type": "time", }, "tooltip": { "trigger": "axis", "axisPointer": { "animation": false, "type": "cross" } }, "series": [ { "name": "A", "type": "line", "yAxisIndex": 0, "data": [] }, { "name": "B", "type": "line", "yAxisIndex": 0, "data": [] } ] }
结果为:
二: option说明
1. option.legend.selected 中的配置是图例显隐状态的控制.(有个前提: option.series数组中必须要要有name属性等于对应图例名的数据,否则图例不显示)
2.且在option.yAxis控制着所有y轴的显示
3.隐藏的图例对应的option.series数组中的 yAxisIndex 属性可以不要或者不大于( yAxis数组长度 -1 )
4.当点击图例,会触发legendselectchanged事件, 通过监听该事件,改变上述option配置 可以实现隐藏图例对应的y轴