From 9cc5e1c2f2a2209465c1ffcc160fd8420fa9f2bc Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 06 三月 2024 16:11:01 +0800
Subject: [PATCH] fix:修复宽度变化导致echart不更新
---
src/views/home/data-chart/index.vue | 23 ++++++++++++++++-------
1 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/views/home/data-chart/index.vue b/src/views/home/data-chart/index.vue
index 8055cf9..2421e0a 100644
--- a/src/views/home/data-chart/index.vue
+++ b/src/views/home/data-chart/index.vue
@@ -27,6 +27,7 @@
<script>
import * as echarts from 'echarts';
let lineChart = null;
+let observer = null;
export default {
name: 'DataChart',
data() {
@@ -52,7 +53,7 @@
},
{
name: 'XX杩愮淮鍏徃3',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211,'6鏈�': 1321 },
+ state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211, '6鏈�': 1321 },
state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 123, '4鏈�': 23, '5鏈�': 123 }
},
{
@@ -136,14 +137,19 @@
}
},
- // 杩囨护
- filterData() {
-
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.chartContent);
},
// 绐楀彛鍙樻崲
handleResize() {
if (lineChart) {
- lineChart.resize()
+ lineChart.resize();
}
}
@@ -153,10 +159,13 @@
this.company = this.acitveData.name;
lineChart = echarts.init(this.$refs.chartContent);
this.initChart();
- window.addEventListener('resize', this.handleResize)
+ this.observe();
},
beforeDestroy() {
- window.removeEventListener('resize', this.handleResize)
+ if (lineChart) {
+ lineChart.dispose();
+ observer.unobserve(this.$refs.chartContent);
+ }
},
}
</script>
--
Gitblit v1.8.0