横向柱状图

效果图如下：

代码如下：

<template>
  <div class="main">
    <div class="volume" ref="container"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      myChart: null,
      option: null,
      data: [
        {
          name: "1月",
          value: 53,
        },
        {
          name: "2月",
          value: 24,
        },
        {
          name: "3月",
          value: 10,
        },
        {
          name: "4月",
          value: 20,
        },
        {
          name: "5月",
          value: 10,
        },
        {
          name: "6月",
          value: 20,
        },
      ],
      opt: {
        index: 0,
      },
    };
  },
  mounted() {
    this.drawChart();
    //获取数据。
    if (this.$refs.container) {
      this.reloadChart();
      //自适应浏览器。
      window.addEventListener("resize", () => {
        this.reloadChart();
      });
    }
  },
  //组件销毁。
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    getArrByKey(data, k) {
      let key = k || "value";
      let res = [];
      if (data) {
        data.forEach(function(t) {
          res.push(t[key]);
        });
      }
      return res;
    },
    getSymbolData(data) {
      let arr = [];
      for (var i = 0; i < data.length; i++) {
        arr.push({
          value: data[i].value,
          symbolPosition: "end",
        });
      }
      return arr;
    },
    drawChart() {
      this.myChart = echarts.init(this.$refs.container);
      var data = [
        {
          name: "1月",
          value: 53,
        },
        {
          name: "2月",
          value: 24,
        },
        {
          name: "3月",
          value: 10,
        },
        {
          name: "4月",
          value: 20,
        },
        {
          name: "5月",
          value: 10,
        },
        {
          name: "6月",
          value: 20,
        },
      ];
      this.option = {
        grid: {
          top: "8%",
          bottom: 0,
          right: "16%",
          left: "18%",
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: this.getArrByKey(this.data, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: 0,
              color: "#fff",
              align: "left",
              margin: 80,
              fontSize: this.fontSize(0.35),
              formatter: function(value, index) {
                return "{title|" + value + "}";
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: this.getArrByKey(this.data, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              shadowOffsetX: "-20px",
              color: ["#fff"],
              align: "right",
              verticalAlign: "bottom",
              lineHeight: 0,
              fontSize: this.fontSize(0.35),
              formatter: function(value, index) {
                const totalValue = data.reduce(
                  (sum, item) => sum + item.value,
                  0
                );
                const percentage = (
                  (data[index].value / totalValue) *
                  100
                ).toFixed(0);
                return `{percent|${percentage}%}`;
              },
              rich: {
                percent: {
                  color: "#fff",
                  fontSize: this.fontSize(0.35),
                  align: "right",
                  padding: [0, -this.fontSize(1.6)],
                },
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,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",
            symbolSize: [this.fontSize(0.55), this.fontSize(0.55)],
            symbolOffset: [this.fontSize(0.25), 0],
            z: 12,
            itemStyle: {
              normal: {
                color: "#14b1eb",
              },
            },
            data: this.getSymbolData(this.data),
          },
          {
            name: "条",
            type: "bar",
            showBackground: false,
            barBorderRadius: 30,
            yAxisIndex: 0,
            data: data,
            barWidth: this.fontSize(0.18),
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(31, 89, 89, 0.25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(51, 204, 204, 1)",
                    },
                  ],
                  false
                ),
                barBorderRadius: 0,
              },
              barBorderRadius: 4,
            },
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: [-this.fontSize(1.2), "0px"],
                textStyle: {
                  color: "#D9F9FF",
                  fontSize: this.fontSize(0.35),
                },
                formatter: function(a, b) {
                  return a.name;
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(this.option);
    },
    //字体自适应。
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
    //销毁图表。
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    //重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .volume {
    width: 100%;
    height: 100%;
  }
}
</style>