左下角表格

2020-03-18 19:10:45 +08:00
parent b783d1755f
commit 77b384b613
4 changed files with 341 additions and 4 deletions
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div id="bottomLeftChart" style="width:900px;height:400px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("bottomLeftChart")
+      );
+      //  ----------------------------------------------------------------
+      let category = [
+        "市区",
+        "万州",
+        "江北",
+        "南岸",
+        "北碚",
+        "綦南",
+        "长寿",
+        "永川",
+        "璧山",
+        "江津",
+        "城口",
+        "大足",
+        "垫江",
+        "丰都",
+        "奉节",
+        "合川",
+        "江津区",
+        "开州",
+        "南川",
+        "彭水",
+        "黔江",
+        "石柱",
+        "铜梁",
+        "潼南",
+        "巫山",
+        "巫溪",
+        "武隆",
+        "秀山",
+        "酉阳",
+        "云阳",
+        "忠县",
+        "川东",
+        "检修"
+      ];
+      let lineData = [
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        56061,
+        62677,
+        59521,
+        67560,
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        50061,
+        32677,
+        49521,
+        32808
+      ];
+      let barData = [
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        33300,
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        22500,
+        14000,
+        21500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        7500
+      ];
+      let rateData = [];
+      for (let i = 0; i < 33; i++) {
+        let rate = barData[i] / lineData[i];
+        rateData[i] = rate.toFixed(2);
+      }
+
+      let option = {
+        title: {
+          text: "增量设备贯通情况-单位",
+          x: "center",
+          y: 0,
+          textStyle: {
+            color: "#B4B4B4",
+            fontSize: 16,
+            fontWeight: "normal"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(255,255,255,0.1)",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#7B7DDC"
+            }
+          }
+        },
+        legend: {
+          data: ["已贯通", "计划贯通", "贯通率"],
+          textStyle: {
+            color: "#B4B4B4"
+          },
+          top: "7%"
+        },
+        grid: {
+          x: "12%",
+          width: "82%",
+          y: "12%"
+        },
+        xAxis: {
+          data: 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: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#F02FC2"
+              }
+            },
+            data: rateData
+          },
+
+          {
+            name: "已贯通",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#956FD4" },
+                  { offset: 1, color: "#3EACE5" }
+                ])
+              }
+            },
+            data: barData
+          },
+
+          {
+            name: "计划贯通",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(156,107,211,0.5)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.3)" },
+                  { offset: 1, color: "rgba(156,107,211,0)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: lineData
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>