echarts实现进度条

实现结果:

如果想实现数据倒叙排列,可以在yAxis中加入** inverse:true,** 属性

主要通过formatter+rich去配置图片

代码:

<template>
  <div>
    <div id="bjlxindex"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
// echarts文字大小
import { echartfontSize } from "@/utils";
// 地区名称前的图片
import tick from '../images/tick.png'
// 右侧下划线图片
import qysjbottom from '../images/qysjbottom.png'

export default {
  props: {
    bjlxChartData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      data: null,
    };
  },
  mounted() {},
  methods: {
    drawLineChart() {
      var chartDom = document.getElementById("bjlxindex");
      var myChart = echarts.init(chartDom);
      var option;
      let max = Math.max(...this.bjlxChartData.eventCount)
      var maxArr = []
      for (var i = 0; i < this.bjlxChartData.eventCount.length; i++) {
        maxArr.push(max)
      }
      option = {
        grid: {
          left: "3%",
          top: "5%",
          right: "3%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            show: false,
          },
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "10",
            axisLabel: {
              inside:true,
              textStyle: {
                color: "white",
                fontSize: echartfontSize(0.16),
                verticalAlign: "bottom",
              align: "left",
              padding: [0,0,10,0]
              },
              formatter: function (value) {
                console.log(value);
                return `{warnValue|}{value|${value}}`;
              },

              rich: {
                //这里的rich，下面有解释
                warnValue: {
                  //这里的warnValue对应上面的标签名
                  height: 60,
                  width: 80,
                  align: "left",
                  color: "white",
                  backgroundColor: {
                    image: tick, //这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  },
                },
                value: {
                  color: "white",
                  fontSize: echartfontSize(0.16),
                }
              },
            },
            data: this.bjlxChartData.areaName,
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "white",
                fontSize: echartfontSize(0.18),
                // verticalAlign: "bottom",
                // 可根据padding调整右侧y轴和柱状图之间的距离
                padding: [0,-40,20,10],
                align: "right",
              },
              formatter: function (value, index) {
                return `{value|${value}件}\n{img|}`;
              },
              rich: {
                //这里的rich，下面有解释
                img: {
                  //这里的warnValue对应上面的标签名
                  height: echartfontSize(0.02),
                  width: echartfontSize(0.2),
                  align: "right",
                  color: "white",
                  backgroundColor: {
                    image: qysjbottom, //这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  },
                },
                value: {
                  align: "right",
                  color: "white",
                  marginLeft: 100,
                  fontSize: echartfontSize(0.16),
                }
              },
            },
            data: this.bjlxChartData.eventCount,
          },
          {
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
            data: [],
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            stack: "圆",
            yAxisIndex: 0,
            // data: data,
            data: this.bjlxChartData.eventCount,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#054B60", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00FCFF", // 100% 处的颜色
                    },
                  ],
                },
                barBorderRadius: 10,
              },
            },
            z: 2,
          },
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABC1BMVEUA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7QA/7SO/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/86O/85K/8IT/7gM/7YP/7cs/7wB/7QH/7Vl/8cZ/7kA/7QH/7WJ/80C/7Qk/7st/7wM/7aO/84g/7oI/7Y8/78N/7aO/84E/7UA/7Q1/76O/84q/7wB/7QN/7Yp/7wD/7UB/7QR/7ct/7wa/7kg/7pr/8iO/86O/86O/86O/84A/7QAAAAmnbE7AAAAV3RSTlMAAwsQFBcYFhINBgkaDgIHGREFDwEKBAwIFRMHDRETEg8KAgsXGhkQAxUJBRgELnSThkT0riNl/rIb4U5CkhRUpTeIBs77OwFH9opI1PF6Q2NTIQgWDA6QHRcgAAAAAWJLR0RY7bXEjgAAAAd0SU1FB+ULEBQKJQdQcX4AAAITSURBVDjLbVRnY5swEBVmCMxhC2MgdrwdPJK46d5N2roJ3Stt/f//SXUnbFbeF3THk+54pwdjBWgN3TAtk9tOk90N14AcpteqM9ocQPiNptbSOm6AgdMtM7o6AA8LyaYtE1GR0jJAxJVtTQ7iqEDpgdmpVe/6RVIfuKZWx4PhaDyZzlQUgNhvdcBUlPlJorBYrijhA1cdRAJIjtU6ybE4pXIcPOLYEODj7DwpYUCNg8ASHRAo1+okqeBUVQuoMTpmVKUkiw2dYMmOLMDej7MX9y7uP3iYrce4twdtFoFZOObi0U7i8RMV4cd5smsXfLmaqeTTZzvCcxXOcY7Ql+I4h1IvXu4yvKJ4iPdF1gmgIVdTyr3eU3ZvKL5EiUAwHUJUmHJXB85bitfYKUDpnHcHznuKRzhvsGQ/qPZWNfkho1zfULjESQGX32XLVbqg5MdPivM5Vxrfa/IsiaHKfvkqGd++Z0KnNAb53VwKydhmP4EfP3/9zpYT3GzipXBIRDapzet8RhLiGDQBeLfTy+pIt7jVgBgfulQbx7EuU27JczR2qYBFErF0WaD8OSPjWqQwkYXy7na8Z8xTuqqGKqHuv5UZfHb7999gusnMI/2SO1o6Kaz5K+qBVXRqAGBrZQfGomJmFgoQeu7VVmwC+BV3M83HP4oeu2039PAvw49YHZFnHX4/wr6LQeg0Ar/v63G7VOU/Y9Ve2lDCOJ4AAAAASUVORK5CYII=",
            symbolSize: [40, 40],
            symbolPosition: "end",
            symbolOffset: [20, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
            data: this.bjlxChartData.eventCount,
          },
          {
              name: "背景",
              type: "bar",
              barWidth: 8,
              barGap: "-100%",
              data: maxArr,
              itemStyle: {
                normal: {
                  color: "rgba(28, 128, 213, 0.19)",
                
                  barBorderRadius: 5
                }
              }
            }
        ],
      };

      myChart.setOption(option);
      // window.addEventListener("resize", function () {
      //   myChart.resize();
      // });
    },
  },
};
</script>
<style scoped>
#bjlxindex {
  width: 100%;
  height: 100%;
}
</style>