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