ECharts——（二）toolbox工具栏详细总结本文在官方文档的基础上，通过自己的尝试和总结以及对相关源码的学习，对

正如上篇文章中所说的，ECharts这个库一直都是拿来直接用，没有详细学习过，最近细看才发现，option配置项中的每一个组件都比想象的要复杂一点。

今天单独总结一下工具栏，也就是toolbox这个组件的详细内容，话不多说，直接开干。

工具栏是可选的一个组件，可以显示在图标上，里面的每一个工具都具有一个小功能，可以帮助用户和图表更好的交互。ECharts中内置了5个工具：数据区域缩放、动态类型切换、数据视图、重置和导出图片。在option.toolbox属性中进行配置。下面将详细介绍，一些简单易懂的内容我直接照搬了官方文档中的原话，对于我觉得需要注意的部分，是我自己的总结和自己尝试的代码和截图

一、基础属性

1.id

2.show 如果在option中设置了toolBox属性，则默认是true

3.orient 工具栏布局方向

4.itemSize 工具栏icon大小，直接写数字不加单位

5.itemGap 工具栏icon间隔，直接写数字不加单位

6.showTitle 是否在鼠标悬浮时显示icon标题，默认是true

7.left、right、top、bottom 默认是‘auto’

8.height、width 默认是‘auto’

9.zlevel

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel大的会放在小的上面

10.z 默认是2

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低，而且不会创建新的 Canvas。

二、iconStyle属性

用来设置icon的样式，当你开启了所有内置的工具后，工具栏的默认样式如下：

toolbox: {
    feature: {
        dataZoom: {},
        dataView: {},
        magicType: {},
        restore: {},
        saveAsImage: {}
    }
}

他们的顺序和你在feature中定义的顺序相同，当然，你可以只定义其中一部分。

下面是iconStyle属性下的所有属性：

color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity

看起来非常多，其实基本和css一样，所以就不一个个详述了，以加阴影为例：

iconStyle: {
    shadowColor: 'rgba(0, 0, 0, 0.8)',
    shadowBlur: 10
},

三、emphasis属性

该属性下只有一个属性，就是iconStyle，这里的iconStyle比上面的iconStyle多了对icon文字（也就是鼠标悬浮到icon上面后显示的文字）的样式设置的属性：textPosition , textFill , textAlign , textBackgroundColor , textBorderRadius , textPadding。也是和css一样，就不一一介绍了，看名字就知道是设置什么的。

这里我其实不理解为什么要单独把iconStyle拿出来作为一个属性，感觉就用emphasis就行了。

四、feature属性重点

该属性用来设置各工具的配置项，这个属性必须要写，按自己的需求向工具栏中添加工具，并设置工具的相关内容，否则工具栏为空。

除了各个内置的工具按钮外，还可以自定义工具按钮（在这一节的最后讲）。

注意，自定义的工具名字，只能以 my 开头，比如 myTool1，myTool2

一共有5个内置的工具：

（一）saveAsImage

所有属性如下：

type , name , backgroundColor , connectedBackgroundColor , excludeComponents , show , title , icon , iconStyle , emphasis , pixelRatio

其中show、title、icon、iconStyle、emphasis都是和该工具本身样式有关的，用法和上面的iconStyle相同，不再说明。和保存的图片有关的属性如下：

1.type - 保存图片的格式

如果 renderer 的类型在初始化图表时被设为 'canvas'（默认），则支持 'png'（默认）和 'jpg'；
如果 renderer 的类型在初始化图表时被设为 'svg'，则 type 只支持 'svg'（'svg' 格式的图片从 v4.8.0 开始支持）。

2.name - 保存图片的名称

保存的文件名称，默认使用 title.text 作为名称。

3.backgroundColor - 保存图片的背景色

默认使用 backgroundColor，如果backgroundColor不存在的话会取白色。

4.connectedBackgroundColor

如果图表使用了 echarts.connect 对多个图表进行联动，则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色。

