G2--3 柱状图、x轴折行显示、框选过滤数据

可以直接在官网里运行代码：

import { Chart } from '@antv/g2';

    // 会自动过滤掉重复日期的值
    const data = [
      {
        Data: '2021-07-24 8:00',
        sales: 57
      },
      {
        Data: '2021-07-24 12:00',
        sales: 55
      },
      {
        Data: '2021-07-24 16:00',
        sales: 60
      },
      {
        Data: '2021-07-24 20:00',
        sales: 54
      },
      {
        Data: '2021-07-24 24:00',
        sales: 57
      },
      {
        Data: '2021-07-25 4:00',
        sales: 56
      },
      {
        Data: '2021-07-25 8:00',
        sales: 62
      },
      {
        Data: '2021-07-25 12:00',
        sales: 60
      },
      {
        Data: '2021-07-25 16:00',
        sales: 55
      },
      {
        Data: '2021-07-25 20:00',
        sales: 58
      },
      {
        Data: '2021-07-25 24:00',
        sales: 60
      },
      {
        Data: '2021-07-26 4:00',
        sales: 57
      },
      {
        Data: '2021-07-26 8:00',
        sales: 55
      },
      {
        Data: '2021-07-26 12:00',
        sales: 57
      },
      {
        Data: '2021-07-26 16:00',
        sales: 58
      },
      {
        Data: '2021-07-26 20:00',
        sales: 60
      },
      {
        Data: '2021-07-26 24:00',
        sales: 57
      }
    ];
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
    });
    // 显示刻度
    chart.axis('type', {
      tickLine: {
        alignTick: false,
      },
    });
    chart.data(data);
    chart.scale('sales', {
      nice: true,
      min: 40,
      alias: '当前水位',
    });

    chart.axis('sales', {
      label: {
        formatter: text => {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + ' m';
        }
      }
    });
    chart.tooltip({
      showMarkers: false,
    });
    // 框选
    chart.interaction('brush');

    // x轴折线显示数据
    chart.axis('Data', {
      label: {
        autoRotate: true,
        formatter: (params) => {
                let newParamsName = '';
                const paramsNameNumber = params.length;
                const provideNumber = 10; // 一行显示几个字符
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = '';
                    const start = p * provideNumber;
                    const end = start + provideNumber;
                    if (p === rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + '\n';
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
      }
    });
    chart
      .interval() // 设置柱状图
      .position('Data*sales') // 指定展示的数据
      .tooltip('Data*sales', (Data: any, sales: any) => { // 设置tooltip
        return {
          name: Data,
          value: sales + 'm',
        };
      })
      .color('sales', '#6395F9'); // 指定柱子颜色
      // .size('20'); // 设置柱子宽度

    // chart.interaction('element-active');//在鼠标hover时出发交互
    // chart.interaction('active-region');  //鼠标交互方式，在柱子上方时触发交互
    chart.interaction('active-region');
    chart.render();