ECharts 工具栏
通过前面的学习，我们发现我们可以创建一个几乎完美的图表，但是做到如此 ECharts 还是觉得远远不够，他认为一个好的图表不仅要能完美的展示数据，还应该有一些附加的功能帮助用户更好的更方便的完成一些其他的事情，比如：导出图片，动态切换图表类型等等。这些功能在 ECharts 的工具栏组件都能完成，让我们看一下吧。
1. 简介
2. 配置方法
const options = {
toolBox: {
show: true,
feature: {},
...
}
};
-
feature.saveAsImage: “图片导出”功能配置，特别的可通过该项设定导出图片的格式、分辨率、需要忽略的组件等； -
feature.store: “还原”功能配置，可通过该项设定工具按钮视觉效果； -
feature.dataView: “数据视图切换”功能配置，特别的可通过该项定义从数据视图到配置项，或从配置项到数据视图的转换函数； -
feature.dataZoom: “数据区域缩放”功能配置，特别的可通过该项设定数据缩放时的过滤效果； -
feature.magicType: “图表类型切换”功能配置，特别的可通过该项设定支持切换的类型、切换时附加的配置项等； -
feature.brush: “数据框选”功能配置，可用于设定按钮视觉效果。
下面展开讨论。
3. 导出图片
例如对于下述配置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px; height: px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolBox: {
feature: { saveAsImage: { pixelRatio: , type: 'jpeg', excludeComponents: ['legend'] } },
},
legend: {
data: ['预算', '实际开销'],
left: ,
},
radar: {
indicator: [
{ name: '销售', max: },
{ name: '管理', max: },
{ name: '信息技术', max: },
{ name: '客服', max: },
{ name: '研发', max: },
{ name: '市场', max: },
],
},
series: [
{
type: 'radar',
data: [
{
value: [, , , , , ],
name: '预算',
},
{
value: [, , , , , ],
name: '实际开销',
},
],
},
],
};
myChart.setoption(option);
</script>
</body>
</html>
导出效果：
Tips：
pixelRatio 定义导出图片的缩放比例，例如上例中图表容器的宽高为style="width: 600px; height: 400px;"，若pixelRatio = 1则导出图片分辨率为 600x400；若pixelRatio = 2则为 1200x800；若pixelRatio = 0.5则为 300x200。下限为 0，当数值超过 35 时，导出图片可能为空。
除工具栏按钮外，开发者还可以通过 echartsInstance.getDataURL 接口将图表内容导出为 base64 串，该接口接受如下参数：
(opts: {
// 导出的格式，可选 png, jpeg, svg
type?: string,
// 导出的图片分辨率比例，默认为 1。
pixelRatio?: number,
// 导出的图片背景色，默认使用 option 里的 backgroundColor
backgroundColor?: string,
// 忽略组件的列表
excludeComponents?: Array<string>,
}) => string;
function saveAsImg(chart) {
const img = chart.getDataURL({
backgroundColor: '#fff',
excludeComponents: ['legend'],
pixelRatio: ,
});
const anchor = document.createElement('a');
anchor.href = img;
anchor.setAttribute('download', 'test.jpeg');
anchor.click();
}
导出效果：
4. 数据视图
数据视图工具用于修改数据视图，通过 toolBox.feature.dataView 项配置，点击后可以以表格形式展示图表中包含的数据信息；表格本身还支持简单编辑功能，编辑后会即时更新图表视图。例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px; height: px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolBox: {
feature: {
// 提供 dataView 空对象即可启动 dataView 功能
dataView: {},
},
},
radar: {
indicator: [
{ name: '销售', max: },
{ name: '管理', max: },
{ name: '信息技术', max: },
{ name: '客服', max: },
{ name: '研发', max: },
{ name: '市场', max: },
],
},
series: [
{
type: 'radar',
data: [
{
value: [, , , , , ],
name: '预算',
},
{
value: [, , , , , ],
name: '实际开销',
},
],
},
],
};
myChart.setoption(option);
</script>
</body>
</html>
示例效果：
toolBox.feature.dataView 有两个比较重要的配置项：
-
optionToContent: 自定义数据视图函数，可以通过该选项配置更丰富的展示方法，函数签名：
(option:Object) => HTMLDomElement|string； - contentToOption: 用于定义如何将数据视图结果转换为图表配置项。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px; height: px;"></div>
<div id="dataview">hello world</div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
// 使用react组件形式编写的数据视图
function DataView(props) {
const rows = props.series;
return React.createElement(
'table',
{
className: 'table',
},
rows.map(function (row) {
return React.createElement(
'tr',
null,
React.createElement('td', null, row.name),
row.value.map(function (cell) {
return React.createElement('td', null, cell);
})
);
})
);
}
const option = {
toolBox: {
feature: {
dataView: {
optionToContent(opt) {
const {
series: [{ data }],
} = opt;
// 动态创建一个容器节点
const root = document.createElement('div');
// 需要先将react组件渲染到容器节点上
ReactDOM.render(React.createElement(DataView, { series: data }), root);
return root;
},
},
},
},
radar: {
indicator: [
{ name: '销售', max: },
{ name: '管理', max: },
{ name: '信息技术', max: },
{ name: '客服', max: },
{ name: '研发', max: },
{ name: '市场', max: },
],
},
series: [
{
type: 'radar',
data: [
{
value: [, , , , , ],
name: '预算',
},
{
value: [, , , , , ],
name: '实际开销',
},
],
},
],
};
myChart.setoption(option);
</script>
</body>
</html>
Tips：
5. 动态类型切换
图表类型切换工具允许用户在运行状态下动态变更图表类型，目前支持在 line、bar 两种图表间切换；以及在 stack(堆叠)、tiled(平铺) 两种状态间切换。动态类型工具可通过 toolBox.feature.magicType 项进行配置，核心配置项有：
- type：允许切换的类型列表，支持 line、bar、stack、tiled 四个关键字，其中 stack 用于在折线图或柱状图上附加堆叠效果；tiled 用于取消堆叠效果，两者互斥；
- option：各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项；
- seriesIndex：各个类型对应的系列列表。
下面示例综合体现上述配置项的用法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px; height: px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolBox: {
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled'],
option: {
// 类型切换时，下述配置项将被merge到对应类型的图表 series 中
line: { smooth: true },
bar: { label: { show: true } },
stack: { label: { show: true, color: 'red' } },
},
seriesIndex: {
line: [],
},
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C',
},
},
series: [
{
name: '最高气温',
type: 'line',
data: [, , , , , , ],
},
{
name: '最低气温',
type: 'line',
data: [, -, , , , , ],
},
],
};
myChart.setoption(option);
</script>
</body>
</html>
示例效果：
6. 数据区域缩放
缩放工具基于 datazoom 组件实现，配置上有两个重点，一是通过 xAxisIndex 或 yAxisIndex 指定缩放工具作用的轴；二是通过 filterMode 设定数值的过滤逻辑。两类配置的详细介绍可参考 datazoom 一节，此处不再赘述。
7. 重置
Tips：
重置功能有很多限制：
