fix： 修改line-cahrt tooltip的位置

nezha-fronted/src/components/chart/chart.vue

@@ -19,6 +19,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-pie>
       <chart-bar
         :ref="'chart' + chartInfo.id"
@@ -27,6 +28,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-bar>
       <chartHexagon
         :ref="'chart'+chartInfo.id"
@@ -35,6 +37,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chartHexagon>
       <chart-url
         :ref="'chart' + chartInfo.id"
@@ -43,6 +46,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-url>
       <chart-text
         :ref="'chart' + chartInfo.id"
@@ -51,6 +55,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-text>
       <chart-treemap
         :ref="'chart' + chartInfo.id"
@@ -59,6 +64,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-treemap>
       <chart-log
         :ref="'chart' + chartInfo.id"
@@ -67,6 +73,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-log>
       <chart-stat
         :ref="'chart' + chartInfo.id"
@@ -75,6 +82,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-stat>
       <chart-gauge
         :ref="'chart' + chartInfo.id"
@@ -83,6 +91,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-gauge>
       <chart-diagram
         :ref="'chart' + chartInfo.id"
@@ -90,6 +99,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
         :chart-option="chartOption"
       ></chart-diagram>
       <chartAutotopology
@@ -99,6 +109,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chartAutotopology>
       <chartMap
         :ref="'chart' + chartInfo.id"
@@ -107,6 +118,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chartMap>
       <chart-asset-info
         :ref="'chart' + chartInfo.id"
@@ -115,6 +127,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-asset-info>
       <chart-endpoint-info
         :ref="'chart' + chartInfo.id"
@@ -123,6 +136,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-endpoint-info>
       <chart-table
         :ref="'chart' + chartInfo.id"
@@ -131,6 +145,7 @@
         :chart-info="chartInfo"
         :chart-option="chartOption"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
       ></chart-table>
       <chart-group
         :ref="'chart' + chartInfo.id"
@@ -140,6 +155,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
         :chart-option="chartOption"
       ></chart-group>
     </template>

nezha-fronted/src/components/chart/chart/chartBar.vue

@@ -113,6 +113,7 @@ export default {
       s.data = []
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
+          this.isNoData = false
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -141,6 +142,7 @@ export default {
           }
         })
       })
+      this.$emit('chartIsNoData', this.isNoData)
       return s
     },
     formatterFunc (params, ticket, callback) {

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -71,6 +71,7 @@ export default {
         let colorIndex = 0
         originalDatas.forEach((originalData, expressionIndex) => {
           originalData.forEach((data, dataIndex) => {
+            this.isNoData = false
             const gauge = {
               value: '',
               showValue: '',
@@ -96,6 +97,7 @@ export default {
             colorIndex++
           })
         })
+        this.$emit('chartIsNoData', this.isNoData)
         resolve()
       })
     },

nezha-fronted/src/components/chart/chart/chartPie.vue

@@ -96,6 +96,7 @@ export default {
       s.data = []
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
+          this.isNoData = false
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -121,6 +122,7 @@ export default {
           }
         })
       })
+      this.$emit('chartIsNoData', this.isNoData)
       return s
     },
     formatterFunc: function (params, ticket, callback) {

nezha-fronted/src/components/chart/chart/chartStat.vue

@@ -57,6 +57,7 @@ export default {
         console.log(originalDatas)
         originalDatas.forEach((originalData, expressionIndex) => {
           originalData.forEach((data, dataIndex) => {
+            this.isNoData = false
             const stat = {
               value: '',
               showValue: '',
@@ -77,6 +78,7 @@ export default {
             colorIndex++
           })
         })
+        this.$emit('chartIsNoData', this.isNoData)
         resolve()
       })
     },

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -92,6 +92,7 @@ export default {
           key = chartInfo.param.datasource[0].name
         }
         originalData.forEach((data, dataIndex) => {
+          this.isNoData = false
           data.$labels = data.metric
           const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
           const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -126,6 +127,7 @@ export default {
           colorIndex++
         })
       })
