From fbe7647f9b15e36ae23ac0f6c6a92b43041ce8ef Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 3 Dec 2021 16:55:46 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1280=20feat:=20=E5=9B=BE=E8=A1=A8=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E6=A0=8F=E5=8F=AF=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/components/chart/chart.scss    | 15 +++++++++++++++
 nezha-fronted/src/components/chart/chart.vue      |  2 +-
 .../src/components/chart/chartHeader.vue          |  2 +-
 nezha-fronted/src/components/chart/testData.js    |  3 +++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 06972213d..0c441b88d 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -2,9 +2,24 @@
   border: 1px solid $--chart-box-border-color;
   height: 100%;
   display: flex;
+  position: relative;
   flex-direction: column;
 
   .chart-header {
+    &.chart-header--float {
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      box-sizing: border-box;
+      height: 10px;
+      opacity: 0;
+      transition: all linear .2s;
+
+      &:hover {
+        height: 39px;
+        opacity: 1;
+      }
+    }
     display: flex;
     justify-content:space-between;
     align-items:center;
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 2a39fcaa4..eabbb5dcc 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nz-chart">
+  <div :style="chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart">
     <loading :loading="loading"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index a9d065ab5..014538929 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-header">
+  <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
     <div class="chart-header__title">{{chartInfo.name}}</div>
     <div class="chart-header__tools">
       <span v-if="chartInfo.remark" class="chart-header__tool">
diff --git a/nezha-fronted/src/components/chart/testData.js b/nezha-fronted/src/components/chart/testData.js
index c1c3118b9..8d10e7845 100644
--- a/nezha-fronted/src/components/chart/testData.js
+++ b/nezha-fronted/src/components/chart/testData.js
@@ -22,6 +22,7 @@ const chartData = {
         weight: 0,
         param: '{' +
           '   "style":"area",' +
+          '   "showHeader":false,' +
           '   "stack":true,' +
           '   "legend":{' +
           '        "placement":"bottom",' +
@@ -135,6 +136,7 @@ const chartData = {
         weight: 1,
         param: '{' +
           '   "style":"point",' +
+          '   "showHeader":true,' +
           '   "stack":false,' +
           '    "legend":{' +
           '        "placement":"right"' +
@@ -237,6 +239,7 @@ const chartData = {
         dataSource: 1,
         param: '{' +
           '   "style":"line",' +
+          '   "showHeader":true,' +
           '   "stack":true,' +
           '    "legend":{' +
           '        "placement":"left"' +