echarts图例取消选中时隐藏对应Y轴
问题: 当我们点击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轴
 
                    
                     
                    
                 
                    
                
 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号