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/echart13.vue |   71 ++++++++++++++++++-----------------
 1 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/components/echart13.vue b/src/components/echart13.vue
index a220d6e..07b7d59 100644
--- a/src/components/echart13.vue
+++ b/src/components/echart13.vue
@@ -10,20 +10,23 @@
   components: {},
   data() {
     //杩欓噷瀛樻斁鏁版嵁
-    return {};
+    return { myChart };
   },
   mounted() {
     this.lineChart();
+    this.$bus.$on('resizeEchart', (res) => {
+      this.myChart.resize();
+    });
   },
   //鏂规硶闆嗗悎
   methods: {
     lineChart() {
       let dataAxis = [
-        "鍕樺療鏁版嵁",
-        "宀╁湡鏁版嵁",
-        "娴嬮噺鏁版嵁",
-        "鍚堣鏁版嵁",
-        "绠＄悊鏁版嵁",
+        '鍕樺療鏁版嵁',
+        '宀╁湡鏁版嵁',
+        '娴嬮噺鏁版嵁',
+        '鍚堣鏁版嵁',
+        '绠＄悊鏁版嵁',
       ];
       // prettier-ignore
       let data =  [122880,
@@ -39,34 +42,34 @@
       }
       let option = {
         title: {
-          text: "鍚勭被鏁版嵁瀛樺偍鍒嗗竷",
+          text: '鍚勭被鏁版嵁瀛樺偍鍒嗗竷',
           textStyle: {
-            color: "#fff",
+            color: '#fff',
           },
         },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow",
+            type: 'shadow',
           },
         },
         grid: {
-          left: "0%",
-          right: "0%",
-          bottom: "0%",
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
           containLabel: true,
         },
         xAxis: {
-          type: "category",
+          type: 'category',
           data: dataAxis,
           axisLabel: {
             show: true,
 
             textStyle: {
-              color: "#fff",
+              color: '#fff',
             },
             formatter: function (params) {
-              var newParamsName = ""; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+              var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
               var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
               var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
               var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
@@ -77,7 +80,7 @@
               if (paramsNameNumber > provideNumber) {
                 /** 寰幆姣忎竴琛�,p琛ㄧず琛� */
                 for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ""; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+                  var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
                   var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
                   var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
                   // 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
@@ -86,7 +89,7 @@
                     tempStr = params.substring(start, paramsNameNumber);
                   } else {
                     // 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
-                    tempStr = params.substring(start, end) + "\n";
+                    tempStr = params.substring(start, end) + '\n';
                   }
                   newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
                 }
@@ -110,33 +113,33 @@
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff",
+              color: '#fff',
             },
           },
         },
         dataZoom: [
           {
-            type: "inside",
+            type: 'inside',
           },
         ],
         series: [
           {
-            type: "bar",
+            type: 'bar',
             showBackground: true,
             itemStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#45CF98" },
-                { offset: 0.5, color: "#0CC2C7" },
-                { offset: 1, color: "#0EBFC1" },
+                { offset: 0, color: '#45CF98' },
+                { offset: 0.5, color: '#0CC2C7' },
+                { offset: 1, color: '#0EBFC1' },
               ]),
               barBorderRadius: [95, 95, 95, 95],
             },
             emphasis: {
               itemStyle: {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#45CF98" },
-                  { offset: 0.7, color: "#0CC2C7" },
-                  { offset: 1, color: "#0EBFC1" },
+                  { offset: 0, color: '#45CF98' },
+                  { offset: 0.7, color: '#0CC2C7' },
+                  { offset: 1, color: '#0EBFC1' },
                 ]),
               },
             },
@@ -145,11 +148,11 @@
         ],
       };
       const zoomSize = 6;
-      let myChart = this.$echarts.init(document.getElementById("echart2"));
-      myChart.on("click", function (params) {
+      this.myChart = this.$echarts.init(document.getElementById('echart2'));
+      this.myChart.on('click', function (params) {
         console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
-        myChart.dispatchAction({
-          type: "dataZoom",
+        this.myChart.dispatchAction({
+          type: 'dataZoom',
           startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
           endValue:
             dataAxis[
@@ -158,9 +161,9 @@
         });
       });
 
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
+      this.myChart.setOption(option);
+      window.addEventListener('resize', function () {
+        this.myChart.resize();
       });
     },
   },

--
Gitblit v1.9.3