From 2d445a7f255343099b4647ea5ce51d2980768003 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 28 Sep 2023 16:45:41 +0800
Subject: [PATCH] fix:立行立改

---
 src/components/Echarts/LineChart2.vue |  134 +++++++++++++++++++++++++++++++++++++-------
 1 files changed, 111 insertions(+), 23 deletions(-)

diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue
index a74acd0..d32faf0 100644
--- a/src/components/Echarts/LineChart2.vue
+++ b/src/components/Echarts/LineChart2.vue
@@ -27,6 +27,10 @@
       type: Boolean,
       default: true,
     },
+    isMouse: {
+      type: Boolean,
+      default: false,
+    },
     chartData: {
       type: Object,
       required: true,
@@ -88,10 +92,43 @@
         let fontSize = 100 * (clientWidth / 1920)
         return res * fontSize
       }
-
-      // console.log('���������������������')
-
-      console.log(val, 'eee')
+      let that = this
+      if (this.isMouse) {
+        this.chart.on('mouseover', function (params) {
+          that.chart.setOption({
+            series: [
+              {
+                name: params.seriesName,
+                label: {
+                  show: true,
+                  fontSize: 16,
+                  position: [10, -15],
+                  formatter: '{c}'
+                }
+              }
+            ]
+          })
+        })
+        // ���������������mouseout������������������������
+        this.chart.on('mouseout', function (params) {
+          that.chart.setOption({
+            series: [
+              {
+                name: params.seriesName,
+                lineStyle: {
+                  width: 2
+                },
+                label: {
+                  show: false
+                },
+                endLabel: {
+                  show: false
+                }
+              }
+            ]
+          })
+        })
+      }
       this.chart.setOption(
         {
           title: {
@@ -104,20 +141,8 @@
             data: val.xAxis,
             boundaryGap: false,
             axisTick: {
-              show: false,
+              show: true,
             },
-            // axisTick: { // ������������������������������
-            //   alignWithLabel: true,
-            //   show: true
-            // },
-            // axisLine: {
-            //   lineStyle: {
-            //     color: '#000000'
-            //   }
-            // },
-            // axisLabel: {
-            //   interval: this.interval
-            // }
           },
           grid: {
             left: '5%',
@@ -136,19 +161,81 @@
             },
           },
           tooltip: {
+            backgroundColor: 'rgba(50,50,50,0.5)',
+            borderWidth: '0',
             trigger: 'axis',
-            position: function (pt) {
-              return [pt[1], '-14%']
+            formatter: function (a) {
+              let list = []
+              let listItem = ''
+              for (var i = 0; i < a.length; i++) {
+                list.push(
+                  '<span style="display: inline-block;padding: 0px 0;" >' +
+                  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
+                  a[i].color +
+                  ';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
+                  '</span>' +
+                  a[i].seriesName +
+                  '&nbsp&nbsp&nbsp&nbsp' +
+                  a[i].value +
+                  '</span>'
+                )
+              }
+              listItem = list.join('<br/>')
+              return ' <div div style = "width:15px; display:inline-block;" > ' + a[0].name +
+                '</div>' + '<div style="padding:0px;">' + listItem + '</div>'
+            },
+            position: function (point, params, dom, rect, size) {
+              //������point���������������������������size���������������������viewSize���contentSize������������������div���tooltip������������������
+              let x = point[0];//
+              let y = point[1];
+              let viewWidth = size.viewSize[0];
+              let viewHeight = size.viewSize[1];
+              let boxWidth = size.contentSize[0];
+              let boxHeight = size.contentSize[1];
+              let posX = 0;//x������������
+              let posY = 0;//y������������
+
+              if (x < boxWidth) {//���������������
+                posX = 5;
+              } else {//���������������
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) {//���������������
+                posY = 5;
+              } else {//���������������
+                posY = y - boxHeight;
+              }
+              if (params && params.length > 20) {
+                posX = point[1],
+                  posY = '-10%';
+              }
+              return [posX, posY];
+
+            },
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
             },
             textStyle: {
+              color: 'rgb(255, 255, 255);',
               fontSize: fontSize(0.117), // ������������
-            },
+              lineHeight: 0
+            }
           },
-         
+
           yAxis: {
             axisTick: {
-              show: false, // ������������
+              show: true, // ������������
             },
+            axisLine: {
+              show: true, //���������������������
+            },
+            axisLabel: {
+              show: true, //������������������������������
+            }
             // axisLine: {
             //   lineStyle: {
             //     color: '#000000'
@@ -176,7 +263,7 @@
             {
               start: 0,
               end: 20,
-              bottom: fontSize(3.3),
+              top: fontSize(4.8),
               height: fontSize(0.5),
             },
           ],
@@ -189,3 +276,4 @@
   },
 }
 </script>
+

--
Gitblit v1.8.0