diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 7bff4d5d3..cfc24adfd 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -1,4 +1,4 @@
-.temp-dropdown{
+.temp-dropdown {
   display: none;
   border: none;
 }
@@ -7,7 +7,7 @@
   height: 100%;
   width: auto;
 }
-.pdfDom{
+.pdfDom {
   padding-bottom: 20px;
 }
 .panel-chart {
@@ -16,7 +16,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  &:hover > .chart-header.chart-header--float{
+  &:hover > .chart-header.chart-header--float {
     height: 39px;
     opacity: 1;
   }
@@ -38,7 +38,7 @@
       }
     }
     display: flex;
-    align-items:center;
+    align-items: center;
     padding: 0 10px;
     height: 39px;
     font-size: 14px;
@@ -58,7 +58,7 @@
       overflow: hidden;
       white-space: nowrap;
     }
-    .chart-header__title.groupTitle{
+    .chart-header__title.groupTitle {
       position: relative;
       left: 5px;
       z-index: 10;
@@ -106,19 +106,19 @@
         }
       }
     }
-    .chart-header-error{
+    .chart-header-error {
       position: absolute;
       left: 0;
       top: -1px;
     }
   }
-  .chart-screen-header.list-page{
+  .chart-screen-header.list-page {
     background: $--background-color-empty;
   }
   .chart-screen-header {
     display: flex;
-    justify-content:space-between;
-    align-items:center;
+    justify-content: space-between;
+    align-items: center;
     padding: 0 20px 0 20px;
     height: 39px;
     font-size: 14px;
@@ -188,7 +188,7 @@
         }
       }
     }
-    .chart-header-error{
+    .chart-header-error {
       position: absolute;
       left: 0;
       top: -1px;
@@ -208,17 +208,18 @@
       font-size: 12px;
     }
   }
