From 35f99a2cbefab8b7e61651bb1697b374e013efcd Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Sun, 24 Jul 2022 10:23:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/view/TitleRemark.vue | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 frontend/src/views/chart/view/TitleRemark.vue

diff --git a/frontend/src/views/chart/view/TitleRemark.vue b/frontend/src/views/chart/view/TitleRemark.vue
new file mode 100644
index 0000000000..1bb961df47
--- /dev/null
+++ b/frontend/src/views/chart/view/TitleRemark.vue
@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <el-popover
+      placement="bottom"
+      trigger="hover"
+      width="300"
+      popper-class="remark-pop"
+      :visible-arrow="false"
+    >
+      <div class="remark-style" :style="{backgroundColor:remarkCfg.bgFill}" v-html="remarkCfg.content" />
+      <i slot="reference" class="el-icon-info" style="cursor: pointer;color: gray;font-size: 12px;" />
+    </el-popover>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'TitleRemark',
+  props: {
+    remarkCfg: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.remark-style{
+  min-height: 100px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+  border-radius: 4px;
+}
+</style>
+<style>
+.el-popover.remark-pop{
+  padding: 0;
+  border: none;
+  margin-top: 8px!important;
+  background: transparent;
+}
+</style>