From 649d945605b2e5b226f59c69fa55a6dc0a6ed8e5 Mon Sep 17 00:00:00 2001
From: qixinzhi <qixinzhi@easycorp.ltd>
Date: Tue, 26 Sep 2023 05:30:24 +0000
Subject: [PATCH] * Fix echart tooltip display with too much items.

---
 module/metric/css/preview.ui.css |  2 +-
 module/metric/js/preview.ui.js   | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/module/metric/css/preview.ui.css b/module/metric/css/preview.ui.css
index 9a4daefd97..371b84a753 100644
--- a/module/metric/css/preview.ui.css
+++ b/module/metric/css/preview.ui.css
@@ -39,7 +39,7 @@
 .main .canvas {height: calc(100vh - 172px + 48px); max-height: 920px; overflow-y: hidden;}
 .main .table-and-charts {height: calc(100vh - 172px); max-height: calc(100% - 48px); overflow-y: scroll;}
 .main .metricBox {max-height: 408px;}
-.chart-single {height: 100%; width: 100%;}
+.chart-single {height: calc(100% - 32px); width: 100%;}
 .chart-multiple {height: 328px; width: 100%;}
 .chart-type {width: 30%; padding-left: 50px;}
 
diff --git a/module/metric/js/preview.ui.js b/module/metric/js/preview.ui.js
index 15362ed756..151d69a7d4 100644
--- a/module/metric/js/preview.ui.js
+++ b/module/metric/js/preview.ui.js
@@ -518,7 +518,7 @@ window.initChart = function($obj, head, data, chartType)
 
             var seriesData = [];
             xAxis.data.forEach(function(date) {
-                seriesData.push(dates.find(item => item.date === date) ? dates.find(item => item.date === date).value : null);
+                seriesData.push(dates.find(item => item.date === date) ? dates.find(item => item.date === date).value : 0);
             });
 
             series.push({data: seriesData, type: type, name: scope});
@@ -536,7 +536,16 @@ window.initChart = function($obj, head, data, chartType)
                 containLabel: true
             },
             tooltip: {
-                trigger: 'axis'
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        backgroundColor: '#6a7985'
+                    }
+                },
+                confine:true,//限制tooltip在图表范围内展示
+                extraCssText: 'max-height:60%;overflow-y:scroll',//最大高度以及超出处理
+                enterable:true//鼠标可以进入tooltip区域，使用滚动条
             },
             xAxis: chartType == 'barY' ? yAxis : xAxis,
             yAxis: chartType == 'barY' ? xAxis : yAxis,
@@ -569,7 +578,8 @@ window.initPieChart = function($obj, head, data)
             },
             legend: {
                 orient: 'vertical',
-                left: 'left'
+                left: 'left',
+                type: 'scroll'
             },
             series: [
                 {