## ColumnChartWithFilter

Demo:

```tsx
import React from 'react';
import { ColumnChartWithFilter } from 'bf-polaris-chart';

const config = {
  data: [
    {
      value: 420317,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-21',
      percent: false,
    },
    {
      value: 445488,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-22',
      percent: false,
    },
    {
      value: 397799,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-23',
      percent: false,
    },
    {
      value: 420041,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-24',
      percent: false,
    },
    {
      value: 425143,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-25',
      percent: false,
    },
    {
      value: 460046,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-26',
      percent: false,
    },
    {
      value: 421602,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-27',
      percent: false,
    },
    {
      value: 394284,
      filter: '1128-0',
      filterName: '步数',
      time: '2020-10-28',
      percent: false,
    },
    {
      value: 5160,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-21',
      percent: false,
    },
    {
      value: 5206,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-22',
      percent: false,
    },
    {
      value: 4888,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-23',
      percent: false,
    },
    {
      value: 5048,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-24',
      percent: false,
    },
    {
      value: 5261,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-25',
      percent: false,
    },
    {
      value: 5142,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-26',
      percent: false,
    },
    {
      value: 5045,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-27',
      percent: false,
    },
    {
      value: 5137,
      filter: '1132-1',
      filterName: '参与用户',
      time: '2020-10-28',
      percent: false,
    },
    {
      value: 232790,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-21',
      percent: false,
    },
    {
      value: 230387,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-22',
      percent: false,
    },
    {
      value: 230720,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-23',
      percent: false,
    },
    {
      value: 229907,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-24',
      percent: false,
    },
    {
      value: 233707,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-25',
      percent: false,
    },
    {
      value: 235966,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-26',
      percent: false,
    },
    {
      value: 239267,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-27',
      percent: false,
    },
    {
      value: 239681,
      filter: '1236-2',
      filterName: '报名用户',
      time: '2020-10-28',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-21',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-22',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-23',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-24',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-25',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-26',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-27',
      percent: false,
    },
    {
      value: 0,
      filter: '0-3',
      filterName: '计算后',
      time: '2020-10-28',
      percent: false,
    },
  ],
  xField: 'time',
  yField: 'value',
};

export default () => {
  return <ColumnChartWithFilter {...config} />;
};
```