✨ feat(dashboard): 大屏素材准备

klp-ui/src/views/dashboard/indexs/center-bottom.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="center_bottom">
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      class="echarts_bottom"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { currentGET } from "api";
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.pageflag = true;
+      currentGET("big6", { companyName: this.companyName }).then((res) => {
+        console.log("安装计划", res);
+        if (res.success) {
+          this.init(res.data);
+        } else {
+          this.pageflag = false;
+          this.$Message({
+            text: res.msg,
+            type: "warning",
+          });
+        }
+      });
+    },
+    init(newData) {
+      this.options = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+          formatter: function (params) {
+            // 添加单位
+            var result = params[0].name + "<br>";
+            params.forEach(function (item) {
+              if (item.value) {
+                if (item.seriesName == "安装率") {
+                  result +=
+                    item.marker +
+                    " " +
+                    item.seriesName +
+                    " : " +
+                    item.value +
+                    "%</br>";
+                } else {
+                  result +=
+                    item.marker +
+                    " " +
+                    item.seriesName +
+                    " : " +
+                    item.value +
+                    "个</br>";
+                }
+              } else {
+                result += item.marker + " " + item.seriesName + " :  - </br>";
+              }
+            });
+            return result;
+          },
+        },
+        legend: {
+          data: ["已安装", "计划安装", "安装率"],
+          textStyle: {
+            color: "#B4B4B4",
+          },
+          top: "0",
+        },
+        grid: {
+          left: "50px",
+          right: "40px",
+          bottom: "30px",
+          top: "20px",
+        },
+        xAxis: {
+          data: newData.category,
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4",
+              },
+            },
+
+            axisLabel: {
+              formatter: "{value}",
+            },
+          },
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}% ",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "已安装",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: 5,
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#956FD4" },
+                { offset: 1, color: "#3EACE5" },
+              ]),
+            },
+            data: newData.barData,
+          },
+          {
+            name: "计划安装",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 10,
+            itemStyle: {
+              borderRadius: 5,
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgba(156,107,211,0.8)" },
+                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                { offset: 1, color: "rgba(156,107,211,0.2)" },
+              ]),
+            },
+            z: -12,
+            data: newData.lineData,
+          },
+          {
+            name: "安装率",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              color: "#F02FC2",
+            },
+            data: newData.rateData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.center_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_bottom {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>