+      this.$emit('chartIsNoData', this.isNoData)
       return returnData
     },
     selectTableMapping (row, valueMapping) {

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -71,6 +71,7 @@ export default {
       const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
       chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime * 1000, maxTime * 1000) // 需转为毫秒
       chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
+      chartOption.tooltip.position = this.tooltipPosition
       chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue)
       if (chartOption.toolbox.feature) {
         chartOption.toolbox.feature.myStack.iconStyle.borderColor = this.isStack ? this.toolboxIconColor.active : this.toolboxIconColor.inactive

nezha-fronted/src/components/chart/chart/chartTreemap.vue

@@ -81,6 +81,7 @@ export default {
       this.legends = []
       chartOption.series[0] = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
       chartOption.tooltip.formatter = this.formatterFunc
+      chartOption.tooltip.position = this.tooltipPosition
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */
       setTimeout(() => {
         const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
@@ -96,6 +97,7 @@ export default {
       s.data = []
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
+          this.isNoData = false
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -126,6 +128,7 @@ export default {
           }
         })
       })
+      this.$emit('chartIsNoData', this.isNoData)
       return s
     },
     formatterFunc (params, ticket, callback) {

nezha-fronted/src/components/chart/chart/options/chartBar.js

@@ -1,6 +1,7 @@
 const chartBarOption = {
   tooltip: {
-    trigger: 'item'
+    trigger: 'item',
+    confine: false
   },
   legend: {
     show: false

nezha-fronted/src/components/chart/chart/options/chartGauge.js

@@ -8,6 +8,9 @@ const chartGaugeOption = {
         show: true,
         width: 30
       },
+      tooltip: {
+        confine: false
+      },
       pointer: {
         show: false
       },

nezha-fronted/src/components/chart/chart/options/chartPie.js

@@ -1,6 +1,7 @@
 const chartPieOption = {
   tooltip: {
-    trigger: 'item'
+    trigger: 'item',
+    confine: false
   },
   legend: {
     show: false

nezha-fronted/src/components/chart/chart/options/chartTreemap.js

@@ -2,6 +2,7 @@ import * as echarts from 'echarts'
 const formatUtil = echarts.format
 const chartTreemapOption = {
   tooltip: {
+    confine: false,
     formatter: function (info) {
       const value = info.value
       const treePathInfo = info.treePathInfo

nezha-fronted/src/components/chart/chartMixin.js

@@ -1,6 +1,6 @@
 import lodash from 'lodash'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import { getChart, setChart } from '@/components/common/js/common'
+import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
 export default {
   data () {
     return {
@@ -13,7 +13,8 @@ export default {
         inactive: '#7e7e7e'
       },
       chartId: '',
-      isNoData: true
+      isNoData: true,
+      showAllData: false
     }
   },
   props: {
@@ -40,6 +41,10 @@ export default {
       console.log(this.chartData)
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
+          if (colorIndex >= 20 && !this.showAllData) {
+            colorIndex++
+            return
+          }
           this.isNoData = false
           const s = lodash.cloneDeep(seriesTemplate)
           if (s) {
@@ -167,6 +172,53 @@ export default {
         }, 300)
       }
     },
+    tooltipPosition (point, params, dom, rect, size) {
+      dom.style.transform = 'translateZ(0)'
+      const windowWidth = window.innerWidth// 窗口宽度
+      const windowHeight = window.innerHeight// 窗口高度
+      const windowMouse = getMousePoint()
+      // 提示框位置
+      let x = 0
+      let y = 0
+      // 当前鼠标位置
+      const pointX = point[0]
+      const pointY = point[1]
+      // 外层div大小
+      const viewWidth = size.viewSize[0]
+      // const viewHeight = size.viewSize[1]
+      // 提示框大小
+      const boxWidth = size.contentSize[0]
+      const boxHeight = size.contentSize[1]
+      if (!this.isFullscreen) { // 本地显示
+        const chartDom = document.getElementById('chart-local-' + this.chartInfo.id)
+        console.log(point, params, dom, rect, size)
+        if (chartDom) {
+          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]
+      }
+    },
     mouseLeaveChart () {
       const myChart = getChart(this.chartId)
       if (myChart) {

nezha-fronted/src/components/chart/panelChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- chart外层箱子 -->
-  <div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart">
+  <div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
     <!-- title和工具栏，支持浮动 -->
     <chart-header
       v-if="!isFullscreen"

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -157,6 +157,7 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import { fromRoute } from '@/components/common/js/constants'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import { lineChartMove } from '@/components/common/js/common'
 // import chartData from './testData'
 
 export default {
@@ -800,6 +801,9 @@ export default {
     this.onScroll()
     document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
     document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+    if (!document.onmousemove) { // 添加鼠标移动事件监听
+      document.onmousemove = lineChartMove
+    }
   },
   watch: {
     'filter.searchName': function (n, o) {
@@ -860,6 +864,9 @@ export default {
       this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
     }
     localStorage.removeItem('panelTime')
+    if (!document.onmousemove) { // 添加鼠标移动事件监听
+      document.onmousemove = null
+    }
   }
 }
 </script>