SupaFan edited a comment on issue #14342:
URL: https://github.com/apache/echarts/issues/14342#issuecomment-800732369
我用vite vue3也遇到这个问题了 保存实例的变量不要放到data里面就解决了 这具体原因是什么呢？
===================割===================
后续 封装了组件 单单定义一个变量多图表会出现问题
```
<template>
<div class="echarts" ref="chart" />
</template>
<script >
import * as echarts from "echarts";
let chart = {};
export default {
name: "chart",
data() {
return {
resizeTimer: null,
version: "1.0",
chartTemp: null,
};
},
props: {
// 图表参数
options: Object,
initOptions: Object,
},
options: {
deep: true,
handler(options) {
if (Object.prototype.toString.call(options) === "[object Object]") {
this.setOption(options);
}
},
},
methods: {
// 初始化
init() {
const { options, initOptions } = this.$props;
if (chart[this.chartTemp]) {
chart[this.chartTemp].dispose();
chart[this.chartTemp] = null;
}
chart[this.chartTemp] = echarts.init(
this.$refs.chart,
{},
initOptions
);
if (options) {
chart[this.chartTemp].setOption(options);
}
},
// 调整尺寸
resize(options = {}) {
this.resizeTimer = clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.init()
}, 300);
},
},
mounted() {
this.chartTemp = Math.random();
this.$nextTick(() => {
this.init();
});
window.addEventListener("resize", this.resize);
},
beforeUnmount() {
if (chart[this.chartTemp]) {
window.removeEventListener("resize", this.resize);
this.resizeTimer = clearTimeout(this.resizeTimer);
chart[this.chartTemp].dispose();
chart[this.chartTemp] = null;
}
},
};
</script>
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