5.excludeComponents - 保存为图片时忽略的组件数组

默认是[‘toolBox’]，也就是说导出的图片上默认是看不到工具栏的。

6.pixelRatio - 保存图片的分辨率比例

默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2。

（二）restore

配置项还原。这一个工具算是最省心的，没有什么复杂参数需要介绍。

（三）dataView

数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。效果如下：（这个图是官方的例子）

点击数据视图icon，得到数据界面：

当把第三列倒数第二行的2改成-5再点击刷新后，图表也随之改变：

所有属性如下：

show , title , icon , iconStyle , emphasis , readOnly , optionToContent , contentToOption , lang , backgroundColor , textareaColor , textareaBorderColor , textColor , buttonColor , buttonTextColor

除去设置该工具自身样式的属性，剩下的属性如下：

1.readOnly - 数据是否是只读

默认是false，也就是默认情况下可以更改数据视图中的数据

2.数据视图的样式

数据视图默认是textarea类型，下面的属性全是设置数据视图样式的属性：backgroundColor、textareaColor、textareaBorderColor、textColor、buttonColor、buttonTextColor

3.lang - 数据视图上的话术，数组

数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']，后面两个是按钮，这点除了看上面的图猜出来，也可以通过看源码确认：

4.optionToContent - 自定义数据的展现方式

自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。

点击数据视图的icon时，会调用optionToContent属性定义的方法。

比如，用下面的设置就可以将数据视图以table的形式显示出来：

dataView: {
    readOnly: false,
    optionToContent: function (opt) {
        var axisData = opt.xAxis[0].data;
        var series = opt.series;
        var table ='<table style="width:100%;text-align:center"><tbody><tr>' +
                    "<td>时间</td>" + "<td>" +series[0].name + "</td>" + 
                    "<td>" + series[1].name + "</td>" + "</tr>";
        for (var i = 0, l = axisData.length; i < l; i++ ) {
             table += "<tr>" + "<td>" + axisData[i] + "</td>" + 
                      "<td>" + series[0].data[i] + "</td>" + 
                      "<td>" + series[1].data[i] + "</td>" + "</tr>";
        }       
        table += "</tbody></table>";
        return table;                            
    },
    ...
},

但是因为table本身并不是一个获取用户输入的标签，所以其中的内容没法修改。

可以将for循环改成下面这样：

for (var i = 0, l = axisData.length; i < l; i++) {
    table += "<tr>" + "<td>" + axisData[i] + "</td>" + 
             "<td><textarea>" + series[0].data[i] + "</textarea></td>" + 
             "<td><textarea>" + series[1].data[i] + "</textarea></td>" + 
             "</tr>";
}

在每一个单元格中放入一个textarea，这样既按照table进行布局，又可以编辑数据。当然，也可以用各种type的input。

5.contentToOption

在使用 optionToContent 的情况下，如果支持数据编辑后的刷新，需要自行通过该函数实现组装 option 的逻辑。

比如，上面的例子，改成按照table展示后，更改数据点击刷新图表并不会随之变化，因为它不知道怎么获取更改后的数据。

在该属性定义的函数上打断点，可以看到点击刷新按钮时会调用这个函数，

contentToOption: function(table, opt) {…}

其中的两个参数table和opt，分别是optionToContent返回的DOM（可以看出来DOM是一个div，并不直接是table）和该图表的option，所以，需要做的就是将table中的值传给option中的数据。

contentToOption: function (table, opt) {
    var data_trs = table.children[0].children[0].children;
    var data1 = [];
    var data2 = [];
    //data_trs第一行是标题，这里不需要，因为标题并没有被修改
    opt.series[0].name = data_trs[0].children[1].innerHTML;
    opt.series[1].name = data_trs[0].children[2].innerHTML;
    //从第二行开始是数据
    for (var i=1; i<data_trs.length; i++) {
        data1.push(data_trs[i].children[1].children[0].value);
        data2.push(data_trs[i].children[2].children[0].value);
    };
    opt.series[0].data = data1;
    opt.series[1].data = data2;
    return opt;
},

