option = {
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0 // 在哪个 x 轴上进行 brush
},
toolbox: {
feature: {
brush: {
type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
title: {
rect: '矩形选择',
polygon: '任意形状选择',
lineX: '横向选择',
lineY: '纵向选择',
keep: '保持选择',
clear: '清除选择'
}
},
// 其他工具按钮配置...
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
},
yAxis: {
type: 'value',
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70],
}]
};
// 初始化图表
var myChart = echarts.init(document.getElementById('yourChartId'));
myChart.setOption(option);
在上述代码中,我们配置了 brush 对象,定义了 xAxisIndex 表示在哪个 x 轴上进行 brush。同时,在 toolbox 中,我们为 brush 工具配置了不同的类型,如矩形选择、任意形状选择、横向选择、纵向选择、保持选择和清除选择等。
用户可以通过点击 Toolbox 中的 brush 图标来启用 brush 功能,然后在图表上进行相应的选择操作。选中的数据区域将会被高亮显示,你可以通过这个区域进行进一步的操作,比如数据缩放等。
请根据实际需求调整配置参数,以满足你的交互需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5331/ECharts