echarts display download button, echarts custom button, echarts add button

echarts display download button, echarts custom button, echarts add button

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

©Copyright Sweet Potato YaoWednesday, February 8, 2017

http://fanshuyao.iteye.com/

1. echarts built-in button

The echarts button is in the toolbar.

There are five built-in tools for exporting pictures, data view, dynamic type switching, data area zoom, and reset. As shown below:

The configuration of the button is in the feature attribute under the toolbox

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

1. Save as image: saveAsImage

For documentation see: http://echarts.baidu.com/option.html#toolbox.feature.saveAsImage

2. The data view tool can display the data used in the current chart, which can be dynamically updated after editing: dataView

For documentation see: http://echarts.baidu.com/option.html#toolbox.feature.dataView

I won't say anything else, just go to the official website to see the documentation

The following code displays the download image button and the data view button :

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

2. echarts custom button

In addition to the various built-in tool buttons, the tool buttons can also be customized.

Note that custom tool names can only start with my, such as myTool1 and myTool2 in the following example:

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: 'Custom extension method 1',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: 'Custom extension method',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

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

http://fanshuyao.iteye.com/

echarts display download button, echarts custom button, echarts add button

Guess you like