1、报错原因
引入echarts图像时,dom部分还没加载完成,echarts.init(document.queryselect(’#dom’))
就开始检测dom,并尝试去获取它,但是在vue中引用echarts的中,发现在模板dom还没加载的时候echarts.init() 就已经开始执行,所以会报错 Initialize failed: invalid dom
2、解决方式(借鉴他人)
使用es6中的Promise
let newPromise = new Promise((resolve)=>{
resolve()
})
newPromise.then(()=>{
let myChart = this.$echarts.init(document.getElementById('main'));
/*
window.addEventListener('resize', function() {
myChart.resize();
});
*/
// 指定图表的配置项和数据
let option = {
title: {
text: "项目供水量",
},
tooltip: {},
legend: {},
xAxis: {
data: xData
},
yAxis: {
type: "value",
name: "单位(m³)",
},
series: [
{
data: yData,
type: 'bar',
stack: 'x'
}
]
};
myChart.setOption(option);
方法为异步操作