From eb935ac81cfa4992629efb8494acbe02701e616a Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 13 十二月 2023 18:17:09 +0800
Subject: [PATCH] 堆叠折线图 主数据导出加入Loading

---
 Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue |   73 +++++++++++++++++-------------------
 1 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
index 600df00..222f97a 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
@@ -5,16 +5,14 @@
 </template>
 
 <script>
-import 'echarts'
+import echarts from'echarts'
 import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/pie'
-import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/title'
 import 'echarts/lib/component/legend'
 
 export default {
-  name: "mixCart",
+  name: "stackedAreaChart",
   props: {
     mixData: {
       type: Array,
@@ -28,8 +26,9 @@
   data() {
     return {
       chartOptions: {
+        color: ['#84C9E5', '#F68686'],
         title: {
-          text: "",
+          text: '',
         },
         grid: {
           left: "3%",
@@ -40,18 +39,15 @@
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "shadow",
-          },
+            type: "cross"
+          }
         },
         legend: {
-          data: ["鎬婚噺", "鏂板"],
-          left: "center",
-          textStyle: {
-            fontSize: 14 // 璋冩暣瀛椾綋澶у皬
-          }
+          data: ['鎬婚噺', '鏂板']
         },
         xAxis: {
           type: "category",
+          boundaryGap: false,
           data: [
             "涓�鏈�",
             "浜屾湀",
@@ -70,8 +66,10 @@
         yAxis: {
           type: "value",
         },
-        series: [],
-      },
+        series: [
+
+        ]
+      }
     };
   },
   watch: {
@@ -79,40 +77,39 @@
       immediate: true,
       handler(newval, oldval) {
         if (newval) {
-          const colors = ["#2eadd6", "#db3c3c"];
-
-          const seriesData = newval.map((data, index) => ({
-            name: index === 0 ? "鎬婚噺" : "鏂板",
-            type: index === 0 ? "bar" : "line",
-            stack: index === 0 ? "鎬婚噺" : null,
-            data: data.map(value => ({value})),
-            barWidth: 68,
-            label: {
-              show: true,
-              position: "top"
-            },
-            itemStyle: {
-              color: colors[index]
+          const series = newval.map((data, index) => ({
+            name: index === 0 ? '鎬婚噺' : '鏂板',
+            type: 'line',
+            showSymbol: false,//鏄惁鏄剧ず鎶樼嚎涓婄殑鏍囪鐐�
+            smooth: true,//骞虫粦搴�
+            areaStyle: {
+              opacity: 1, //閫忔槑搴�
             },
             emphasis: {
-              focus: "series"
-            }
+              focus: 'series'
+            },
+            stack: index === 0 ? '鎬婚噺' : '鏂板', // 鏍规嵁 index 鍖哄垎鎬婚噺鍜屾柊澧炵殑鍫嗗彔鎯呭喌
+            data: data.map(value => ({value})),
+            label: {
+              show: true,
+              position: 'top'
+            },
           }));
 
-          this.chartOptions.series = seriesData;
+          this.chartOptions.series = series;
         }
-      },
+      }
     },
-    chartName:{
-      handler(newval,oldval){
-        if(newval){
+    chartName: {
+      handler(newval, oldval) {
+        if (newval) {
           this.chartOptions.title.text = newval + "鏁版嵁缁熻"
         }
       },
-      immediate:true,
-      deep:true
+      immediate: true,
+      deep: true
     }
-  },
+  }
 };
 </script>
 

--
Gitblit v1.9.3