---
title: 分组柱状图
order: 2
docGenIncludes:
  - src/components/YwColumnChart/index.tsx
---

```jsx
import React, { Component, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { YwColumnChart } from '@ywfe/yw-charts';

const App = () => {
  const data = [
    {
      city: '重庆',
      month: '1',
      value: 18.9,
    },
    {
      city: '重庆',
      month: '2',
      value: 28.8,
    },
    {
      city: '重庆',
      month: '3',
      value: 39.3,
    },
    {
      city: '重庆',
      month: '4',
      value: 81.4,
    },
    {
      city: '重庆',
      month: '5',
      value: 47,
    },
    {
      city: '重庆',
      month: '6',
      value: 20.3,
    },
    {
      city: '重庆',
      month: '7',
      value: 24,
    },
    {
      city: '重庆',
      month: '8',
      value: 35.6,
    },
    {
      city: '杭州',
      month: '1',
      value: 12.4,
    },
    {
      city: '杭州',
      month: '2',
      value: 23.2,
    },
    {
      city: '杭州',
      month: '3',
      value: 34.5,
    },
    {
      city: '杭州',
      month: '4',
      value: 99.7,
    },
    {
      city: '杭州',
      month: '5',
      value: 52.6,
    },
    {
      city: '杭州',
      month: '6',
      value: 35.5,
    },
    {
      city: '杭州',
      month: '7',
      value: 37.4,
    },
    {
      city: '杭州',
      month: '8',
      value: 42.4,
    },
    {
      city: '北京',
      month: '1',
      value: 22.9,
    },
    {
      city: '北京',
      month: '2',
      value: 25.2,
    },
    {
      city: '北京',
      month: '2',
      value: 25.2,
    },
    {
      city: '北京',
      month: '3',
      value: 29.5,
    },
    {
      city: '北京',
      month: '4',
      value: 36.2,
    },
    {
      city: '北京',
      month: '5',
      value: 35.2,
    },
    {
      city: '北京',
      month: '6',
      value: 45.2,
    },
    {
      city: '北京',
      month: '7',
      value: 32.2,
    },
    {
      city: '北京',
      month: '8',
      value: 39.6,
    },
  ];

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    month: {
      alias: '月份',
      formatter: (v) => `${v}月`,
    },
    value: {
      alias: '占比',
      formatter: (v) => `${v}mm`,
    },
  };

  const originalPropsConfig = {
    // 柱状图宽度比例
    columnWidthRatio: 0.3,
    // 是否分组
    isGroup: true,
  };

  useEffect(() => {}, []);

  return (
    <>
      <div classcity="com-chartbox">
        <YwColumnChart
          classcity="line-chart"
          data={data}
          xField="month"
          yField="value"
          seriesField="city"
          meta={meta}
          originalProps={originalPropsConfig}
        />
      </div>
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```