echarts brush的用法及框选的数据根据选框移动

ECharts 的 brush 组件可以实现图表的框选功能，以下是一个简单的例子，展示了如何使用 brush 组件以及如何根据选框的移动来获取数据。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入 brush 组件
require('echarts/lib/component/brush');
 
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [10, 22, 28, 43, 49, 60, 80],
        type: 'bar'
    }],
    brush: {
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0
    }
};
 
// 使用指定的配置项和数据显示图表
myChart.setOption(option);
 
// 监听 brush 事件来获取框选的数据
myChart.on('brush', function (params) {
    var brushComponents = params.brushComponents;
    for (var i = 0; i < brushComponents.length; i++) {
        var brushComponent = brushComponents[i];
        var areas = brushComponent.areas;
        for (var j = 0; j < areas.length; j++) {
            var area = areas[j];
            var data = area.data;
            // 这里的 data 就是根据选框移动而变化的数据
            console.log(data);
        }
    }
});

在这个例子中，我们首先引入了 ECharts 的必要模块，并初始化了一个图表。然后，我们配置了图表的基本选项，包括 xAxis, yAxis, series 和 brush 组件。brush 组件中的 toolbox 定义了可以绘制的图形类型，xAxisIndex 指定了绘制区域作用于 x 轴。

最后，我们监听了 brush 事件，当用户进行框选操作时，可以通过事件参数 params 获取当前选中的数据。这些数据可以用于进一步的操作，比如数据筛选、数据展示等。