
Vue ECharts 二次渲染/重新渲染宽高为0,图表不显示,改变浏览器窗口大小即可显示图表的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
ECharts:一个基于 JavaScript 的开源可视化图表库。
前言:这篇博客是基于父组件传值(option)给子组件即echart页面为基础的渲染图标的。话不多说,直接看代码
目录
一、介绍
1、官方文档:Apache ECharts
二、解决办法
data() {
return {
chart: null,
drawTiming: null
};
},
watch: {
options: {
handler(options) {
this.$nextTick(() => {
this.initChart();
});
},
deep: true,
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
window.addEventListener('resize', this.resize);
},
beforeUnmount() {
window.removeEventListener('resize', this.resize);
this.chart.dispose();
this.chart = null;
clearTimeout(this.drawTiming);
this.drawTiming = null;
},
methods: {
resize() {
clearTimeout(this.drawTiming);
this.drawTiming = setTimeout(() => {
console.log('setTimeout');
let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
this.chart.resize({ width, height });
}, 200);
},
initChart() {
// 初始化echart
let { clientWidth: width, clientHeight: height } = this.$el.parentElement;
this.chart.resize({ width, height });
this.chart.setOption(this.options, true); // 设置true清空echart缓存
},
},
tips
无论是在mouted还是watch初始echarts,一定要加上nextTick,否则很有可能找不到DOM节点,导致图表不能正常显示。
欢迎扫描下方二维码关注VX公众号




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)