React配合AntV建立图表

import React, { Component } from 'react';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import { getRegionPathName } from '../../../lib/region_utils';

class Advolume extends Component {
  constructor(props) {
    super(props);
    const data = props.data || [];
    this.state = {
      data,
      chart: null,
    };
  }

  static getDerivedStateFromProps (props, state) {
    const data = props.data || state.data;
    if (data !== state.data) {
      return {
        data,
      };
    }
    return null;
  }


  componentDidMount() {
    const { data } = this.state;

    const dv = this.transformData(data);
    const chart = new Chart({
      container: 'adContainer',
      forceFit: true,
      height: 500,
    });
    chart.changeData(dv);
    chart
      .intervalStack()
      .position('媒体类型*广告量')
      .color('name');
    chart.render();
    this.setState({ chart });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.data !== this.state.data;
  }

  componentDidUpdate() {
    const { data, chart } = this.state;
    const dv = this.transformData(data);
    chart && chart.changeData(dv);
  }

  transformData(data) {
    data.map(item => {
      item.name = getRegionPathName(item.name);
      return item;
    });
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      fields: [
        '三面翻',
        '公交站牌',
        '包柱广告',
        '单立柱',
        '围挡',
        '地铁梯顶',
        '地铁灯箱',
        '墙体大牌',
        '外墙广告',
        '多面翻',
        '封堵墙贴',
        '梯旁看板',
        '楼顶字牌',
        '灯箱广告',
        '立柱广告',
        '落地灯箱',
        '高炮',
      ], // 展开字段集
      key: '媒体类型', // key字段
      value: '广告量', // value字段
    });
    return dv;
  }

  render() {
    return (
      <React.Fragment>
        <div id="adContainer" />
      </React.Fragment>
    );
  }
}

export default Advolume;