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 | 各工具配置項。 除了各個內置的工具按鈕外,還可以自定義工具按鈕。 注意,自定義的工具名字,只能以 |
來個例子:
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", //圖例高度
};
