echarts-for-react图表组件实现百分比自适应宽度

2023-03-31

echarts-for-react新版本中已经有属性autoResize，默认值为true，用于自动计算尺寸。

然而实际使用时，初始化过程中好像还是不能用百分比宽度，设置100%时依旧会被转为100px。

猜测原因在初始化DOM时，提前渲染canvas，以致无法获取容器宽度。

笔者推荐一种解决方法，用API方式手动调整尺寸。

echartRef.current.getEchartsInstance().resize();

完整组件示例：

import React, { useRef, useEffect } from 'react';
import ReactECharts from 'echarts-for-react';
import styles from './styles.less';

export default function BarBaseData(props) {
  const echartRef = useRef();
  
  useEffect(() => {
      echartRef.current.getEchartsInstance().resize();
  }, []);

  const option = {
    title: {
      text: '关系链'
    },
    tooltip: {},
    legend: {
      data: ['数量']
    },
    xAxis: {
      data: ['1', '2', '3', '4', '5', '6', '7+']
    },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'bar',
      data: [1, 2, 4, 5, 6, 7, 8]
    }]
  };

    return (
    	<>
    		<div className={styles.wrap}>
    		<ReactECharts
            ref={echartRef}
			    option={option}
			    style={{ height: 400 }}
			    opts={{ locale: 'FR' }}
			  />
		    </div>
		</>
    )
}

其中父容器样式最好也设置宽度100%，组件本身只设置高度就行。

（版权归cpury.com所有，转载请注明出处。）

WEB开发