From 16e22cfa6144d883ffcac0daf844322df179ea8b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 19 五月 2025 13:07:10 +0800
Subject: [PATCH] 首页开发
---
src/components/Echarts/echarts.vue | 147 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 147 insertions(+), 0 deletions(-)
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
new file mode 100644
index 0000000..15e74d8
--- /dev/null
+++ b/src/components/Echarts/echarts.vue
@@ -0,0 +1,147 @@
+<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: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ },
+ barColors: {
+ type: Array,
+ default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ },
+ pieColors: {
+ type: Array,
+ default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
+ },
+ loadingOption: {
+ type: Object,
+ default: () => ({
+ text: '鏁版嵁鍔犺浇涓�...',
+ color: '#00BAFF',
+ textColor: '#000',
+ maskColor: 'rgba(255, 255, 255, 0.8)',
+ zlevel: 0
+ })
+ }
+})
+
+// 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]
+ }
+ }
+ })
+ }
+
+ chartInstance.setOption(option)
+}
+
+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
+watchEffect(() => {
+ // 閬垮厤鍦� mounted 鍓嶈Е鍙�
+ if (chartInstance) {
+ renderChart()
+ }
+}, {
+ flush: 'post'
+})
+</script>
\ No newline at end of file
--
Gitblit v1.9.3