From d857dc7ed697ff8a72e63b263bffdc48d5f71b49 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Mon, 25 Dec 2023 18:09:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20EchartBox=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E4=BF=AE=E6=94=B9=20=E5=85=A8=E5=B1=80=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  |   6 +-
 src/components/EchartBox.vue | 169 +++++++++++++++++++++++++++++++++++
 2 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EchartBox.vue

diff --git a/src/App.vue b/src/App.vue
index 2cc216a..b67625e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,4 +8,8 @@ export default {
   name: 'App'
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+#app {
+  font-family: 'SourceHanSansCN';
+}
+</style>
diff --git a/src/components/EchartBox.vue b/src/components/EchartBox.vue
new file mode 100644
index 0000000..532308d
--- /dev/null
+++ b/src/components/EchartBox.vue
@@ -0,0 +1,169 @@
+<!--  -->
+<template>
+  <div class="echart-box">
+    <div class="echart-con">
+      <!-- 盒子外部的左上角的标题 -->
+      <div class="title-out" v-if="outTitle !== ''">
+        <span>{{ outTitle }}</span>
+      </div>
+      <div class="echart-main">
+        <!-- legend -->
+        <div class="legend">
+          <div class="left">
+            <span>{{ legend.title }}</span>
+          </div>
+          <div class="right">
+            <div class="list">
+              <div class="item" v-for="(item, index) in legend.list" :key="index">
+                <div
+                  class="shape"
+                  :style="{
+                    backgroundColor: item.color,
+                    borderRadius: '50%'
+                  }"
+                ></div>
+                <div class="text">
+                  <span>{{ item.name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- echart盒子内容 -->
+        <div class="echart">
+          <div :id="echartId" :style="{ height: height + 'px', minHeight: '200px' }"></div>
+        </div>
+        <!--echart自定义底部  -->
+        <slot name="custom-bot"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EchartBox',
+  props: {
+    height: {
+      type: String,
+      default: '300'
+    },
+    width: {
+      type: String,
+      default: ''
+    },
+    outTitle: {
+      type: String,
+      default: ''
+    },
+    legend: {
+      type: Object,
+      default: () => ({
+        title: '',
+        list: []
+      })
+    },
+    echartId: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      echart: null
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.initEchart();
+  },
+  beforeDestroy() {
+    this.disposeChart();
+  },
+  methods: {
+    // 初始化echart
+    initEchart() {
+      if (this.echart != null && this.echart != '' && this.echart != undefined) {
+        this.echart.dispose();
+      }
+      if (this.echartId) {
+        this.echart = this.$echarts.init(document.getElementById(this.echartId));
+        this.echart.setOption(this.options);
+      }
+    },
+    // 销毁echart
+    disposeChart() {
+      if (this.echart) {
+        this.echart.dispose();
+        this.echart = null;
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+.echart-box {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  margin: 20px 0;
+  .echart-con {
+    padding: 20px 0;
+    .title-out {
+      font-size: 36px;
+      font-weight: bold;
+      padding: 20px;
+    }
+
+    .echart-main {
+      position: relative;
+      border: 1px solid $com_light_green;
+      border-radius: 30px;
+      padding: 20px;
+      .legend {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 16px 0;
+        .left {
+          font-weight: bold;
+        }
+        .right {
+          .list {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            grid-auto-flow: dense; /* 允许元素在网格中填充空隙 */
+            grid-gap: 5px;
+            white-space: wrap;
+            .item {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              .shape {
+                height: 14px;
+                width: 14px;
+                margin-right: 10px;
+              }
+              .text {
+                font-size: 20px;
+              }
+            }
+          }
+        }
+      }
+      .echart {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>