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/echart14.vue |   65 +++++++++++++++++---------------
 1 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/echart14.vue b/src/components/echart14.vue
index 864ee4d..b1a8334 100644
--- a/src/components/echart14.vue
+++ b/src/components/echart14.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: ["澧為噺", "鎬婚噺", "Video Ads", "Direct", "Search Engine"],
+          data: ['澧為噺', '鎬婚噺', 'Video Ads', 'Direct', 'Search Engine'],
         },
         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: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
           },
@@ -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: "#8F595A",
+              color: '#8F595A',
               opacity: 0.5,
             },
             emphasis: {
-              focus: "series",
+              focus: 'series',
             },
             data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300],
           },
 
           {
-            name: "鎬婚噺",
-            type: "line",
-            stack: "Total",
+            name: '鎬婚噺',
+            type: 'line',
+            stack: 'Total',
             label: {
               show: true,
-              position: "top",
+              position: 'top',
             },
             areaStyle: {
-              color: "#02929E",
+              color: '#02929E',
               opacity: 0.5,
             },
             emphasis: {
-              focus: "series",
+              focus: 'series',
             },
             data: [
               2048, 2051, 2052, 2057, 2077, 2082, 2084, 2088, 2089, 2090, 2090,
@@ -120,10 +123,10 @@
           },
         ],
       };
-      let myChart = this.$echarts.init(document.getElementById("echart1"));
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
+      this.myChart = this.$echarts.init(document.getElementById('echart1'));
+      this.myChart.setOption(option);
+      window.addEventListener('resize', function () {
+        this.myChart.resize();
       });
     },
   },

--
Gitblit v1.9.3