From 6660790baa07aad61d552e6af63a898af06afc62 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 02 十二月 2024 17:02:57 +0800
Subject: [PATCH] 地图样式
---
src/views/home/data-view/components/data-hola.vue | 34 +++++++++++++++++++++++++++++-----
1 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/src/views/home/data-view/components/data-hola.vue b/src/views/home/data-view/components/data-hola.vue
index f2addca..57afcc4 100644
--- a/src/views/home/data-view/components/data-hola.vue
+++ b/src/views/home/data-view/components/data-hola.vue
@@ -7,7 +7,7 @@
<script>
import * as echarts from 'echarts';
let holaChart = null;
-
+let observer = null;
const config = {
tooltip: {
trigger: 'item'
@@ -16,6 +16,7 @@
top: '5%',
left: 'center'
},
+ color: ['#7868d9','#3eba45','#3da7f8','#ffbe40','#fe640d'],
series: [
{
type: 'pie',
@@ -49,8 +50,8 @@
data1: '宸ュ崟鏁�',
data2: '鎭㈠鏁�',
data3: '寰呮仮澶嶆暟',
- data4: '浜х敓杩濈害浜嬮」鏁�',
- data5: '浜х敓杩濈害璐ｄ换鏁�',
+ data4: '瓒呮湡寰呭鐞嗘暟',
+ data5: '瓒呮湡璐ｄ换鏁�',
}
export default {
props: {
@@ -78,6 +79,21 @@
holaChart.setOption(config, true);
}
+ },
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.hola);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (holaChart) {
+ holaChart.resize();
+ }
}
},
watch: {
@@ -93,7 +109,15 @@
mounted() {
holaChart = echarts.init(this.$refs.hola);
holaChart.setOption(config, true);
- }
+ this.observe();
+
+ },
+ beforeDestroy() {
+ if (holaChart) {
+ holaChart.dispose();
+ observer.unobserve(this.$refs.hola);
+ }
+ },
}
</script>
@@ -107,4 +131,4 @@
height: 100%;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0