更新文档说明

2020-03-30 22:12:27 +08:00
parent 88f3fba846
commit 1688f29967
5 changed files with 105 additions and 7 deletions
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie(sidebar) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centreLeft1Chart")
+      );
+      //  ----------------------------------------------------------------
+
+      myChartPieLeft.setOption({
+        color: [
+          "#37a2da",
+          "#32c5e9",
+          "#9fe6b8",
+          "#ffdb5c",
+          "#ff9f7f",
+          "#fb7293",
+          "#e7bcf3",
+          "#8378ea"
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        toolbox: {
+          show: true
+        },
+        calculable: true,
+        legend: {
+          orient: "horizontal",
+          icon: "circle",
+          bottom: 0,
+          x: "center",
+          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            name: "增值电信业务统计表",
+            type: "pie",
+            radius: [10, 60],
+            roseType: "area",
+            center: ["50%", "40%"],
+            data: [
+              { value: 10, name: "rose1" },
+              { value: 5, name: "rose2" },
+              { value: 15, name: "rose3" },
+              { value: 25, name: "rose4" },
+              { value: 20, name: "rose5" },
+              { value: 35, name: "rose6" }
+            ]
+          }
+        ]
+      });
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      //侧边栏变化
+      if (sidebar) {
+        myChartPieLeft.resize();
+      }
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>