Vue+Echart实现柱状图圆柱体

效果：

代码：

<template>
  <div>
    <div style="height: 18px; line-height: 18px; font-size: 18px">
      学生事务管理
    </div>
    <div
      id="DayOffStats"
      style="width: 100%; height: 380px; padding: 0 10px"
    ></div>
  </div>
</template>

<script>
import { getDayOffCount } from "@/api/studentStat";

// 学生事务管理
export default {
  name: "DayOffStats",
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    const chartDom = document.getElementById("DayOffStats");
    this.myChart = this.$echarts.init(chartDom);
    this.blockInit();
  },
  methods: {
    getChartOpts(data) {
      return {
        xAxis: {
          type: "category",
          data: ["请假数", "未归数"],
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [

          {
            name: "圆柱部分",
            type: "bar", //bar 柱状图
            barWidth: 46,
            barGap: "0%",
            itemStyle: {
              //柱状样式
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: "#4c8fdc",
                    },
                    {
                      offset: 1,
                      color: "#4c8fdc",
                    },
                  ],
                },
              },
            },
            data: data,
          },
          {
            name: "顶部截面",
            type: "pictorialBar", //pictorialBar 象形柱图
            symbolSize: [46, 12], //调整截面形状
            symbolOffset: [0, -8],
            z: 12,
            symbolPosition: "end", //图形的位置 'start'：图形边缘与柱子开始的地方内切。'end'：图形边缘与柱子结束的地方内切。'center'：图形在柱子里居中。
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#94bfee",
                    },
                    {
                      offset: 1,
                      color: "#94bfee",
                    },
                  ],
                  false
                ),
              },
            },
            // 实现数字展示在柱状图
            label: {
              show: true,
              position: "top",
              // fontSize: 20,
              // color: "#2DB1EF",
              // fontWeight: "bold",
              offset: [0, -10],
              formatter: "{c}人", //添加单位
            },
            data: data,
          },
        ],
      };
    },
    async blockInit() {
      const { data } = await getDayOffCount();
      const buildChartArr = (arr) => {
        // 排序取值
        const tmpl = ["请假", "未归"];
        return tmpl.map((ele) => {
          const temp = arr.find((itm) => itm.mc === ele);
          return temp ? temp.num : 0;
        });
      };
      const list = buildChartArr(data);
      this.myChart.setOption(this.getChartOpts(list));
    },
  },
};
</script>

<style lang="scss" scoped></style>