ECharts中的工具箱（toolbox）组件包含了可视化图表中一些附加的功能，它内置了多个子工具。
ECharts中的工具箱（toolbox）组件功能非常强大，其内置有6个子工具，包括标记（mark）、数据区域缩放（dataZoom）、数据视图（dataView）、动态类型切换（magicType）、重置（restore）、导出图片（saveAsImage）。工具箱组件中最主要的属性是feature，这是工具箱组件的配置项，6个子工具的配置都需要在feature中实现。 除了各个内置的工具按钮外，开发者还可以自定义工具按钮。注意：自定义的工具名字只能以my开头，如myTool1、myTool2。
在ECharts中，工具箱（toolbox）组件的属性如表所示
利用2020年3月7日—2020年3月22日某学校作业成绩的最高分和最低分数据绘制折线图，并为图表配置工具箱组件，如图所示。 从图可以看出，图表的右上角配置了8个工具。
图例源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
x: 300, data: ['最高', '最低']
},
toolbox: { //配置工具箱组件
show: true, //设置是否显示工具箱组件
orient: 'horizontal', //设置布局方式，默认为水平布局，可选:'horizontal'¦'vertical'
//设置水平安放位置，默认为右对齐；
//可选:'center'¦'left'¦'right'¦{number}（x坐标，单位px）
x: 'right',
y: 'top',
color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', //设置工具箱背景颜色
borderColor: '#ccc', //设置工具箱边框颜色
borderWidth: 0, //设置工具箱边框线宽，单位px,默认为0（无边框）
padding: 5, //设置工具箱内边距，单位px，默认各方向内边距为5
showTitle: true,
feature: {
mark: { //设置标记
show: true,
title: {
mark: '辅助线-开关',
markUndo: '辅助线-删除',
markClear: '辅助线-清空'
},
lineStyle: { width: 1, color: '#1e90ff', type: 'dashed' }
},
dataZoom: { //设置数据区域缩放
show: true,
title: { dataZoom: '区域缩放', dataZoomReset: '区域缩放-后退' }
},
dataView: { //设置数据视图
show: true, title: '数据视图',
readOnly: false, lang: ['数据视图', '关闭', '刷新'],
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;
}
},
magicType: { //设置动态类型切换
show: true,
title: {
line: '动态类型切换-折线图',
bar: '动态类型切换-柱状图',
stack: '动态类型切换-堆积',
tiled: '动态类型切换-平铺'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: { //设置数据重置
show: true, title: '还原', color: 'black'
},
saveAsImage: { //设置导出图片
show: true, title: '保存为图片',
type: 'jpeg', lang: ['单击本地保存']
},
myTool: { //设置自定义工具按钮
show: true, title: '自定义扩展方法',
//设置改变默认的图标为一个特定的图标
icon: "image://../images/girl3.gif",
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function () { alert('广科院,大数据与人工智能学院') }
}
}
},
calculable: true,
dataZoom: { //配置数据区域缩放
show: true, realtime: true,
start: 20, end: 80
},
xAxis: [ //配置x轴坐标系
{
type: 'category', boundaryGap: false,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) { list.push('2020-03-' + i); }
return list;
}()
}
],
yAxis: [ //配置y轴坐标系
{ type: 'value' }
],
series: [ //配置数据系列
{ //设置数据系列1
name: '最高', type: 'line', smooth: true,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 30) + 10);
}
return list;
}()
},
{ //设置数据系列2
name: '最低',
type: 'line', smooth: true,
data: function () {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 10));
}
return list;
}()
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
