echarts进度条

<template>
  <div :id="id" class="main" :style="{ width: width, height: height }" :ref="id"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "roseChart",
  data() {
    return {
      myEchart: null,
      name: "苹果",
      value: 0,
      value1: 10
    };
  },
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "70px"
    }, // 数据（数组）
    typeAnalysisData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: "roseChart"
    } // 是否显示提示（方框）
  },
  methods: {
    drawChart() {
      let timer = null;
      timer = setTimeout(() => {
        if (
          this.myEchart != null &&
          this.myEchart != "" &&
          this.myEchart != undefined
        ) {
          this.myEchart.dispose(); //销毁
        }
        if (!this.$refs[this.id]) return;
        this.myEchart = echarts.init(this.$refs[this.id]);
        let option = {
          // backgroundColor: "#1B232E",
          grid: {
            left: "10px",
            right: "10px",
            bottom: "40px"
          },
          xAxis: {
            show: false,
            type: "value",
            boundaryGap: [0, 0],
            max: 100
          },
          yAxis: {
            type: "category",
            axisTick: "none",
            axisLine: "none",
            show: true,
            position: "right",
            axisLabel: {
              // 后面文字位置
              padding: [-35, 5, 0, 0],
              align: "right",
              verticalAlign: "top",
              textStyle: {
                color: "#fff",
                fontSize: 12
              },
              formatter: this.value1 + "家"
            },
            data: [this.value]
          },
          series: [
            {
              // 进度
              data: [{ name: this.name, value: this.value }],
              name: this.name,
              type: "bar",
              barWidth: "24px",
              showBackground: true,
              backgroundStyle: {
                borderRadius: 2,
                // 整个进度条颜色
                // color: "#252F3D",
                // borderColor: "#252F3D",
                // borderWidth:5,
                opacity: 1
              },
              itemStyle: {
                color: {
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2AA9D9" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2AA9D9"
                    }
                  ]
                },
                borderRadius: 2
              },
              label: {
                show: true,
                position: "insideTopLeft",
                fontSize: 12,
                fontFamily: "Source Han Sans CN-Regular",
                fontWeight: 400,
                color: "#FFFFFF",
                // 前面文字位置
                padding: [-25, 0, 0, 0],
                formatter: "{b}"
              },
              emphasis: {
                disabled: true
              },
              markPoint: {
                symbol:
                  "image://data:image/png;base64,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",
                symbolSize: [30, 48],
                label: { show: false },
                symbolOffset: [0, 0],
                data: [{ name: "最大值", type: "max" }]
              }
            }
          ]
        };

        this.myEchart.setOption(option);
      }, 500);
    }
  },
  mounted() {
    this.drawChart();
    window.addEventListener("resize", this.drawChart);
  },
  watch: {
    typeAnalysisData: {
      handler(newName, oldName) {
        this.$nextTick(() => {
          this.drawChart();
          window.addEventListener("resize", this.drawChart);
        });
      },
      deep: true
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.drawChart);
  }
};
</script>
<style lang="scss" scoped>
</style>