Echarts (option.legend) 圖例的屬性,外部控制圖例的select狀態,以達到模擬圖例的效果


先列舉一些常用的屬性:

legend: { //圖例,這里基本都是默認設置,就不一一列舉,echarts 官網很好找
  type: "plain", //'plain':普通圖例。缺省就是普通圖例。'scroll':可滾動翻頁的圖例。當圖例數量較多時可以使用。
  show: true, //是否顯示(隱藏和顯示)柱子的那個按鈕,默認true,如果不需要可以設置為false。如果沒有請忽略。
  selectedMode: true, //圖例上的點擊事件,不寫默認true ,設置false為不能點擊
  orient: 'horizontal',// orient 設置布局方式,默認水平布局,可選值:'horizontal'(水平) ¦ 'vertical'(垂直)
  data: ['預期', '實際', '假設'], // 需要個 series 中的 name 一致才會顯示
  icon: "circle", //圖形部份的形狀,類型包括 "circle" ¦ "rect" ¦ "roundRect" ¦ "triangle" ¦ "diamond" | "pin" ¦ "arrow" ¦ "none"
  itemWidth: 15, //圖例文字旁邊圖形的寬高
  itemHight: 2,
  itemGap: 40, // 設置間距
  //bottom: "auto", // 默認在頂部,同理 top,right,left, padding都可以設置
  //x: 'left',  // x 設置水平安放位置,默認全圖居中,可選值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐標,單位px)
  //y: 'top',  // y 設置垂直安放位置,默認全圖頂端,可選值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐標,單位px)
}

 

再告訴你一個有意思的屬性:

legend = { //圖例,這里基本都是默認設置,就不一一列舉,echarts 官網很好找
  show: false, // 不顯示組件自帶的圖例
  selected = { // 每一項的變量 需要和 series 中一一對應 "案例一": true, // true 代表顯示 echarts 顯示該條數據,相當於 原裝圖例沒有被點擊的狀態
    "案例二": true,
    "案例三": false, // false 代表顯示 echarts 不顯示該條數據,相當於 原裝圖例被點擊后(圖例置灰,數據隱藏)的狀態
  }
}

外部通過修改 true , false 就可以達到模擬原裝圖例的效果,並且還能做點其它事情,

使用案例:1.讓圖例的文字可以修改(修改圖例文字)。2.讓圖例響應一些其它事件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM