ECharts學習（3）--toolbox（工具欄）

時間 2019-11-13

標籤 echarts 學習 toolbox 工具欄简体版

原文原文鏈接

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

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

屬性	類型	說明
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	各工具配置項。java 除了各個內置的工具按鈕外，還能夠自定義工具按鈕。數組注意，自定義的工具名字，只能以 `my` 開頭。echarts

3.　　下面來分別介紹這五個工具dom

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>