feat:Optimize legend and tooltip of slicing monitor page

Change-Id: I1747cac83a5d60d50c230dcafdb25c6f8828a2fe
Issue-ID: USECASEUI-370
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 17 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index bfee94f4..82166691 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -109,6 +109,7 @@ export class Monitor5gComponent implements OnInit {
                 this.trafficChartData = {
                     legend: {
                         orient: 'vertical',
+                        type: 'scroll',
                         left: '0px',
                         bottom: '0px',
                         itemWidth: 10,
@@ -148,6 +149,7 @@ export class Monitor5gComponent implements OnInit {
                 this.onlineuserChartData = {
                     legend: {
                         bottom: '0px',
+                        type: 'scroll',
                         data: this.onlineuserLegend
                     },
                     xAxis: {
@@ -181,6 +183,7 @@ export class Monitor5gComponent implements OnInit {
                 this.bandwidthChartData = {
                     legend: {
                         bottom: '0px',
+                        type: 'scroll',
                         data: this.bandwidthLegend
                     },
                     xAxis: {
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts
index e2bde449..34f3b59f 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitorEchartsConfig.ts
@@ -7,6 +7,7 @@ export const pieChartconfig = {
         },
         legend: {
             orient: 'vertical',
+            type: 'scroll',
             left: '0px',
             bottom: '0px',
             itemWidth: 10,
@@ -37,8 +38,21 @@ export const pieChartconfig = {
 export const lineChartconfig = {
     height: 320,
     option: {
+        "tooltip": {
+            "trigger": "axis",
+            "axisPointer": {
+                "type": "line",
+                textStyle: {
+                    color: "#fff"
+                },
+                lineStyle: {
+                    color: '#ccc'
+                }
+            },
+        },
         legend: {
             bottom: '0px',
+            type: 'scroll',
             data: []
         },
         xAxis: {