From 75784e6ec3f6546650ee92ad69fdd270d1ebd0a7 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 26 五月 2025 13:48:59 +0800
Subject: [PATCH] 1.首页开发联调
---
src/components/Echarts/echarts.vue | 61 ++++++++++++++++--------------
1 files changed, 33 insertions(+), 28 deletions(-)
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index 15e74d8..4601e41 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -51,15 +51,15 @@
},
lineColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
barColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
pieColors: {
type: Array,
- default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ default: () => []
},
loadingOption: {
type: Object,
@@ -73,30 +73,34 @@
}
})
+import { watch } from 'vue'
+
// Refs
const chartRef = ref(null)
let chartInstance = null
// Methods
function generateChart(option) {
- if (option.series && option.series.length > 0) {
- option.series.forEach((s, index) => {
- if (s.type === 'line') {
- s.itemStyle = {
- color: props.lineColors[index] || props.lineColors[0]
- }
- s.lineStyle = {
- color: props.lineColors[index] || props.lineColors[0]
- }
- } else if (s.type === 'bar') {
- s.itemStyle = {
- color: props.barColors[index] || props.barColors[0]
- }
- }
- })
- }
+ const copiedOption = JSON.parse(JSON.stringify(option)) // 鉁� 娣辨嫹璐�
- chartInstance.setOption(option)
+ // if (copiedOption.series && copiedOption.series.length > 0) {
+ // copiedOption.series.forEach((s, index) => {
+ // if (s.type === 'line') {
+ // s.itemStyle = {
+ // color: props.lineColors[index] || props.lineColors[0]
+ // }
+ // s.lineStyle = {
+ // color: props.lineColors[index] || props.lineColors[0]
+ // }
+ // } else if (s.type === 'bar') {
+ // s.itemStyle = {
+ // color: props.barColors[index] || props.barColors[0]
+ // }
+ // }
+ // })
+ // }
+
+ chartInstance.setOption(copiedOption)
}
function renderChart() {
@@ -136,12 +140,13 @@
})
// Watch all reactive props that affect the chart
-watchEffect(() => {
- // 閬垮厤鍦� mounted 鍓嶈Е鍙�
- if (chartInstance) {
- renderChart()
- }
-}, {
- flush: 'post'
-})
+watch(
+ () => [props.xAxis, props.series],
+ () => {
+ if (chartInstance) {
+ renderChart()
+ }
+ },
+ { deep: true, immediate: true }
+)
</script>
\ No newline at end of file
--
Gitblit v1.9.3