echarts环形图

 

<div class="piecharts" id="piecharts"></div>

 mounted() {
    this.piecharts = this.$echarts.init(document.getElementById("piecharts"));
    //图表缩放自适应
    window.addEventListener("resize", () => { 
      this.piecharts.resize();
    });
},

methods: {
    initpiecharts() {
      this.piecharts.clear();
      this.piecharts.setOption({
        animationDuration: 3000,
        title: {
          text: this.Title,
          textStyle: {
            color: "#DBE2FF",
            fontSize: this.fontSize(0.16),
          },
          top: this.fontSize(0.1),
          left: this.fontSize(0.1),
        },
        angleAxis: {
          max:
            this.piedata[0].Num +
            this.piedata[1].Num +
            this.piedata[2].Num +
            this.piedata[3].Num,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          z: 10,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        polar: {
          radius: [50, "95%"],
          center: ["50%", "57%"],
        },
        series: [
          {
            type: "bar",
            barGap: this.fontSize(0.015),
            itemStyle: {
              color: "#F67246",
            },
            barCategoryGap: "-100%",
            barWidth: this.fontSize(0.06),
            showBackground: true,
            backgroundStyle: {
              color: "#151857",
            },
            data: [this.piedata[0].Num],
            coordinateSystem: "polar",
            name: "",
            emphasis: {
              focus: "series",
            },
          },
          {
            type: "bar",
            barGap: this.fontSize(0.015),
            itemStyle: {
              color: "#FAC837",
            },
            barCategoryGap: "-100%",
            barWidth: this.fontSize(0.06),
            showBackground: true,
            backgroundStyle: {
              color: "#151857",
            },
            data: [this.piedata[1].Num],
            coordinateSystem: "polar",
            name: "",
            emphasis: {
              focus: "series",
            },
          },
          {
            type: "bar",
            barGap: this.fontSize(0.015),
            itemStyle: {
              color: "#03DFEA",
            },
            barCategoryGap: "-100%",
            barWidth: this.fontSize(0.06),
            showBackground: true,
            backgroundStyle: {
              color: "#151857",
            },
            data: [this.piedata[2].Num],
            coordinateSystem: "polar",
            name: "",
            emphasis: {
              focus: "series",
            },
          },
          {
            type: "bar",
            barGap: this.fontSize(0.015),
            itemStyle: {
              color: "#028EEE",
            },
            barCategoryGap: "-100%",
            barWidth: this.fontSize(0.06),
            showBackground: true,
            backgroundStyle: {
              color: "#151857",
            },
            data: [this.piedata[3].Num],
            coordinateSystem: "polar",
            name: "",
            emphasis: {
              focus: "series",
            },
          },
        ],
      });
    },
//echats图中字体自适应
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    },
}