ECharts 工具栏
通过前面的学习，我们发现我们可以创建几乎完美的图表，但是做到如此 ECharts 还是觉得远远不够，他认为好的图表不仅要能完美的展示数据，还应该有一些附加的帮助更好的更方便的完成一些其他的事情，比如：导出，动态切换图表类型等等。这些在 ECharts 的工具栏组件都能完成，让我们看一下吧。
ECharts 的工具栏组件在主要的图表之外，为提供了导出、数据视图切换、图表类型切换、数据区域缩放、还原、数据框选六类按钮。
工具栏组件可通过 tool@R_841_2@ 进行配置，形如：
const options = {
tool@R_841_2@: {
show: true,
feature: {},
...
}
};
完整的配置项列表请参考 ，其中 feature 用于配置工具栏的按钮，如下子：
下面展开讨论。
工具栏组件的“导出”按钮可将图表导出为静态， jpeg、png、svg 三种格式，可通过 tool@R_841_2@.feature.saveAsImage 项进行配置，其中比较重要的配置项有：
例如对于下述配置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< 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 = {
tool@R_841_2@: {
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 时，导出可能为空。
除工具栏按钮外，开发者还可以通过 接口将图表导出为 base64 串，该接口接受如下参数：
(opts: {
// 导出的格式，可选 png, jpeg, svg
type?: string,
// 导出的分辨率比例，认为 1。
pixelRatio?: number,
// 导出的背景色，认使用 option 里的 backgroundColor
backgroundColor?: string,
// 忽略组件的列表
excludeComponents?: Array<string>,
}) => string;
结合 getDataURL 接口，下述片段同样可实现导出为本地：
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();
}
导出：
导出对 失效，无法导出地图层。
数据视图工具用于数据视图，通过 tool@R_841_2@.feature.dataView 项配置，点击后可以以表格形式展示图表中包含的数据信息；表格本身还简单编辑，编辑后会即时更新图表视图。例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< 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 = {
tool@R_841_2@: {
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>
示例：
tool@R_841_2@.feature.dataView 有两个比较重要的配置项：
通过这两个，可以做出许多复杂绚丽的，例如使用 react 渲染数据视图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< 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 = {
tool@R_841_2@: {
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：
图表类型切换工具允许在运行状态下动态变更图表类型，目前在 line、bar 两种图表间切换；以及在 stack(堆叠)、tiled(平铺) 两种状态间切换。动态类型工具可通过 tool@R_841_2@.feature.magicType 项进行配置，核心配置项有：
下面示例综合体现上述配置项的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< 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 = {
tool@R_841_2@: {
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>
示例：
Tips：
类型切换可能会带入一些副作用，例如上例中从 bar 切换到 line 时，第序列的颜色发生了变化。
缩放工具基于 组件实现，配置上有两个重点，一是通过 xAxisIndex 或 yAxisIndex 指定缩放工具作用的轴；二是通过 filterMode 设定数值的过滤逻辑。两类配置的详细介绍可参考 一节，此处不再赘述。
通过数据视图工具或数据区域缩放工具图表状态后，可使用重置按钮设置回初始状态。重置的配置比较简单，均用于图标样式，请直接查阅，此处不赘述。
Tips：
重置有很多限制：
602392714
清零编程群