这里有个大坑，如果用的是input框展示和获取数据，则肯定是用value获取其中的值，但是因为上面用的是textarea，这是个双标签，所以我就很自然的用innerHTML获取其中的值。结果发现不报错但是数据也不改变，后来查了半天才知道textarea的innerHTML只能拿到初始值，在页面上输入、修改的值通过innerHTML取不到，可以通过value得到。

后来一想，默认不就是用的textarea这种形式展示数据么，果断查了一下源码，发现人家用的就是value，简直醉了

（四）dataZoom

就是这一对icon，用来进行数据区域缩放和还原。目前只支持直角坐标系的缩放。

点击第一个icon然后在图表上拖拽出一块矩形区域，则该矩形区域内的内容被放大至整个图表（具体规则看下面的属性）。点击第二个icon还原到上一步。

所有属性如下：

show , title , icon , iconStyle , emphasis , filterMode , xAxisIndex , yAxisIndex , brushStyle

照惯例，只看没讲过的属性：

1.xAxisIndex - 被控制的x轴索引

指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴。

2.yAxisIndex - 被控制的y轴索引

和上面一样。

我把yAxisIndex设为‘none’，然后截取浅蓝色矩形框的位置

结果如下：可以看出y轴的刻度并没有改变

3.brushStyle - 控制刷选框的样式

属性如下，和css一样，不详细说明

color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity

4.filterMode - 数据过滤模式

有4种值：

'filter'：当前数据窗口外的数据，被过滤掉。即会影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
'weakFilter'：当前数据窗口外的数据，被过滤掉。即会影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
'empty'：当前数据窗口外的数据，被设置为空。即不会影响其他轴的数据范围。
'none': 不过滤数据，只改变数轴范围。

这个属性在dataZoom组件中作用明显，因为dataZoom针对的是每一个坐标轴，在这里因为是直接框出一个区域，没有什么影响，所以可以先忽略这个属性。（我自己试了一会儿，然后根据原理判断这个属性在这种情况下没什么用，如有错误，还请指正）

（五）magicType

动态切换图表类型，所有属性如下：

show , type , title , icon , iconStyle , emphasis , option , seriesIndex

照惯例，只看没讲过的属性：

1.type - 类型的数组

元素有3种值：‘line’，‘bar’，‘stack’

如果三种都写进数组：magicType: { type: ['line', 'bar', 'stack'] }, 则效果为：工具栏会出现这三个icon，点击icon会将图表切换成对应的类型。

其中堆叠是要搭配折线图或柱形图一起用的，不能单独使用。

2.option - 各类型的专有配置项

我们知道option是整个图表的配置项，而通过toolbox.feature.magicType.option.line/bar/stack 可以给各个类型设置自己的专属配置项，在切换到某类型的时候会合并相应的配置项。

比如图表本来用的是默认的配色，进行如下设置后：

magicType: {
    type: ['line', 'bar', 'stack'],
    option: {
       bar: {
           color: 'rgb(100, 100, 100)'
        }
    },
},

点击切换成柱形图后，会变成灰色：

再点击切换成折线图，发现还是灰色，因为图表本来用的是默认的配色，并没有设置color，第一次切换成bar之后，option进行了合并，所以就算切成line依然是灰色。

3.seriesIndex - 各类型对应的系列的索引数组

这个很好理解，就是各类型种的数据来自于哪些系列，通过toolbox.feature.magicType.seriesIndex.line/bar 进行设置。

（六）自定义工具

直接在feature中进行自定义工具的设置即可，和内置的工具平级。

注意，自定义的工具名字，只能以 my 开头，比如 myTool1，myTool2

比如在最后面，加上一个自定义的工具：

myTool1: {
    show: true,
    title: '自定义工具1',
    // icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
    icon: 'path://M 50 250 Q 100 150 150 250',
    onclick: function (){
        alert('自定义工具被使用了')
    }
},