echarts柱状图实现立体柱状效果，柱体出现时显示上升动画，柱体上方数字也从0开始动画

echarts版本为5.3.2，实现立体柱状效果，柱体出现时显示上升动画，柱体上方数字也从0开始动画

实现效果：

 

实现代码如下：

<template>
  <div class="litiEcharts" ref="litiEcharts"></div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      echarts: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const _this = this;
      this.echarts = this.$echarts.init(this.$refs.litiEcharts);
      const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
      const data = [26, 14, 35, 10, 20];
      var xdata = ["2018", "2019", "2020", "2021", "2022"];
      const data2 = [0, 0, 0, 0, 0];
      var barWidth = 15;
      var color2 = {
        type: "linear",
        x: 0,
        x2: 0,
        y: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: "#ffffff00",
          },
          {
            offset: 0.3,
            color: "#208fdf",
          },
          {
            offset: 1,
            color: colorArr2[1],
          },
        ],
      };

      this.options = {
        grid: {
          top: "22%",
          lef