Echarts初始化时渲染异常
问题
在一次开发过程中,需要用到Echarts图表来列举数据,即每一组数据对应生成一幅柱状图、饼图之类。将绘制不同类型的方法提取出来,然后图表样式根据数据中的type字段来判断(省略)。
大致效果如下:
所有卡片通过v-for循环实现,那么怎样让图表实现依次渲染呢?这里为放置echarts的div设置ref,例如ref = “subjectChart”,然后在请求方法中根据索引依次执行绘制图表的函数。此处的drawBar(dom,data》)函数为封装后的。
this.$nextTick(() => {
// @ts-ignore
for (const [index, ele] of this.chartDataList.entries()) {
this.saveCharts.push(
// @ts-ignore
drawBar(this.$refs.subjectChart[index], ele)
);
}
});
然而在初始化时,Echarts没有获取到容器的宽高,使得渲染畸形,只有在执行resize()才恢复正常。因此在执行绘制函数时,为dom设置一个初始值:
export function drawBar(dom: any, data: any) {
const myChart: any = dom;
myChart.style.width = '32vh';
myChart.style.height = '23.77vh';
// 初始化图表
const mainChart = echarts.init(myChart);
const option = {
...//略
};
// @ts-ignore
mainChart.setOption(option);
window.addEventListener('resize', () => {
// 屏幕大小自适应,重置容器高宽
// resizeMainContainer();
mainChart.resize();
});
return mainChart;
}