echarts 顯示下載按鈕，echarts 自定義按鈕，echarts 添加按鈕

echarts 顯示下載按鈕，echarts 自定義按鈕，echarts 添加按鈕

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright  蕃薯耀 2017年2月8日 星期三

http://www.cnblogs.com/fanshuyao/

 

一、echarts內置按鈕

echarts按鈕在工具欄。

內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。如下圖所示：

 

按鈕的配置在toolbox下的feature屬性

http://echarts.baidu.com/option.html#toolbox

 

1、保存為圖片：saveAsImage

 

文檔見：http://echarts.baidu.com/option.html#toolbox.feature.saveAsImage

 

2、數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新：dataView

文檔見：http://echarts.baidu.com/option.html#toolbox.feature.dataView

其它的不再說了，自己到官網看文檔

 

下面的代碼顯示下載圖片按鈕及數據視圖按鈕：

 

 

toolbox: {
            //show: true,
            itemSize: 20,
            itemGap: 30,
            right: 50,
            feature: {
                dataView: {show:true},
                saveAsImage: {
                    //excludeComponents :['toolbox'],
                    pixelRatio: 2
                }
            }
}

 

二、echarts自定義按鈕

 

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

注意，自定義的工具名字，只能以 my 開頭，例如下例中的 myTool1，myTool2：

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: '自定義擴展方法1',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: '自定義擴展方法',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

 

 

（如果你覺得文章對你有幫助，歡迎捐贈，^_^，謝謝！） 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright  蕃薯耀 2017年2月8日 星期三

http://www.cnblogs.com/fanshuyao/