From 43fccefbc834e9b2059e7ad7703f89e8a4d1b0cd Mon Sep 17 00:00:00 2001
From: wenzhijie <wenzhijie@geedgenetworks.com>
Date: Thu, 11 Aug 2022 13:51:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dlenged=E6=A0=B7=E5=BC=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chart/chart/chartTreemapD3.vue | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue b/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
index a2f127c20..0fefc7517 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
@@ -1,20 +1,12 @@
 <template>
   <div
+   :class="legendPlacement"
     ref="pie-chart-box"
-    class="nz-chart__component"
+    class="nz-chart__component nz-chart__component--time-series"
   >
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" >
       <svg :id="`treemap-svg-${chartId}`" width="100%" height="100%">
       </svg>
-          <chart-legend
-      v-if="hasLegend"
-      :chart-data="chartData"
-      :chart-info="chartInfo"
-      :legends="legends"
-      :series="series"
-      :is-fullscreen="isFullscreen"
-      class="legends-flex"
-    ></chart-legend>
     </div>
     <div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title">
@@ -30,6 +22,15 @@
         </div>
       </div>
     </div>
+        <chart-legend
+      v-if="hasLegend"
+      :chart-data="chartData"
+      :chart-info="chartInfo"
+      :legends="legends"
+      :series="series"
+      :is-fullscreen="isFullscreen"
+      class="legends-flex"
+    ></chart-legend>
   </div>
 </template>
 
@@ -377,13 +378,22 @@ export default {
     display: inline-block;
     flex-wrap: wrap;
     flex-direction: column;
+    height:20px !important;
+    line-height: 20px;
+    align-self: stretch;
+    -webkit-box-align: stretch;
 }
 .theme-light .legend-container{
-  height:30px !important;
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
     scrollbar-width: none;     /* Firefox */
 }
 .container::-webkit-scrollbar {
     display: none;            /* Safari and Chrome */
 }
+
+.legends-flex{
+    width: 100%;
+    max-height: 80px;
+    min-height: 25px;
+}
 </style>