Echarts 象形柱状图（pictorialBar）

效果图：

实现：

<template>
  <div class="chart_wrap">
    <div class="MainPopulation_chart" ref="MainPopulation_chart"></div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import * as echarts from "echarts";

export default {
  name: "MainPopulation",
  props: {
    currentTimeArray: {
      type: Object,
      default: () => {
        return {};
      },
    },
    activeName: {
      type: String,
      default: "",
    },
    data: {
      type: Object,
      default: () => {
        return {
          data_X: ["第一", "第二", "第三", "第四", "第五", "第六"],
          data_Y: [10, 20, 30, 5, 40, 60],
        };
      },
    },
  },
  data() {
    return {
      myChart: null,
      rate: 30, //优良率
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myChart = this.$echarts.init(this.$refs.MainPopulation_chart);
      this.myChart.clear();
      this.crawPie(this.myChart, this.data.data_X, this.data.data_Y);

      var that = this;
      window.addEventListener("resize", function () {
        that.myChart.resize();
      });
      that.myChart.on("click", "series.pie", function (params) {
        Bus.$emit("ThreeSeriesName", params.name);
      });
    },
    crawPie(myChart, data_X, data_Y) {
      let barTopColor = [
        "#E8C50B",
        "#0CD7E2",
        "#1EAAFE",
        "white",
        "black",
        "#C23531",
      ];
      let barBottomColor = [
        "rgba(232, 197, 11,0.1)",
        "rgba(12, 215, 226, 0.1)",
        "rgba(30, 170, 254, 0.1)",
        "rgba(255,255,255,0.1)",
        "rgba(0,0,0,0.1)",
        "rgba(194,53,49, 0.1)",
      ];

      myChart.setOption({
        grid: {
          top: "15%",
          bottom: "20%",
          left: "3%",
          right: "3%",
        },
        xAxis: {
          data: data_X,

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            // rotate: -30,
            margin: 25,
            align: "center",
            textStyle: {
              fontSize: 12,
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "柱顶部",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10],
            symbolOffset: [0, -5], // [0, -5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "top",
              fontSize: 20,
              fontFamily: "tenxu",
              formatter: "{c}",
            },
            symbolPosition: "end",
            data: data_Y,
          },
          {
            name: "柱底部",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10]
            symbolOffset: [0, 5], // [0, 5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            data: data_Y,
          },
          {
            name: "第一圈",
            type: "pictorialBar",
            symbolSize: [46, 16], // [56, 16]
            symbolOffset: [0, 11], // [0, 11]
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.2,
              },
            },
            data: data_Y,
          },
          {
            name: "第二圈",
            type: "pictorialBar",
            symbolSize: [64, 22], // [74, 22]
            symbolOffset: [0, 17], // [0, 17]
            z: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.1,
              },
            },
            data: data_Y,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                // 中间柱子渐变色
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex],
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex],
                    },
                  ]);
                },
                opacity: 0.8,
              },
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: "-100%", // Make series be overlap
            data: data_Y,
          },
        ],
      });
    },
  },
  computed: {
    chartShow() {
      return this.$store.state.chartShow;
    },
  },
  watch: {
    chartShow: function () {
      var that = this;
      setTimeout(function () {
        that.myChart.resize();
        that.init();
      }, 400);
    },
    activeName: function () {
      var that = this;
      that.myChart.resize();
    },

    data: {
      deep: true,
      immediate: true,
      handler(val) {
        this.init();
      },
    },
  },
};
</script>
<style scoped lang="scss">
.chart_wrap {
  position: relative;
  width: 100%;
  max-width: 615px;
  height: 246px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 15px;
}
.MainPopulation_chart {
  width: 100%;
  max-width: 615px;
  height: 246px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>