refactor:升级eChats,封装eChats组件

package.json

@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
-    "echarts": "4.9.0",
+    "echarts": "^5.6.0",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/components/eCharts/eCharts.vue

@@ -0,0 +1,55 @@
+<template>
+    <div ref="chartDom" class="echarts-container"></div>
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts';
+  
+  export default {
+    props: {
+      options: {  // 接收父组件传入的配置
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        chartInstance: null  // 存储图表实例
+      };
+    },
+    mounted() {
+      this.initChart();
+      window.addEventListener('resize', this.handleResize);  // 响应式处理
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);  // 清理事件监听
+      if (this.chartInstance) {
+        this.chartInstance.dispose();  // 销毁实例
+      }
+    },
+    methods: {
+      initChart() {
+        this.chartInstance = echarts.init(this.$refs.chartDom);
+        this.chartInstance.setOption(this.options);
+      },
+      handleResize() {
+        this.chartInstance?.resize();  // ES2020可选链操作符
+      }
+    },
+    watch: {  // 监听options变化
+      options: {
+        deep: true,
+        handler(newVal) {
+          this.chartInstance?.setOption(newVal);
+        }
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .echarts-container {
+    width: 100%;
+    height: 400px;  /* 默认高度 */
+  }
+  </style>

src/views/statistic/index.vue

@@ -211,6 +211,7 @@
         </el-row>
       </div>
     </div>
+    <ECharts :options="chartOptions" />
     <!-- <div class="overview">
       <div class="title">{{ $t('operational.dataRanking') }}</div>
       <div class="content">
@@ -268,13 +269,140 @@ import { getNumDayTime } from '@/utils/fuint'
 import { getStatisticData } from '@/api/home'
 import { getMainData, getTopData } from '@/api/statistic'
 import commonChart from '../components/charts/index'
+import ECharts  from '@/components/eCharts/eCharts'
+
 export default {
   name: 'Statistic',
   components: {
-    commonChart
+    commonChart,
+    ECharts 
   },
   data() {
     return {
+      // ECharts 配置示例
+      chartOptions:{
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
+    },
+    toolbox: {
+        show: true,
+        orient: 'vertical',
+        left: 'right',
+        top: 'center',
+        feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar', 'stack'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+        }
+    },
+    xAxis: [
+        {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['2012', '2013', '2014', '2015', '2016']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: 'Forest',
+            type: 'bar',
+            barGap: 0,
+            label: {
+                show: true,
+                position: 'insideBottom',
+                distance: 15,
+                align: 'left',
+                verticalAlign: 'middle',
+                rotate: 90,
+                formatter: '{c}  {name|{a}}',
+                fontSize: 16,
+                rich: {
+                    name: {}
+                }
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390]
+        },
+        {
+            name: 'Steppe',
+            type: 'bar',
+            label: {
+                show: true,
+                position: 'insideBottom',
+                distance: 15,
+                align: 'left',
+                verticalAlign: 'middle',
+                rotate: 90,
+                formatter: '{c}  {name|{a}}',
+                fontSize: 16,
+                rich: {
+                    name: {}
+                }
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290]
+        },
+        {
+            name: 'Desert',
+            type: 'bar',
+            label: {
+                show: true,
+                position: 'insideBottom',
+                distance: 15,
+                align: 'left',
+                verticalAlign: 'middle',
+                rotate: 90,
+                formatter: '{c}  {name|{a}}',
+                fontSize: 16,
+                rich: {
+                    name: {}
+                }
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [150, 232, 201, 154, 190]
+        },
+        {
+            name: 'Wetland',
+            type: 'bar',
+            label: {
+                show: true,
+                position: 'insideBottom',
+                distance: 15,
+                align: 'left',
+                verticalAlign: 'middle',
+                rotate: 90,
+                formatter: '{c}  {name|{a}}',
+                fontSize: 16,
+                rich: {
+                    name: {}
+                }
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [98, 77, 101, 99, 40]
+        }
+    ]
+},
         // 配置日期选择器的选项
       pickerOptions: {
         disabledDate(time) {