echarts画饼图中options有数据，但是却没有绘制画布，为什么显示一片空白？

Question

export default class PoolPie extends Component<any> {
  constructor(props: any) {
    super(props);
    this.resize = this.resize.bind(this);
  }
  async componentDidMount() {

    this.renderCharts();
    window.addEventListener('resize', this.resize);
  }
  resize() {
    setTimeout(() => {
      this.renderCharts();
    }, 0);
  }
  getOption = async () => {
    const {
      app: { getPoolInfo, coin },
    } = this.props;
    const res = await getPoolInfo(coin);
    var data: PIe[] = [];
    for (var i: any = 0; i < res.length; i++) {
      data.push({
        value: Number(res[i].poolRatio),
        name: res[i].poolName,
        capacity: Number(res[i].poolCapacity),
        icon: 'circle',
      });
    }
    console.log(data);
    const option = {
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: [40, 60],
          center: ['30%', '50%'],
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          data: getPoolInfo/data,  //getPoolInfo是mobx存的，data是过滤后的。两者都试了
        },
      ],
      legend: {
        x: 'right',
        y: 'top',
        orient: 'vertical',
        itemGap: 15,
        itemWidth: 8,
        align: 'left',
        data: data,
        formatter: function(name: any) {
          var total = 0;
          var target = 0;
          var ratio = 0;
          for (let i = 0, l = data.length; i < l; i++) {
            total += Number(data[i].value);
            if (data[i].name == name) {
              // target = Number(data[i].value);
              ratio = Number(data[i].value);
            }
          }
          var arr = [
            '{d|}' +
              '{b|' +
              name +
              '}' +
              '{c|' +
              target +
              '}' +
              '{a|' +
              ratio.toFixed(2) +
              '%}',
          ];
          return arr.join('\n');
        },
        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              verticalAlign: 'middle',
              align: 'right',
              width: 50,
              color: '#31D6A2',
              padding: [0, 0, 0, 4],
            },
            b: {
              fontSize: 14,
              align: 'left',
              width: 100,
              color: '#818A99',
              padding: [0, 0, 0, 4],
            },
            c: {
              fontSize: 14,
              align: 'left',
              width: 50,
              color: '#818A99',
              padding: [0, 20, 0, 10],
            },
            d: {
              width: 16,
              height: 16,
              backgroundColor: '#C4C7CC',
            },
            e: {
              padding: [0, 5],
              verticalAlign: 'bottom',
              fontSize: 14,
            },
          },
        },
      },
      backgroundColor: '#fff',
    };
    return option;
  };
  renderCharts() {
    let chart_id: any = document.getElementById('pool_chart');
    let chart = echarts.init(chart_id);
    let option: any = this.getOption();
    console.log(chart, option);
    // chart_id.remove('_echarts_instance_');
    chart.clear()

    chart.setOption(option);
    chart.resize();
  }
  render() {
    return (
      <div className="pool_pie">
        <div id="pool_chart" />
      </div>
    );
  }
}

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

可能是你没有给包裹echarts的dom添加高和宽