突然发现一个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 >
)
}
