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文檔。