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轴


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM