---
title: 柱状图
order: 1
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 = [
    {
      type: '家具家电',
      sales: 38,
    },
    {
      type: '粮油副食',
      sales: 52,
    },
    {
      type: '生鲜水果',
      sales: 61,
    },
    {
      type: '美容洗护',
      sales: 145,
    },
    {
      type: '母婴用品',
      sales: 48,
    },
    {
      type: '进口食品',
      sales: 38,
    },
    {
      type: '食品饮料',
      sales: 38,
    },
    {
      type: '家庭清洁',
      sales: 38,
    },
  ];

  /** 定义每个字段的别名 和 展示格式 */
  const meta = {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  };

  const originalPropsConfig = {
    // 柱状图最小最大宽度 单位 px
    // minColumnWidth: 20,
    // maxColumnWidth: 20,
    // 柱状图宽度比例
    columnWidthRatio: 0.2,
    // 增加左向右转化率
    // conversionTag: {},
  };

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

  return (
    <>
      <div className="com-chartbox">
        <YwColumnChart
          className="line-chart"
          data={data}
          xField="type"
          yField="sales"
          meta={meta}
          originalProps={originalPropsConfig}
        />
      </div>
    </>
  );
};

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