---
title: 带缩略轴柱状图
order: 5
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, setData] = useState([]);

  const asyncFetch = () => {
    fetch(
      'https://gw.alipayobjects.com/os/bmw-prod/be63e0a2-d2be-4c45-97fd-c00f752a66d4.json'
    )
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

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

  const originalPropsConfig = {
    // 柱状图最小最大宽度 单位 px
    // minColumnWidth: 20,
    // maxColumnWidth: 20,
    // 柱状图宽度比例
    // columnWidthRatio: 0.2,
    // 是否显示缩略轴
    slider: {
      start: 0.1,
      end: 0.2,
    },
  };

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

  return (
    <>
      <div className="com-chartbox">
        <YwColumnChart
          className="line-chart"
          data={data}
          xField="城市"
          yField="销售额"
          meta={meta}
          originalProps={originalPropsConfig}
        />
      </div>
    </>
  );
};

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