1.解决之前效果图

2.解决之后效果图
统计图配置代码展示
myEchart() {
let httjChart = echarts.init(document.getElementById('httjchart'));
let option = {
xAxis: {
type: 'category',
data: this.xData
},
yAxis: {
type: 'value',
name: this.radio === '金额' ? '元' : '个'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
series: this.seriesData
};
httjChart.setOption(option);
window.addEventListener('resize', function () {
httjChart.resize();
});
}
未解决之前代码
mounted() {
this.myEchart();
}
解决之后代码
mounted() {
this.$nextTick(() => {
this.myEchart();
})
}
本文探讨了如何改进图表展示效果,通过前后对比解决了Vue组件中ECharts图表的初始化问题。作者分享了解决未解决前的代码和优化后的解决方案,包括使用$nextTick确保图表在DOM渲染完成后加载。
&spm=1001.2101.3001.5002&articleId=124736156&d=1&t=3&u=e96cdc5a7f6549a9b1c6917d4cbffe6e)
1566

被折叠的 条评论
为什么被折叠?



