echarts toolBox工具欄


1、toolbox:這是ECharts中的工具欄。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。

2、toolbox中的屬性,不包含五個工具。里面最主要的就是feature這個,這是toolbox的配置項,五個工具的配置就是在這個里面實現的。

屬性 類型 說明
toolbox.show boolean 默認值為true,是否顯示工具欄組件
toolbox.orient stirng 默認值為horizontal,工具欄 icon 的布局朝向。可選項為“horizontal”和“vertical”
toolbox.itemSize number 默認值為15,工具欄 icon 的大小。
toolbox.itemGap number 默認值為10,工具欄 icon 每項之間的間隔。橫向布局時為水平間隔,縱向布局時為縱向間隔。
toolbox.showTitle boolean 默認值為true,是否在鼠標 hover 的時候顯示每個工具 icon 的標題。
toolbox.feature Object

各工具配置項。

除了各個內置的工具按鈕外,還可以自定義工具按鈕。

注意,自定義的工具名字,只能以 my 開頭。

 

 

 

 

 

 

 

 

 

 

 

來個例子:

toolbox={

  show : true, //是否顯示工具欄組件

  orient:"horizontal", //工具欄 icon 的布局朝向'horizontal' 'vertical'

  itemSize:15, //工具欄 icon 的大小

  itemGap:10, //工具欄 icon 每項之間的間隔

  showTitle:true, //是否在鼠標 hover 的時候顯示每個工具 icon 的標題

  feature : {

    mark : { // '輔助線開關'

      show: true

    },

    dataView : { //數據視圖工具,可以展現當前圖表所用的數據,編輯后可以動態更新

      show: true, //是否顯示該工具。

      title:"數據視圖",

      readOnly: false, //是否不可編輯(只讀)

      lang: ['數據視圖', '關閉', '刷新'], //數據視圖上有三個話術,默認是['數據視圖', '關閉', '刷新']

      backgroundColor:"#fff", //數據視圖浮層背景色。

      textareaColor:"#fff", //數據視圖浮層文本輸入區背景色

      textareaBorderColor:"#333", //數據視圖浮層文本輸入區邊框顏色

      textColor:"#000", //文本顏色。

      buttonColor:"#c23531", //按鈕顏色。

      buttonTextColor:"#fff", //按鈕文本顏色。

    },

    magicType: { //動態類型切換

      show: true,

      title:"切換", //各個類型的標題文本,可以分別配置。

      type: ['line', 'bar'], //啟用的動態類型,包括'line'(切換為折線圖), 'bar'(切換為柱狀圖), 'stack'(切換為堆疊模式), 'tiled'(切換為平鋪模式)

    },

    restore : { //配置項還原。

      show: true, //是否顯示該工具。

      title:"還原",

    },

    saveAsImage : { //保存為圖片。

      show: true, //是否顯示該工具。

      type:"png", //保存的圖片格式。支持 'png' 和 'jpeg'。

      name:"pic1", //保存的文件名稱,默認使用 title.text 作為名稱

      backgroundColor:"#ffffff", //保存的圖片背景色,默認使用 backgroundColor,如果backgroundColor不存在的話會取白色

      title:"保存為圖片",

      pixelRatio:1 //保存圖片的分辨率比例,默認跟容器相同大小,如果需要保存更高分辨率的,可以設置為大於 1 的值,例如 2

    },

    dataZoom :{ //數據區域縮放。目前只支持直角坐標系的縮放

      show: true, //是否顯示該工具。

      title:"縮放", //縮放和還原的標題文本

      xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省則控制所有的x軸。如果設置為 false 則不控制任何x軸。如果設置成 3 則控制 axisIndex 為 3 的x軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的x軸

      yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省則控制所有的y軸。如果設置為 false 則不控制任何y軸。如果設置成 3 則控制 axisIndex 為 3 的y軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的y軸

    },

  },

  zlevel:0, //所屬圖形的Canvas分層,zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面

  z:2, //所屬組件的z分層,z值小的圖形會被z值大的圖形覆蓋

  left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'

  top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'

  right:"auto", //組件離容器右側的距離,'20%'

  bottom:"auto", //組件離容器下側的距離,'20%'

  width:"auto", //圖例寬度

  height:"auto", //圖例高度

};


免責聲明!

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



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