From 9c803f20cc05395bac2d3386accfe230210c07dc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 19 十二月 2022 20:58:31 +0800
Subject: [PATCH] 1

---
 src/components/echart16.vue |   65 +++++++++++++++++---------------
 1 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/echart16.vue b/src/components/echart16.vue
index 1a5ca12..f9838f9 100644
--- a/src/components/echart16.vue
+++ b/src/components/echart16.vue
@@ -10,32 +10,35 @@
   components: {},
   data() {
     //杩欓噷瀛樻斁鏁版嵁
-    return {};
+    return { myChart };
   },
   mounted() {
     this.lineChart();
+    this.$bus.$on('resizeEchart', (res) => {
+      this.myChart.resize();
+    });
   },
   //鏂规硶闆嗗悎
   methods: {
     lineChart() {
       let option = {
         title: {
-          text: "鏁版嵁鎬婚噺瓒嬪娍",
+          text: '鏁版嵁鎬婚噺瓒嬪娍',
           textStyle: {
-            color: "#fff",
+            color: '#fff',
           },
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "cross",
+            type: 'cross',
             label: {
-              backgroundColor: "#FFFFFF",
+              backgroundColor: '#FFFFFF',
             },
           },
         },
         legend: {
-          data: ["澧為噺", "鎬婚噺"],
+          data: ['澧為噺', '鎬婚噺'],
         },
         toolbox: {
           feature: {
@@ -43,25 +46,25 @@
           },
         },
         grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
           containLabel: true,
         },
         xAxis: [
           {
             axisLine: {
               lineStyle: {
-                color: "#ccc",
+                color: '#ccc',
               },
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff",
+                color: '#fff',
               },
             },
-            type: "category",
+            type: 'category',
             boundaryGap: false,
             data: [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
           },
@@ -70,48 +73,48 @@
           {
             axisLine: {
               lineStyle: {
-                color: "#ccc",
+                color: '#ccc',
               },
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: "#fff",
+                color: '#fff',
               },
             },
-            type: "value",
+            type: 'value',
             boundaryGap: false,
           },
         ],
         series: [
           {
-            name: "澧為噺",
-            type: "line",
-            stack: "Total",
+            name: '澧為噺',
+            type: 'line',
+            stack: 'Total',
             areaStyle: {
-              color: "#83bff6",
+              color: '#83bff6',
               opacity: 0.5,
             },
             emphasis: {
-              focus: "series",
+              focus: 'series',
             },
             data: [5120, 3072, 2048, 7168, 3072, 4096, 2048, 3072, 500],
           },
 
           {
-            name: "鎬婚噺",
-            type: "line",
-            stack: "Total",
+            name: '鎬婚噺',
+            type: 'line',
+            stack: 'Total',
             label: {
               show: true,
-              position: "top",
+              position: 'top',
             },
             areaStyle: {
-              color: "#188df0",
+              color: '#188df0',
               opacity: 0.5,
             },
             emphasis: {
-              focus: "series",
+              focus: 'series',
             },
             data: [
               27750, 28262, 28569, 28774, 29491, 29798, 30208, 30412, 30720,
@@ -119,10 +122,10 @@
           },
         ],
       };
-      let myChart = this.$echarts.init(document.getElementById("echart4"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
+      this.myChart = this.$echarts.init(document.getElementById('echart4'));
+      this.myChart.setOption(option);
+      window.addEventListener('resize', function () {
+        this.myChart.resize();
       });
     },
   },

--
Gitblit v1.9.3