Echart柱状图-横版模式+方框数字显示

"echarts": "^5.1.2",

<template>
  <div id="leftEcharts2" class="echarts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      Time1: null,
      dataArr: [
        { name: "名称47", value: 797 },
        { name: "名称1", value: 751 },
        { name: "名称32", value: 666 },
        { name: "名称22", value: 631 },
        { name: "名称05", value: 333 }
      ]
    };
  },
  beforeDestroy() {
    clearInterval(this.Time1);
  },
  mounted() {
    this.echartsFun();
    this.Time1 = setInterval(() => {
      this.echartsFun();
    }, 60000);
  },
  methods: {
    async echartsFun() {
      var colorList = ["#EA3C3C", "#FF7D26", "#CA9F29", "#5BFF83", "#00FBFF"];
      const myChart = echarts.init(document.getElementById("leftEcharts2"));
      const option = {
        grid: {
          // 这个一定要写，不写的话会有默认比列导致图标显示不完整
          top: "0%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true // 显示范围包含坐标刻度
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          nameGap: 1,
          max: this.dataArr[0].value,
          show: false,
          type: "value"
        },
        yAxis: [
          {
            nameGap: 1,
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              label: {
                show: true,
                margin: 30
              }
            },
            data: this.dataArr.map(item => item.value),
            axisLabel: {
              // 图形前面方形样式
              margin: 25,
              fontSize: 12,
              align: "left",
              color: "#fff",
              rich: {
                a0: {
                  borderWidth: 1,
                  padding: [2, 1, 0, 1], // 让数字居中
                  borderColor: colorList[0],
                  width: 14,
                  height: 13,
                  color: colorList[0],
                  align: "center"
                },
                a1: {
                  borderWidth: 1,
                  padding: [2, 1, 0, 1],
                  borderColor: colorList[1],
                  width: 14,
                  height: 13,
                  color: colorList[1],
                  align: "center"
                },
                a2: {
                  borderWidth: 1,
                  padding: [2, 1, 0, 1],
                  borderColor: colorList[2],
                  width: 14,
                  height: 13,
                  color: colorList[2],
                  align: "center"
                },
                a3: {
                  borderWidth: 1,
                  padding: [2, 1, 0, 1],
                  borderColor: colorList[3],
                  width: 14,
                  height: 13,
                  color: colorList[3],
                  align: "center"
                },
                a4: {
                  borderWidth: 1,
                  padding: [2, 1, 0, 1],
                  borderColor: colorList[4],
                  width: 14,
                  height: 13,
                  color: colorList[4],
                  align: "center"
                }
              },
             formatter: (params, k) => {
                return ["{a" + k + "|" + (k + 1) + "}"].join("\n");
              }
            }
          },
          {
            nameGap: 1,
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            data: this.dataArr.map(item => item.value),
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#fff",
              formatter: (val, k) => {
                console.log(val);
                return `  ${this.dataArr[k].name}`;
              }
            }
          }
        ],
        series: [
          {
            name: "value",
            type: "bar", // bar柱状图
            showBackground: true, // 设置柱状图背景色
            backgroundStyle: { color: "rgba(225, 225, 225, 0.55)" }, // 背景色
            barWidth: 10,
            barCategoryGap: "1%", // 柱子之间间距
            data: this.dataArr.map((item, i) => {
              let itemStyle = {
                color: colorList[i]
              };
              return {
                value: item.value,
                itemStyle: itemStyle
              };
            }),
            label: {
              show: false,
              position: "right",
              color: "#333333",
              fontSize: 14,
              offset: [10, 0],
              normal: {
                // 柱状图末端内部显示数字
                show: true,
                position: "insideBottomRight",
                // formatter: "{c} h", // 拼接单位
                distance: 0,
                offset: [14, 10],
                color: "#fff",
                fontSize: 12,
                padding: [5, 15, 10, 15]
              }
            }
          }
          // {
          //   name: "背景",
          //   type: "bar",
          //   barWidth: 10,
          //   barGap: "-100%",
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(225, 225, 225, 0.55)"
          //     }
          //   },
          //   data: maxArr
          // }
        ]
      };
      myChart.setOption(option, true); // true无数据时更新试图
    }
  }
};
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

感谢大家点赞！