ECharts 工具栏

通过前面的学习，我们发现我们可以创建一个几乎完美的图表，但是做到如此 ECharts 还是觉得远远不够，他认为一个好的图表不仅要能完美的展示数据，还应该有一些附加的功能帮助用户更好的更方便的完成一些其他的事情，比如：导出图片，动态切换图表类型等等。这些功能在 ECharts 的工具栏组件都能完成，让我们看一下吧。

1. 简介

ECharts 的工具栏组件在主要的图表功能之外，为用户提供了图片导出、数据视图切换、图表类型切换、数据区域缩放、还原、数据框选六类功能按钮。

2. 配置方法

工具栏组件可通过 toolbox 属性进行配置，形如：

const options = {
    toolbox: {
        show: true,
        feature: {},
        ...
    }
};

完整的配置项列表请参考 官网，其中 feature 用于配置工具栏的功能按钮，支持如下子属性：

• feature.saveAsImage: “图片导出”功能配置，特别的可通过该项设定导出图片的格式、分辨率、需要忽略的组件等；
• feature.store: “还原”功能配置，可通过该项设定工具按钮视觉效果；
• feature.dataView: “数据视图切换”功能配置，特别的可通过该项定义从数据视图到配置项，或从配置项到数据视图的转换函数；
• feature.dataZoom: “数据区域缩放”功能配置，特别的可通过该项设定数据缩放时的过滤效果；
• feature.magicType: “图表类型切换”功能配置，特别的可通过该项设定支持切换的类型、切换时附加的配置项等；
• feature.brush: “数据框选”功能配置，可用于设定按钮视觉效果。

下面展开讨论。

3. 导出图片

工具栏组件的“图片导出”按钮可将图表导出为静态图片，支持 jpeg、png、svg 三种格式，可通过 toolbox.feature.saveAsImage 项进行配置，其中比较重要的配置项有：

• type：用于设定导出图片的格式，当 renderer = canvas 时，支持 jpeg、png，默认为 png；当 renderer = svg 时仅支持 svg 格式；
• name：导出的文件名，默认为配置项中的 title.text 值；
• excludeComponents：导出时需要忽略的组件列表，默认值为 [‘toolbox’]；
• pixelRatio：导出图片的分辨率。

例如对于下述配置：