-  .el-table{
+  .el-table {
     background: $--background-color-empty;
     border: 1px solid $--border-color-light;
-    .el-table--border::after{
+    .el-table--border::after {
       background: $--border-color-light;
     }
-    tr{
+    tr {
       background: $--background-color-empty;
       //border-bottom: 1px solid $--border-color-light !important;
-      th,td {
-        border-bottom: 1px solid $--border-color-light
+      th,
+      td {
+        border-bottom: 1px solid $--border-color-light;
       }
     }
   }
@@ -230,22 +231,23 @@
   }
 }
 .chart__canvas {
-  > div:nth-of-type(1){
+  > div:nth-of-type(1) {
     width: 100%;
     height: 100%;
   }
   .nz-chart__tooltip {
-    .row__label,.row__value {
+    .row__label,
+    .row__value {
       color: $--color-text-regular;
     }
   }
 }
-.no-header.nz-chart{
+.no-header.nz-chart {
   height: 100%;
-  &>.overview{
+  & > .overview {
     padding: 10px;
   }
-  &>.nz-table-list{
+  & > .nz-table-list {
     padding-top: 10px !important;
   }
 }
@@ -271,18 +273,18 @@
     &.nz-chart__component--left {
       flex-direction: row-reverse;
     }
-    .legend-box{
+    .legend-box {
       width: 100%;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
     }
-    .rightYAxis-legend{
+    .rightYAxis-legend {
       display: flex;
       justify-content: flex-end;
       flex-grow: 1;
     }
-    .rightYAxis-name{
+    .rightYAxis-name {
       position: absolute;
       top: 0;
       width: 100%;
@@ -295,9 +297,9 @@
       margin-left: calc(50% - 10px);
       transform-origin: center center;
       font-size: 12px;
-      color:#6E7079;
-      pointer-events:none;
-      span{
+      color: #6e7079;
+      pointer-events: none;
+      span {
         transform: rotate(90deg);
         font-family: sans-serif;
       }
@@ -331,7 +333,8 @@
         margin-left: 3px;
         .basic-info-table-list {
           display: flex;
-          .basic-info-table-title,.basic-info-table-value {
+          .basic-info-table-title,
+          .basic-info-table-value {
             display: inline-flex;
             flex-wrap: wrap;
             width: 50%;
@@ -340,7 +343,7 @@
             border-bottom: 1px solid $--border-color-light;
             border-right: 1px solid $--border-color-light;
             align-items: center;
-            .alert-days-info{
+            .alert-days-info {
               div {
                 vertical-align: middle;
               }
@@ -374,6 +377,7 @@
   }
 }
 .legend-container {
+  overflow-x: hidden;
   overflow-y: auto;
   flex: 1;
   display: flex;
@@ -383,7 +387,7 @@
   line-height: 18px;
   box-sizing: border-box;
 
-  .legend-list{
+  .legend-list {
     display: flex;
     overflow-y: auto;
   }
@@ -398,31 +402,35 @@
     max-width: 100%;
     display: flex;
     align-items: center;
-    .legend-name{
+    .legend-name {
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
-  .legend--table-cell,.legend-item {
+  .legend--table-cell,
+  .legend-item {
     color: $--color-text-primary;
   }
-  .legend-item, .legend--table-row {
-    &.legend-item--inactive, &.row--inactive {
-      .legend--table-cell,.legend-item {
+  .legend-item,
+  .legend--table-row {
+    &.legend-item--inactive,
+    &.row--inactive {
+      .legend--table-cell,
+      .legend-item {
         color: $--color-text-secondary !important;
       }
       .legend-shape {
         background-color: $--background-color-1 !important;
       }
-      .nz-icon{
+      .nz-icon {
         color: $--background-color-1 !important;
       }
-      .nz-icon-override{
+      .nz-icon-override {
         color: $--color-text-regular !important;
       }
     }
   }
-  .nz-icon-override{
+  .nz-icon-override {
     visibility: hidden;
     font-size: 15px;
     margin-left: 5px;
@@ -432,17 +440,17 @@
   .legend-item:not(.legendSelect):hover {
     background-color: $--background-color-1;
     cursor: pointer;
-    .nz-icon-override{
+    .nz-icon-override {
       visibility: visible;
     }
   }
 
-  .legendSelect{
+  .legendSelect {
     padding-left: 0 !important;
     width: 100%;
     cursor: unset;
     overflow: unset;
-    span{
+    span {
       visibility: hidden;
       padding: 0px 6px;
       height: 16px;
@@ -451,16 +459,16 @@
       border: 1px solid $--border-color-base;
       font-size: 12px;
       cursor: pointer;
-      &:first-of-type{
+      &:first-of-type {
         margin-right: 6px;
       }
-      &.legendSelect-disabled{
-        opacity: .6;
+      &.legendSelect-disabled {
+        opacity: 0.6;
         cursor: default;
         color: $--color-text-secondary !important;
       }
     }
-    &.legend-item{
+    &.legend-item {
       flex-shrink: 0;
       height: 20px;
       display: flex;
@@ -472,23 +480,23 @@
   .legend--table {
     width: 100%;
     display: table;
-    table-layout: fixed;
+    // table-layout: fixed;
 
-    .legend--table-body{
+    .legend--table-body {
       display: table-row-group;
     }
 
     .legend--table-row {
       display: table-row;
       width: 100%;
-      .legend--table-cell:not(:first-of-type){
-        width: 48px;
-      }
+      // .legend--table-cell:not(:first-of-type){
+      //   width: 48px;
+      // }
     }
     .legend--table-row:not(:first-of-type):hover {
       background-color: $--background-color-1;
       cursor: pointer;
-      .nz-icon-override{
+      .nz-icon-override {
         visibility: visible;
       }
     }
@@ -498,11 +506,11 @@
       background-color: $--chart-background-color-base;
       .legend--table-cell:not(:first-of-type) {
         cursor: pointer;
-        color:#33a2e5;
+        color: #33a2e5;
         font-size: 12px;
         font-weight: bold;
       }
-      .legend--table-cell{
+      .legend--table-cell {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -514,11 +522,12 @@
       box-sizing: border-box;
       line-height: 20px;
       vertical-align: middle;
-      .legend--table-box{
+      .legend--table-box {
         display: flex;
         align-items: center;
       }
-      .legend-name{
+      .legend-name {
+        max-width: 600px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -556,19 +565,20 @@
       padding-left: 5px;
     }
   }
-  .tooltip__row.highlight{
+  .tooltip__row.highlight {
     color: $--color-text-primary;
     font-weight: bold;
   }
 }
 
-.endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog {
+.endpoint-query-metrics.chart-fullscreen.nz-dialog,
+.recordRules-query-metrics.chart-fullscreen.nz-dialog {
   .chart-screen-header .chart-header__tools #browser-go {
     margin-left: 5px;
   }
 }
 .chart-fullscreen.nz-dialog {
-  .el-dialog__header{
+  .el-dialog__header {
     display: none;
   }
   .el-dialog__body {
@@ -578,14 +588,14 @@
   }
   .panel-chart--fullscreen {
     display: flex;
-    .nz-chart{
+    .nz-chart {
       padding: 0 20px 30px 20px;
       box-sizing: border-box;
       height: calc(100% - 55px);
     }
   }
 }
-.chart-stat{
+.chart-stat {
   width: 100%;
   height: 100%;
   display: flex;
@@ -596,7 +606,7 @@
   align-items: center;
   align-content: center;
   position: relative;
-  .chart-stat-item{
+  .chart-stat-item {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -610,11 +620,11 @@
     flex-grow: 1;
     position: relative;
     border: 1px solid $--background-color-empty;
-    .stat-text{
+    .stat-text {
       text-align: center;
       line-height: 1.2;
     }
-    .sparkline{
+    .sparkline {
       width: 100%;
       height: 40%;
       position: absolute;
@@ -622,30 +632,30 @@
       bottom: 0;
       z-index: 1;
     }
-    .comparison-text{
+    .comparison-text {
       text-align: center;
       color: $--color-text-secondary;
       word-break: normal;
       position: absolute;
       left: 0;
       right: 0;
-      &.comparison-text-center{
+      &.comparison-text-center {
         transform: translateY(-50%);
       }
-      .nz-icon{
+      .nz-icon {
         font-size: 1em;
         color: $--color-text-regular;
       }
-      .comparison-increase{
+      .comparison-increase {
         color: #19be6b;
       }
-      .comparison-decrease{
+      .comparison-decrease {
         color: #eb1010;
       }
     }
   }
 }
-.chart-gauge-box{
+.chart-gauge-box {
   width: 100%;
   height: calc(100% - 20px);
   display: flex;
@@ -653,7 +663,7 @@
   padding: 5px;
   box-sizing: border-box;
   position: relative;
-  .chart-gauge-item{
+  .chart-gauge-item {
     display: flex;
     position: relative;
     justify-content: center;
@@ -671,7 +681,7 @@
     flex: 1;
     width: 100%;
   }
-  .chart-gauge-legend{
+  .chart-gauge-legend {
     flex-shrink: 0;
     width: 100%;
     text-align: center;
@@ -688,28 +698,30 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-items:center;
-  justify-content:center;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
-.chart-diagram{
+.chart-diagram {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
 }
 .no-animation {
   .vue-grid-item {
-    transition: none
+    transition: none;
   }
 }
-.chart-canvas-tooltip{
+.chart-canvas-tooltip {
   position: fixed;
   display: block;
   border-style: solid;
   white-space: nowrap;
   will-change: transform;
   //box-shadow: rgba(0,0,0,0.2) 1px 2px 10px;
-  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
+  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
+    visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
+    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
   border-width: 1px;
   border-radius: 4px;
   font: 14px / 21px "Microsoft YaHei";
@@ -718,7 +730,7 @@
   pointer-events: none;
   overflow: hidden;
 }
-.chart-canvas-tooltip-title{
+.chart-canvas-tooltip-title {
   min-width: 150px;
   max-width: 500px;
   white-space: nowrap;
@@ -727,29 +739,29 @@
   margin-bottom: 5px;
   font-size: 14px;
 }
-.chart-canvas-tooltip-content{
+.chart-canvas-tooltip-content {
   max-width: 500px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
   overflow: hidden;
-  &>div:last-of-type{
+  & > div:last-of-type {
     padding-left: 5px;
   }
 }
 
-.chart-toolbox{
+.chart-toolbox {
   position: absolute !important;
   padding-bottom: 2px !important;
   z-index: 9999;
   pointer-events: auto;
-  .chart-dataLink-list{
+  .chart-dataLink-list {
     width: calc(100% + 20px);
     margin-left: -10px;
     margin-top: 10px;
     border-top: 1px solid $--border-color-light;
-    .chart-dataLink-item{
+    .chart-dataLink-item {
       min-width: 120px;
       max-width: 500px;
       padding: 0 10px;
@@ -760,27 +772,29 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      &:hover{
+      &:hover {
         background: $--background-color-base;
         color: $--color-primary !important;
       }
-      .nz-icon{
+      .nz-icon {
         margin-right: 4px;
       }
     }
-    .select-series+.chart-dataLink-item{
+    .select-series + .chart-dataLink-item {
       border-top: 1px solid $--border-color-light;
     }
   }
 }
 
-.chart-expolre-tooltip{
+.chart-expolre-tooltip {
   display: block;
   border-style: solid;
   white-space: nowrap;
   will-change: transform;
   box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
-  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
+  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
+    visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
+    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
   background-color: $--background-color-empty;
   border-width: 1px;
   border-radius: 4px;
@@ -791,7 +805,7 @@
   color: $--color-text-regular !important;
 }
 
-.graph-icon-info-box{
+.graph-icon-info-box {
   position: absolute;
   top: 50%;
   right: 5%;
@@ -803,81 +817,81 @@
     font-size: 20px;
     margin-bottom: 10px;
     color: $--color-monitor;
-    .graph-icon-label{
+    .graph-icon-label {
       margin-left: 5px;
     }
   }
 }
-.opacityItem{
+.opacityItem {
   opacity: 0;
   pointer-events: none;
 }
-.hiddenItem{
+.hiddenItem {
   box-shadow: $--chart-shadow;
 }
-.mapboxgl-control-container{
+.mapboxgl-control-container {
   .mapboxgl-ctrl-attrib {
     background-color: unset;
   }
   //position: absolute;
   //bottom: 0;
   //right: 0;
-  summary{
+  summary {
     display: none;
   }
-  .mapboxgl-ctrl-attrib-inner{
-    color: hsla(0,0%,69.8%,.77) !important;
+  .mapboxgl-ctrl-attrib-inner {
+    color: hsla(0, 0%, 69.8%, 0.77) !important;
     background: unset;
     a {
-      color: hsla(0,0%,69.8%,.77) !important;
+      color: hsla(0, 0%, 69.8%, 0.77) !important;
       cursor: pointer;
       text-decoration: underline;
     }
   }
-
 }
 
-.chart-label{
+.chart-label {
   color: $--color-text-primary;
 }
-.chart-label-text{
+.chart-label-text {
   fill: $--color-text-primary;
 }
-.tickTest{
+.tickTest {
   font-size: 12px;
   color: $--color-text-primary;
 }
-.tickLine{
+.tickLine {
   stroke: $--background-color-empty;
 }
-.tickLineFirst{
-  stroke: $--color-text-primary;;
+.tickLineFirst {
+  stroke: $--color-text-primary;
 }
 
-.no-events{
+.no-events {
   pointer-events: none !important;
-  *{
+  * {
     pointer-events: none !important;
   }
 }
-.foreign{
+.foreign {
   overflow: visible;
-  .foreign-label-wrap{
+  .foreign-label-wrap {
     white-space: nowrap;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     pointer-events: none;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 }
-.funnel-label{
+.funnel-label {
   cursor: pointer;
   pointer-events: auto;
   line-height: 16px;
   color: $--color-text-primary;
 }
-.doughnut-label,.rose-label{
+.doughnut-label,
+.rose-label {
   cursor: pointer;
   pointer-events: auto;
   font-size: 12px;
@@ -889,25 +903,25 @@
   overflow: hidden;
 }
 
-.chart-cursor-default{
+.chart-cursor-default {
   cursor: default !important;
-  *{
+  * {
     cursor: default !important;
   }
 }
 
-.chart-cursor-pointer{
+.chart-cursor-pointer {
   cursor: pointer !important;
-  *{
+  * {
     cursor: pointer !important;
   }
 }
 
-.tabel-chart-box{
+.tabel-chart-box {
   position: relative;
   display: flex;
   flex-direction: column;
-  .chart-table{
+  .chart-table {
     .value-mapping-table {
       padding: 10px;
       color: $--color-text-primary !important;
@@ -916,43 +930,43 @@
       overflow: hidden;
     }
   }
-  .tabel-chart-pagination{
+  .tabel-chart-pagination {
     height: auto !important;
     padding-top: 6px;
     overflow: hidden;
     overflow-x: auto;
     overflow-y: hidden;
-    .el-pagination{
+    .el-pagination {
       text-align: center;
     }
   }
-  .chart-canvas-tooltip{
+  .chart-canvas-tooltip {
     height: auto !important;
   }
 }
 
 .bar-item {
-  &:last-of-type{
+  &:last-of-type {
     margin: 0 !important;
   }
 }
 
-.bar-basic-vertical{
+.bar-basic-vertical {
   width: 100%;
   height: 100%;
   display: flex;
   overflow: hidden;
-  .bar-rect{
+  .bar-rect {
     border-radius: 2px;
     background: $--chart-bar-background;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    .bar-actual{
+    .bar-actual {
       border-radius: 2px;
     }
   }
-  .bar-value{
+  .bar-value {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -960,7 +974,7 @@
     line-height: 1;
     color: $--color-text-primary;
   }
-  .bar-title{
+  .bar-title {
     width: 100%;
     font-size: 14px;
     white-space: nowrap;
@@ -972,24 +986,23 @@
   }
 }
 
-
-.bar-basic-horizontal{
+.bar-basic-horizontal {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  .bar-item{
+  .bar-item {
     display: flex;
     align-items: center;
     overflow: hidden;
   }
-  .bar-rect{
+  .bar-rect {
     border-radius: 2px;
     background: $--chart-bar-background;
-    .bar-actual{
+    .bar-actual {
       border-radius: 2px;
     }
   }
-  .bar-title{
+  .bar-title {
     padding-right: 10px;
     box-sizing: border-box;
     text-overflow: ellipsis;
@@ -998,7 +1011,7 @@
     text-align: right;
     color: $--color-text-primary;
   }
-  .bar-value{
+  .bar-value {
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
@@ -1006,7 +1019,7 @@
     justify-content: flex-end;
     color: $--color-text-primary;
     white-space: nowrap;
-    span{
+    span {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1014,25 +1027,25 @@
   }
 }
 
-.bar-retro-vertical{
+.bar-retro-vertical {
   width: 100%;
   height: 100%;
   display: flex;
   overflow: hidden;
-  .bar-item{
+  .bar-item {
     display: flex;
     overflow: hidden;
     flex-direction: column-reverse;
   }
-  .bar-rect{
+  .bar-rect {
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
-    .bar-cell{
+    .bar-cell {
       border-radius: 2px;
     }
   }
-  .bar-value{
+  .bar-value {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1040,7 +1053,7 @@
     line-height: 1;
     color: $--color-text-primary;
   }
-  .bar-title{
+  .bar-title {
     width: 100%;
     font-size: 14px;
     white-space: nowrap;
@@ -1052,23 +1065,23 @@
   }
 }
 
-.bar-retro-horizontal{
+.bar-retro-horizontal {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  .bar-item{
+  .bar-item {
     display: flex;
     align-items: center;
     overflow: hidden;
-    .bar-rect{
+    .bar-rect {
       display: flex;
       align-items: center;
-      .bar-cell{
+      .bar-cell {
         border-radius: 2px;
       }
     }
   }
-  .bar-title{
+  .bar-title {
     padding-right: 10px;
     box-sizing: border-box;
     text-overflow: ellipsis;
@@ -1077,7 +1090,7 @@
     text-align: right;
     color: $--color-text-primary;
   }
-  .bar-value{
+  .bar-value {
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
@@ -1085,7 +1098,7 @@
     justify-content: flex-end;
     color: $--color-text-primary;
     white-space: nowrap;
-    span{
+    span {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1093,48 +1106,48 @@
   }
 }
 
-.chart-detail-new{
+.chart-detail-new {
   box-sizing: border-box;
   margin: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
   overflow: auto;
-  .asset-info{
+  .asset-info {
     border: 1px solid $--border-color-light;
     border-bottom: none;
-    .el-collapse{
+    .el-collapse {
       border: none;
-      .el-collapse-item__header{
+      .el-collapse-item__header {
         display: flex;
         flex-direction: row-reverse;
         justify-content: flex-end;
         background: transparent;
         border-bottom: 1px solid $--border-color-light;
         font-size: 14px;
-        .el-collapse-item__arrow{
+        .el-collapse-item__arrow {
           margin: 0 20px 0 20px;
         }
-        .asset-info-collapse{
+        .asset-info-collapse {
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          i{
+          i {
             margin-right: 2px;
           }
-          span{
+          span {
             margin-right: 10px;
           }
         }
       }
 
-      .el-collapse-item__wrap{
+      .el-collapse-item__wrap {
         background: transparent;
         border-color: $--border-color-light;
-        .el-collapse-item__content{
+        .el-collapse-item__content {
           padding: 0;
           display: flex;
           flex-wrap: wrap;
-          .asset-info-list{
+          .asset-info-list {
             flex: 1;
             box-sizing: border-box;
             padding: 15px 50px;
@@ -1143,17 +1156,17 @@
             border-top: 1px solid $--border-color-light;
             margin-left: -1px;
             margin-top: -1px;
-            .asset-info-row{
+            .asset-info-row {
               margin-bottom: 15px;
               display: flex;
               align-items: center;
-              .asset-info-title{
+              .asset-info-title {
                 width: 180px;
                 font-size: 14px;
                 word-break: break-word;
-                flex-shrink:0;
+                flex-shrink: 0;
               }
-              .asset-info-value{
+              .asset-info-value {
                 word-break: break-word;
                 box-sizing: border-box;
                 max-width: calc(100% - 150px);
@@ -1189,28 +1202,32 @@
   }
 }
 .uplot-toolbox {
-  position: absolute;right: 10px;top: 0;z-index: 999; font-size: 20px;
+  position: absolute;
+  right: 10px;
+  top: 0;
+  z-index: 999;
+  font-size: 20px;
   display: none;
 }
 .panel-chart:hover .uplot-toolbox {
   display: block;
 }
 
-.legend-wrap{
+.legend-wrap {
   padding: 5px 10px 5px 10px;
   box-sizing: border-box;
-  .legend-resize{
+  .legend-resize {
     position: relative;
     flex-shrink: 0;
-    .legend-resize-line{
+    .legend-resize-line {
       background-color: $--border-color-light;
       position: absolute;
       margin: auto;
     }
-    &:hover .legend-resize-line{
+    &:hover .legend-resize-line {
       background-color: $--color-primary;
     }
-    .nz-icon{
+    .nz-icon {
       font-size: 16px;
       color: $--color-text-regular;
       width: 16px;
@@ -1221,104 +1238,102 @@
     }
   }
   &:hover .legendSelect {
-    span{
+    span {
       visibility: visible;
     }
   }
-  
 }
 
-.nz-chart__component--bottom{
-  .legend-wrap{
+.nz-chart__component--bottom {
+  .legend-wrap {
     min-height: 38px;
     max-height: 90px;
     display: flex;
     flex-direction: column;
-    .legend-resize{
+    .legend-resize {
       cursor: ns-resize;
       width: 100%;
       height: 8px;
-      .legend-resize-line{
+      .legend-resize-line {
         width: 100%;
         height: 2px;
         top: 0;
         bottom: 0;
       }
-      .nz-icon{
+      .nz-icon {
         top: 10px;
         left: 0;
         right: 0;
       }
     }
-    .legend-list{
+    .legend-list {
       flex-wrap: wrap;
     }
   }
 }
-.panel-chart--fullscreen{
-  .nz-chart__component--bottom{
-    .legend-wrap{
+.panel-chart--fullscreen {
+  .nz-chart__component--bottom {
+    .legend-wrap {
       max-height: 238px;
     }
   }
 }
 
-.nz-chart__component--left{
-  .legend-wrap{
+.nz-chart__component--left {
+  .legend-wrap {
     padding-top: 20px;
     max-width: 50%;
     display: flex;
     flex-direction: row-reverse;
-    .legend-resize{
+    .legend-resize {
       cursor: ew-resize;
       width: 8px;
       height: 100%;
-      .legend-resize-line{
+      .legend-resize-line {
         width: 2px;
         height: 100%;
         left: 0;
         right: 0;
       }
-      .nz-icon{
+      .nz-icon {
         transform: rotate(90deg);
         top: 0;
         bottom: 0;
         right: -10px;
       }
     }
-    .legend-list{
-      flex: 1;
-      flex-direction: column;
-    }
-  } 
-}
-
-.nz-chart__component--right{
-  .legend-wrap{
-    padding-top: 15px;
-    max-width: 30%;
-    display: flex;
-    .legend-resize{
-      cursor: ew-resize;
-      width: 8px;
-      height: 100%;
-      .legend-resize-line{
-        width: 2px;
-        height: 100%;
-        left: 0;
-        right: 0;
-      }
-      .nz-icon{
-        transform: rotate(90deg);
-        top: 0;
-        bottom: 0;
-        left: -10px;
-      }
-    }
-    .legend-list{
+    .legend-list {
       flex: 1;
       flex-direction: column;
     }
   }
 }
 
+.nz-chart__component--right {
+  .legend-wrap {
+    padding-top: 15px;
+    max-width: 30%;
+    display: flex;
+    .legend-resize {
+      cursor: ew-resize;
+      width: 8px;
+      height: 100%;
+      .legend-resize-line {
+        width: 2px;
+        height: 100%;
+        left: 0;
+        right: 0;
+      }
+      .nz-icon {
+        transform: rotate(90deg);
+        top: 0;
+        bottom: 0;
+        left: -10px;
+      }
+    }
+    .legend-list {
+      flex: 1;
+      flex-direction: column;
+    }
+  }
+}