实现组件复用功能，更新说明文档，修改界面的部分细节

2020-05-05 23:34:19 +08:00
parent c838f9abc2
commit f2b118ed0b
6 changed files with 157 additions and 111 deletions
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div :id="id" style="width:120px;height:100px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function() {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  methods: {
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(document.getElementById(this.id));
+      //  ----------------------------------------------------------------
+      let tips = this.tips;
+      let option = {
+        title: [
+          {
+            text: tips * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          }
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["75%", "80%"],
+            center: ["50%", "50%"],
+            hoverAnimation: false,
+            color: this.colorObj.series.color,
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: tips,
+                itemStyle: {
+                  normal: {
+                    color: this.colorObj.series.dataColor.normal,
+                    shadowBlur: 10,
+                    shadowColor: this.colorObj.series.dataColor.shadowColor
+                  }
+                }
+              },
+              {
+                value: 100 - tips
+              }
+            ]
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>