From 607469ef64d8787b16ac9516d7ddc74d12f9676d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 22 Feb 2021 11:52:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dpie=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8tooltip=E8=A2=AB=E9=81=AE=E6=8C=A1=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-pie.vue       | 71 +++++++++++++++++--
 .../src/components/charts/chart.scss          |  4 +-
 2 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 944bc0bd8..54b21f10d 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -81,7 +81,7 @@ import chartDataFormat from './chartDataFormat'
 import loading from "../common/loading";
 import timePicker from '../common/timePicker'
 import * as echarts from 'echarts'
-import {getChart, setChart} from "../common/js/common";
+import {getChart, setChart, lineChartMove,getMousePoint} from "../common/js/common";
 import chart from '../page/dashboard/overview/chart'
 import chartConfig from "../page/dashboard/overview/chartConfig";
 import {randomcolor} from "../common/js/radomcolor/randomcolor";
@@ -171,9 +171,6 @@ export default {
           textStyle:{
             color:'#000'
           },
-          textStyle:{
-            color:'#000'
-          },
           axisPointer:{
             snap:false,
             animation:false,
@@ -410,6 +407,72 @@ export default {
               getChart(self.chartIndex).resize({height:(self.chartData.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
             }
             self.$set(self.option.tooltip,'formatter',self.formatterFunc)
+            self.$set(self.option.tooltip,'position', function(point,params,dom,rect,size){
+              dom.style.transform = "translateZ(0)";
+              var windowWidth=window.innerWidth;//窗口宽度
+              var windowHeight=window.innerHeight;//窗口高度
+              var windowMouse=getMousePoint();
+              //提示框位置
+              var x=0;
+              var y=0;
+              //当前鼠标位置
+              var pointX = point[0];
+              var pointY = point[1];
+              //外层div大小
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              //提示框大小
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              if (!self.screenModal) { // 本地显示
+                let chartDom = document.getElementById(self.chartData.title+"_"+self.chartData.id);
+                if(chartDom){
+                  let parTop = document.getElementById(self.chartData.title+"_"+self.chartData.id).offsetTop;
+                  let parleft = document.getElementById(self.chartData.title+"_"+self.chartData.id).offsetLeft;
+
+                  let parent = document.getElementById('tableList');
+                  let parClientHeight = parent.clientHeight;//可视高度
+                  let parClientWidth = parent.clientWidth;//可视宽度
+                  let parScrollTop = parent.scrollTop;
+                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+                    x=pointX+10;
+                  }else{
+                    x = pointX - boxWidth;
+                  }
+                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
+                    y = pointY + 15;
+                  }else {
+                    y = pointY - boxHeight - 10;
+                  }
+                  return [x,y];
+                }else {//preview page
+
+                  if(windowMouse.x<(windowWidth/2)){//说明鼠标在左边放不下提示框
+                    x=pointX + 15;
+                  }else{
+                    x = pointX - boxWidth - 15;
+                  }
+                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
+                    y = pointY + 15;
+                  }else {
+                    y = pointY - boxHeight - 10;
+                  }
+                  return [x,y];
+                }
+              }else {
+                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
+                  x=pointX+10;
+                }else{
+                  x = pointX - boxWidth;
+                }
+                if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
+                  y = pointY + 15;
+                }else {
+                  y = pointY - boxHeight - 10;
+                }
+                return [x,y];
+              }
+            },)
             if(self.pieData[0].data.length>0){
               getChart(self.chartIndex).clear();
               getChart(self.chartIndex).setOption(self.option);//创建图表
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 6f845de0a..f6766067f 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -24,14 +24,14 @@
   color:lightgray;
 }
 .legend-container{
-  width: calc(100% - 30px);
+  width: calc(100% - 15px);
   overflow: auto;
   max-height:80px;
   min-height:25px;
   font-size:12px;
   text-align:left;
   left: 10px;
-  bottom: 0px;
+  bottom: 0;
   line-height: 18px;
   position: absolute;
   padding-bottom:3px;