使用g2堆叠柱形图点击柱状图展示对应月份的数据

import { Chart, registerTheme } from '@antv/g2';
import moment from 'moment';
import store from '@/_store';
import { getTabletData } from '@/api';

export default (id: string, data: any, key?: string) => {
  const chart = new Chart({
    container: id,
    autoFit: true,
    height: 700,
  });
  chart.data(data);

  chart.axis('dateTime', {
    tickLine: null,
    label: {
      formatter: (val) => {
        return `${val.split('-')[1]}月`;
      },
    },
  });

  chart.axis('value', {});
  chart.legend({
    position: 'top-right',
    marker: {
      symbol: 'circle',
    },
  });

  chart.tooltip(false);
  let color = ['#B3B6BE', '#3E7EFF'];
  if (key === 'feeding') color = ['#3E7EFF'];
  chart
    .interval()
    .adjust('stack')
    .position('dateTime*value')
    .color('name', color)
    .state({
      selected: {
        style: {
          stroke: '#000',
        },
      },
    });

  chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
  chart.on('interval:click', async (ev: any) => {
    const a = chart.getGeometries()[0].getElements().reverse();
    // chart.getElements().forEach((item) => {
    //   item.setState('selected', false);
    // });

    const data = ev.data;
    if (data) {
      const tim = data.mappingData._origin.dateTime;
      const startTime = moment(tim).startOf('month').valueOf();
      const endTime = moment(tim).endOf('month').valueOf();
      chart.getElements().forEach((item) => {
        if (item.getData().dateTime !== tim) {
          item.setState('selected', false);
        }
        if (item.getData().dateTime === tim) item.setState('selected', true);
      });
      const resDay = await getTabletData({
        statisticsType: 'day', //day天 ，month月
        sort: 'desc',
        startTime,
        endTime,
        pageNum: '1',
        pageSize: '1000',
      });
      store.commit('setDetailTable', resDay.data.list);
      const resMonth = await getTabletData({
        statisticsType: 'month', //day天 ，month月
        sort: 'desc',
        startTime,
        endTime,
        pageNum: '1',
        pageSize: '1000',
      });
      store.commit('setDetailList', resMonth.data.list);
    }
  });

  registerTheme('newTheme', { minColumnWidth: 10, maxColumnWidth: 15 });
  chart.theme('newTheme');
  chart.interaction('active-region');
  // chart.interaction('element-highlight-by-x');
  chart.interaction('element-selected');
  chart.render();
  const a = chart.getGeometries()[0].getElements().reverse();
  a[0].setState('selected', true);// 默认选中最后一项
  const b = chart.getElements().find((item) => {
    return (
      item.getData().value !== a[0].getData().value &&
      item.getData().dateTime === a[0].getData().dateTime
    );
  });
  b?.setState('selected', true);// 点击时堆叠图一整条都黑色
};