echarts二级页面展示响应式和 resize事件报错

最新推荐文章于 2025-02-20 14:30:00 发布

原创最新推荐文章于 2025-02-20 14:30:00 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

如果是vue2中这样写

// 基于准备好的dom，初始化echarts实例
const myCharts = echarts.init(document.getElementById('echart1))
myCharts.clear() // 看情况 不加好像也没事
window.addEventListener('resize', function (){
  //自适应屏幕
  myCharts.resize() 
});
window.dispatchEvent(new Event('resize')); 
// 这样就实现了二级页面图表的自适应 图表样式宽度为百分百

我目前用的react 图表用的echarts-for-react组件

import ReactEcharts from 'echarts-for-react';
   componentDidMount() {
        const { series } = this.props;
        const option = {
            title: {
                // text: '项目收支时间曲线',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    // saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                /*  boundaryGap: false, */
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            },
            yAxis: {
                type: 'value'
            },
            series
        };
        this.setState({ option });
        window.addEventListener('resize', this.suit);
        window.dispatchEvent(new Event('resize'));
    }
    suit = () => {
        const myCharts = this.echartRef;
        myCharts && myCharts.resize(); 
        // myCharts.resize() 直接这样写 二次进入该页面会报错
 // Cannot read properties of null (reading 'getAttribute') 
    };

    componentWillUnmount() {
        this.echartRef = null;
        window.removeEventListener('resize', this.suit, 20);
    }

我是这样解决的！直接myCharts.resize() ; 第一次进页面的时候不会错误但是再次点击就会报错

Cannot read properties of null (reading 'getAttribute') 所以我是进行了逻辑中断

myCharts && myCharts.resize();