echart的brush，设置柱状图工具栏brush和区域选择触发事件brushSelected，数据变化选区域自动触发更新

let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i  ) {
  xAxisData.push('Class'   i);
  data1.push( (Math.random() * 2).toFixed(2));
  data2.push( (Math.random() * 5).toFixed(2));
  data3.push( (Math.random()   0.3).toFixed(2));
  data4.push( Math.random().toFixed(2));
}
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
option = {
  legend: {
    data: ['bar', 'bar2', 'bar3', 'bar4'],
    left: '10%'
  },
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    xAxisIndex: 0
  },
  toolbox: {
    feature: {
      magicType: {
        type: ['stack']
      },
      dataView: {}
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    name: 'X Axis',
    axisLine: { onZero: true },
    splitLine: { show: false },
    splitArea: { show: false }
  },
  yAxis: {},
  grid: {
    bottom: 100
  },
  series: [
    {
      name: 'bar',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data1
    },
    {
      name: 'bar2',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data2
    },
    {
      name: 'bar3',
      type: 'bar',
      stack: 'two',
      emphasis: emphasisStyle,
      data: data3
    },
    {
      name: 'bar4',
      type: 'bar',
      stack: 'two',
      emphasis: emphasisStyle,
      data: data4
    }
  ]
};
myChart.on('brushSelected', function (params) {
  var brushed = [];
  var brushComponent = params.batch[0];
  for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx  ) {
    var rawIndices = brushComponent.selected[sIdx].dataIndex;
    brushed.push('[Series '   sIdx   '] '   rawIndices.join(', '));
  }
  myChart.setOption({
    title: {
      backgroundColor: 'red',
      text: 'SELECTED DATA INDICES: \n'   brushed.join('\n'),
      bottom: 0,
      right: '10%',
      width: 100,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    }
  });
});

设置柱状图工具栏配置

brush: {
toolbox: [‘rect’, ‘polygon’, ‘lineX’, ‘lineY’, ‘keep’, ‘clear’],
xAxisIndex: 0
}

区域选择触发事件brushSelected

数据变化选中区域自动触发更新

可解决数据动态刷新，展示数据同步更新，滚轮缩放，滑块拖动展示等问题

这篇好文章是转载于：学新通技术网