1. 配置工具栏：
var option = {
toolbox: {
show: true, // 是否显示工具栏
feature: {
saveAsImage: {}, // 保存为图片
dataView: {}, // 数据视图
dataZoom: { // 数据区域缩放
yAxisIndex: 'none' // 'none' 表示只在 x 轴上进行缩放
},
restore: {}, // 恢复原始视图
magicType: { // 图表类型切换
type: ['line', 'bar'] // 允许切换的图表类型
}
}
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
};
在上面的例子中，通过 toolbox 属性配置了工具栏的基本信息，包括是否显示、保存为图片、数据视图、数据区域缩放、恢复原始视图、图表类型切换等功能。
2. 监听工具栏事件：
myChart.on('dataviewchanged', function (params) {
// 数据视图切换时的回调函数
console.log('当前数据视图：', params);
});
通过监听工具栏的相关事件，可以在用户使用工具栏时执行相应的操作。例如，上述代码监听了数据视图切换时的事件。
3. 手动触发工具栏操作：
myChart.dispatchAction({
type: 'dataZoom',
start: 30, // 数据缩放的起始百分比
end: 70 // 数据缩放的结束百分比
});
通过 dispatchAction 方法可以手动触发工具栏的操作，上述代码手动触发了数据区域缩放的操作。
这只是工具栏的一些基本配置和操作示例，具体的使用方式可能会根据你的需求和图表类型而有所不同。你可以根据官方文档和示例进一步了解工具栏的配置和使用：[ECharts 工具栏](https://echarts.apache.org/zh/option.html#toolbox)。
转载请注明出处：http://www.zyzy.cn/article/detail/5083/ECharts