效果圖

截屏2021-04-02 下午10.22.11.png

安裝組件：

npm install @ant-design/charts or 
cnpm install @ant-design/charts

使用組件

import { Column } from '@ant-design/charts';
const dataList = {
    data: [
      {
        type: '家具家電',
        sales: 38,
      },
      {
        type: '糧油副食',
        sales: 600,
      },
    ],
    data1: [
      {
        type: '家具家電',
        sales: 38,
      },
      {
        type: '糧油副食',
        sales: 52,
      },
      {
        type: '生鮮水果',
        sales: 61,
      },
      {
        type: '美容洗護(hù)',
        sales: 145,
      },
    ],
    data2: [
      {
        type: '家具家電',
        sales: 38,
      },
      {
        type: '糧油副食',
        sales: 52,
      },
      {
        type: '生鮮水果',
        sales: 61,
      },
      {
        type: '美容洗護(hù)',
        sales: 145,
      },
    ]
  }
  const charlesConfig = (data: any) => {
    var config = {
      data: data,
      xField: 'type',
      yField: 'sales',
      loading: false,
      columnWidthRatio: 0.7,
      label: {
        layout: [
          { type: 'interval-adjust-position' },// 數(shù)據(jù)標(biāo)簽自動(dòng)調(diào)整位置
          { type: 'interval-hide-overlap' }, // 數(shù)據(jù)標(biāo)簽防遮擋
          { type: 'adjust-color' }, // 數(shù)據(jù)標(biāo)簽文顏色自動(dòng)調(diào)整
        ],
      },
      meta: {
        type: { alias: '類別' },
        sales: { alias: '銷售額' },
      },
    };
    return config
  }
// 點(diǎn)擊圖表，只有點(diǎn)擊在圖表實(shí)際位置data才會(huì)有數(shù)據(jù)
const onReadyColumn = (plot: any) => {
    plot.on('plot:click', (...args: any) => {
      const data = args[0].data?.data
      console.log(data);
    });
  };

<ProCard title="流程圖表" bordered={false} size="small">
        <Row justify="space-around">
          <Col span="7">
            <Column {...charlesConfig(dataList.data)} />
          </Col>
          <Col span="7">
          <Column {...charlesConfig(dataList.data1)} />
          </Col>
          <Col span="7">
          // 在onReady 中綁定事件
          <Column {...charlesConfig(dataList.data2)} onReady={onReadyColumn}/>
          </Col>
        </Row>
</ProCard>

點(diǎn)擊位置影響是data是否有數(shù)據(jù)，柱狀圖之外的位置是拿不到data數(shù)據(jù)的

截屏2021-04-02 下午10.24.03.png

• 點(diǎn)擊藍(lán)色區(qū)域之外的位置data=null

  
  
  截屏2021-04-02 下午10.25.11.png

• 點(diǎn)擊藍(lán)色區(qū)域柱狀圖data是有數(shù)據(jù)的

  
  
  截屏2021-04-02 下午10.33.21.png

閱讀更多
Ant Design Charts文檔
antvG2 文檔!