echarts进度图组件

先看样式

<template>
  <div :id="chartId" class="box"></div>
</template>

<script>
export default {
  props: {
    // 盒子id
    chartId: {
      type: String,
      default: "",
      require: true,
    },
    // 数据源
    sourceData: {
      type: Object,
      default: () => {
        return {
          xdata: [],
          ydata: [],
          result: [],
        };
      },
    },
    // 特殊配置项
    options: {
      type: Object,
      default: () => {},
    },
    // 图表颜色
    colorList: {
      type: Array,
      default: () => [],
    },
    // x轴是否可以点击
    isXAxisClick: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(
        document.getElementById(this.chartId)
      );
      let itemStyle;
      var colorList = ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"];

      var datas = [
        {
          value: 9000,
          name: "答题服务",
        },
        {
          value: 8000,
          name: "文档服务",
        },
        {
          value: 7000,
          name: "教育服务",
        },
        {
          value: 6000,
          name: "就业服务",
        },
        {
          value: 5000,
          name: "文化服务",
        },
      ];
      let salvProValue = [9000, 8000, 7000, 6000, 5000];
      let salvProName = [
        "答题服务",
        "文档服务",
        "教育服务",
        "就业服务",
        "文化服务",
      ];
      var salvProMax = [];
      let bfSalvProValue = salvProValue;
      let max = bfSalvProValue
        .sort((a, b) => {
          return a - b;
        })
        .reverse()[0];
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(max + 150);
      }
      let option = {
        grid: {
          containLabel: true,
          left: "3%",
          right: "3%",
          bottom: "-3%",
          top: "7%",
          height: "88%",
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },

        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              margin: 10,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(33, 148, 206, 0.7)",
              },
            },
            data: salvProName,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            data: datas.map((item) => item.value),
            axisLabel: {
              show: true,
              fontSize: 14,
              margin: 10,
              color: "#fff",
              formatter: "{value}" + "件",
            },
          },
        ],
        series: [
          {
            z: 2,
            name: "value",
            type: "bar",
            barWidth: 8,
            zlevel: 1,
            data: datas.map((item, i) => {
              console.log(i, "-=-==-=-");
              let colors;
              if (i == 0) {
                colors = new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0, //
                  [
                    { offset: 1, color: "#0088FF" }, //
                    { offset: 0, color: "#47D1FF" }, //
                  ]
                );
              } else if (i == 1) {
                colors = new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0, //
                  [
                    { offset: 1, color: "#003FFF" }, //
                    { offset: 0, color: "#477CFF" }, //
                  ]
                );
              } else if (i == 2) {
                colors = new this.$echarts.graphic.LinearGradient(
                  1,
                  1,
                  0,
                  0, //
                  [
                    { offset: 1, color: "#00DAFF" }, //
                    { offset: 0, color: "#47FFD0" }, //
                  ]
                );
              } else if (i == 3) {
                colors = new this.$echarts.graphic.LinearGradient(
                  1,
                  1,
                  0,
                  0, //
                  [
                    { offset: 1, color: "#00FF48" }, //
                    { offset: 0, color: "#47FF64" }, //
                  ]
                );
              } else if (i == 4) {
                colors = new this.$echarts.graphic.LinearGradient(
                  1,
                  1,
                  0,
                  0, //
                  [
                    { offset: 1, color: "#FF6900" }, //
                    { offset: 0, color: "#FFFC47" }, //
                  ]
                );
              }
              itemStyle = {
                color: colors,
              };
              return {
                value: item.value,
                itemStyle: itemStyle,
              };
            }),
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: [0, "-20px"],
                textStyle: {
                  fontSize: 12,
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            yAxisIndex: 1,
            barGap: "-100%",
            data: salvProMax,
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,0.2)",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };

      this.chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        this.chartInstance.resize();
      });
      // const chartObserver = new ResizeObserver(() => {
      //   this.chartInstance.resize();
      // });
      // // 监听当前图表容器大小变化的时候resize
      // chartObserver.observe(document.getElementById(this.chartId));
      this.chartInstance.on("click", "xAxis.category", (param) => {
        this.isXAxisClick && this.$emit("xClick", param);
      });
    },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      // 此处的1920 为设计稿的宽度
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
  },
};
</script>

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