LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Echarts警告--There Is a Chart Instance Already Initialized on the Dom.

2022/5/20 echarts

突然发现一个echarts警告:

There is a chart instance already initialized on the dom.

这个问题的出现在于,在一张表上渲染不同数据,其实dom已经存在了,但是我们在每次数据发生改变的时间都重新进行了一次渲染,导致出现警告

解决方法:初始化时判断echarts是否存在,如果存在将其销毁,然后重新渲染

vue中:

  data() {
      return {
        myChart: null,
      }
    },
     drawChart() {
        //判断是否存在 != 是不等于
        if (
          this.myChart != null &&
          this.myChart != '' &&
          this.myChart != undefined
        ) {
          this.myChart.dispose()
        }
        var chartDom = document.getElementById('main')
        this.myChart = echarts.init(chartDom)

        var option
        option = {
        }
        option && this.myChart.setOption(option)
        //echarts自适应屏幕大小
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      },

react中:

import * as echarts from 'echarts/lib/echarts.js'
import china from '../../utils/china.json'
function Home(props) {
    //在方法最外层定义全局变量
    var myChart; 

    const mapOption = (mapName, data, mapdata) => {
     //判断是否存在 !== 是不等于
        if (myChart !== null && myChart !== "" && myChart !== undefined) {
            myChart.dispose();
        }
        myChart = echarts.init(document.querySelector('.map'));
        echarts.registerMap('china', { geoJSON: china })
        var option = {}        
        myChart.setOption(option);
    }
    return (
        <div div className='page-home' >
            <div className='map'></div>          
        </div >
    )
}
img_show