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 +boxHeight0){ 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;