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

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

 

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

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

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

 

1、echarts內置按鈕

echarts按鈕在工具欄。

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

 

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

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

 

一、保存爲圖片：saveAsImage

 

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

 

二、數據視圖工具，能夠展示當前圖表所用的數據，編輯後能夠動態更新：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
                }
            }
}

 

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/