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 | 各工具配置項。 除了各個內置的工具按鈕外，還可以自定義工具按鈕。 注意，自定義的工具名字，只能以 |
3. 下面來分別介紹這五個工具
- saveAsImage：這個工具可以把圖表保存為圖片。里面有些常用的參數，type->保存圖片的格式，name->保存文件的名字，backgroundColor->保存圖片的背景色，show->是否顯示該工具，還有一些別的屬性可以自己再使用的時候查詢API文檔。
- restore：配置項還原。主要屬性是show->是否顯示該工具。
- dataView：數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新。show->是否顯示該工具，readOnly->是否不可編輯，optionToContent->自定義 dataView 展現函數，用以取代默認的 textarea 使用更豐富的數據編輯。可以返回 dom 對象或者 html 字符串，backgroundColor->數據視圖浮層背景色。
- dataZoom：數據區域縮放。目前只支持直角坐標系的縮放（這里的含義就是柱狀體，折線圖可以縮放，但是像餅狀圖就不能縮放）。show->是否顯示該工具。
- magicType：動態類型切換。show->是否顯示該工具，type->這是個數組，啟用的動態類型，包括
'line'（切換為折線圖）,'bar'（切換為柱狀圖）,'stack'（切換為堆疊模式）,'tiled'（切換為平鋪模式）。
4. 代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts練習</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '銷量柱狀圖', //標題文本內容
},
toolbox: { //可視化的工具箱
show: true,
feature: {
dataView: { //數據視圖
show: true
},
restore: { //重置
show: true
},
dataZoom: { //數據縮放視圖
show: true
},
saveAsImage: {//保存圖片
show: true
},
magicType: {//動態類型切換
type: ['bar', 'line']
}
}
},
tooltip: { //彈窗組件
show: true
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
5. 圖片展示：
整體顯示
數據視圖：
區域縮放：
保存圖片：點擊點擊圖中紅色方框選中的“下載”按鈕
切換為折線圖：點擊圖中紅色方框選中的”折線圖“狀按鈕
6. 總結：這里大致的學習了一下ECharts中的工具欄，我自己也是剛開始學習的，還有一些工具的參數文章中都沒有介紹，大家在使用的過程中如果有需要的參數可以查看ECharts的API文檔。