新组件

components/bussiness/charts/chart-column-vertical.vue

+<!-- 饼图 -->
+<template>
+  <section class="chart-pie">
+    <div :id="id" :style="{width: '100%', height: '320px'}"></div>
+  </section>
+</template>
+<script>
+import { format } from "path";
+let vm = null;
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "chartlineId"
+    },
+    colors: {
+      type: Array,
+      default: () => [
+        "#FFB01B",
+        "#39AF9A",
+        "#5D7092",
+        "#FF9A4B",
+        "#abb7bb",
+        "#76d2d2"
+      ]
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    vm = this;
+    this.drawColumn();
+  },
+  methods: {
+    // 画
+    drawColumn() {
+      // 基于准备好的dom，初始化echarts实例
+      let chartColumn = this.$echarts.init(document.getElementById(this.id));
+      // 绘制图表
+      let options = {
+        color: vm.colors,
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        legend: {
+          top: 20,
+          data: ["获优秀人数", "获及格人数", "未获证人数"],
+          textStyle: {
+            fontSize: 12,
+            // fontWeight: "bolder",
+            color: "#676869"
+          }
+        },
+        grid: {
+          left: "3%",
+          right: "6%",
+          bottom: "6%",
+          containLabel: true
+        },
+        lineStyle: {
+          color: "#676869"
+        },
+        yAxis: {
+          axisTick: false,
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            textStyle: {
+              color: "#676869"
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+              width: 1
+            }
+          }
+        },
+        xAxis: {
+          axisTick: false,
+          type: "category",
+          data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
+          textStyle: {
+            fontSize: 12,
+            color: "#676869"
+          },
+          axisLabel: {
+            formatter: "{value}",
+            textStyle: {
+              color: "#676869"
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+              width: 1
+            }
+          }
+        },
+        series: [
+          {
+            name: "获优秀人数",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+            barWidth: 20 //柱图宽度
+          },
+          {
+            name: "获及格人数",
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+            barWidth: 20 //柱图宽度
+          }
+        ]
+        // series: [
+        //   {
+        //     name: "获优秀人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [320, 302, 301, 334, 390, 330, 320]
+        //   },
+        //   {
+        //     name: "获及格人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [120, 132, 101, 134, 90, 230, 210]
+        //   },
+        //   {
+        //     name: "未获证人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [220, 182, 191, 234, 290, 330, 310]
+        //   }
+        // ]
+      };
+      chartColumn.setOption(options);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-pie {
+  position: relative;
+  top: -6px;
+  // height: 280px;
+  margin: 15px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 6px;
+  border: 1px solid rgba(231, 232, 233, 1);
+}
+</style>