在做管理系统的后台时,有个可视化大屏需要用到图表,选择了echarts,但是却发现控制台报错了,好像不影响使用,归根到底还是在渲染图表时,根据id获取到的dom还没有渲染出来,就会出现这个错误。
解决办法:直接在mounted生命周期上把init图表放到定时器里面去,就成了一个宏任务,这样会在渲染dom之后执行。这样就解决了!(vue的mounted生命周期,dom元素还没有渲染出来)
setTimeout(() => {
this.init();
this.timer = setInterval(this.init, 60 * 1000)
}, 200)
init(){
let chartDom = document.getElementById('lineQty');
var myChart = echarts.init(chartDom, '#101638');
var option = {
grid: {
left: 76,
top: 6,
width: 280,
height: 220
},
yAxis: {
type: 'category',
data: xData,
axisTick: {
show: false
},
axisLine: {
show: false
}
},
xAxis: {
type: 'value',
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
textStyle: {
color: '#fff'
},
tooltip: {
show: true
},
series: [
{
name: '生产线',
data: yData,
type: 'bar',
lineHeight: 100,
legendHoverLink: true,
itemStyle: {
color: 'rgba(0, 160, 234, 1)',
borderRadius: [6, 6, 6, 6],
},
label: {
show: true,
align: 'center',
verticalAlign: 'middle'
}
}
]
};
option && myChart.setOption(option);
}