From df1406d0f571972d033dffd6a93fb4b94febeb56 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 24 六月 2025 16:46:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/components/Echarts/echarts.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 152 insertions(+), 0 deletions(-)
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
new file mode 100644
index 0000000..4601e41
--- /dev/null
+++ b/src/components/Echarts/echarts.vue
@@ -0,0 +1,152 @@
+<template>
+ <div>
+ <div ref="chartRef" :style="chartStyle"></div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'
+import * as echarts from 'echarts'
+
+// Props
+const props = defineProps({
+ options: {
+ type: Object,
+ default: () => ({})
+ },
+ chartStyle: {
+ type: Object,
+ default: () => ({
+ height: '80%',
+ width: '100%'
+ })
+ },
+ dataset: {
+ type: Object,
+ default: () => {}
+ },
+ xAxis: {
+ type: Array,
+ default: () => []
+ },
+ yAxis: {
+ type: Array,
+ default: () => []
+ },
+ series: {
+ type: Array,
+ default: () => []
+ },
+ grid: {
+ type: Object,
+ default: () => ({})
+ },
+ legend: {
+ type: Object,
+ default: () => ({})
+ },
+ tooltip: {
+ type: Object,
+ default: () => ({})
+ },
+ lineColors: {
+ type: Array,
+ default: () => []
+ },
+ barColors: {
+ type: Array,
+ default: () => []
+ },
+ pieColors: {
+ type: Array,
+ default: () => []
+ },
+ loadingOption: {
+ type: Object,
+ default: () => ({
+ text: '鏁版嵁鍔犺浇涓�...',
+ color: '#00BAFF',
+ textColor: '#000',
+ maskColor: 'rgba(255, 255, 255, 0.8)',
+ zlevel: 0
+ })
+ }
+})
+
+import { watch } from 'vue'
+
+// Refs
+const chartRef = ref(null)
+let chartInstance = null
+
+// Methods
+function generateChart(option) {
+ const copiedOption = JSON.parse(JSON.stringify(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() {
+ const option = {
+ backgroundColor: props.options.backgroundColor || '#fff',
+ xAxis: props.xAxis,
+ yAxis: props.yAxis,
+ dataset: props.dataset,
+ series: props.series,
+ grid: props.grid,
+ legend: props.legend,
+ tooltip: props.tooltip
+ }
+
+ chartInstance.clear()
+ generateChart(option)
+}
+
+function windowResizeListener() {
+ if (!chartInstance) return
+ chartInstance.resize()
+}
+
+// Lifecycle hooks
+onMounted(() => {
+ chartInstance = echarts.init(chartRef.value)
+ renderChart()
+ window.addEventListener('resize', windowResizeListener)
+})
+
+onBeforeUnmount(() => {
+ if (chartInstance) {
+ window.removeEventListener('resize', windowResizeListener)
+ chartInstance.dispose()
+ chartInstance = null
+ }
+})
+
+// Watch all reactive props that affect the chart
+watch(
+ () => [props.xAxis, props.series],
+ () => {
+ if (chartInstance) {
+ renderChart()
+ }
+ },
+ { deep: true, immediate: true }
+)
+</script>
\ No newline at end of file
--
Gitblit v1.9.3