echarts环形图

let dataValue=[
        {
          value: 30,
          name: '桥梁',
          percent: 0.25,
          color: 'rgba(248,95,94,1)',
          radius: ['75%', '80%'],
          center: ['22%', '50%'],
        },
        {
          value: 15,
          name: '隧道',
          percent: 0.25,
          color: 'rgba(243,185,71,1)',
          radius: ['65%', '70%'],
          center: ['22%', '50%'],
        },
        {
          value: 18,
          name: '路基',
          percent: 0.25,
          color: 'rgba(243,185,71,1)',
          radius: ['55%', '60%'],
          center: ['22%', '50%'],
        },
        {
          value: 12,
          name: '深路堑边坡',
          percent: 0.25,
          color: 'rgba(3,151,255,1)',
          radius: ['45%', '50%'],
          center: ['22%', '50%'],
        },
        {
          value: 10,
          name: '既有线',
          percent: 0.25,
          color: 'rgba(3,249,245,1)',
          radius: ['35%', '40%'],
          center: ['22%', '50%'],
        },
      ]
      let a = dataValue.map((t) => {
        t.value = parseInt(t.value);
        return t;
      });
      const sum = a.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const gapData = {
        name: "",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      let total = 0;
      dataValue.forEach((item) => {
        total += parseInt(item.value);
      });
       for (let i = 0; i < dataValue.length; i++) {
        // 第一圈数据
        // pieData1.push({
        //   ...this.dataValue[i],
        // });
        pieData1.push({
          name: dataValue[i].name,
          value: dataValue[i].value,
          itemStyle: {
            color: dataValue[i].color,
          },
        });
      }
option = {
   backgroundColor: "#031a40",
  tooltip: {
          confine: true,
          textStyle: {
            fontSize: 13, // 字体大小
          },
        },
        legend: {
          show: true,
          //   orient: "vertical",
          bottom: "10%",
          icon: "circle",
          width: "75%",
          //   top: "middle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 18,
          data: dataValue.map((item) => item.name),
          textStyle: {
            color: "#fff",
            fontSize: 13,
            letterSpacing: 10,
            rich: {
              a: {
                fontSize: 14,
                width: "auto",
                marginLeft: 10,
                padding: [0, 0, 0, 5],
                // height: 30,
              },
              b: {
                fontSize: 14,
                width: 40,
                padding: [0, 0, 0, 15],
                color: "#fff",
              },
            },
          },
          formatter: (param) => {
            var str = "";
            console.log();
            dataValue.forEach((item, index) => {
              if (item.name == param) {
                str = "{a|" + item.name + "}" + "{b|" + item.value + "}";
                return;
              }
            });
            return str;
          },
        },
        // grid: {
        //   show: false,
        //   left: "0",
        //   right: "0",
        //   bottom: "1%",
        //   top: "0%",
        //   containLabel: true,
        // },
        // title: {
        //   //圆环中间内容
        //   text: "184",
        //   subtext: "类型总数",
        //   left: "21%",
        //   top: "43%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 20,
        //     align: "center",
        //   },
        //   subtextStyle: {
        //     fontSize: 15,
        //     fontWeight: "500",
        //     align: "center",
        //     color: "#fff",
        //     // marginTop: "-10px",
        //   },
        // },
        color: ["rgba(0,150,255,1)", "rgba(0,204,255,2)"],
        series: [
          {
            name: "",
            avoidLabelOverlap: true, //防止标签重叠
            type: "pie",
            radius: ["60%", "40%"], //大小
            center: ["50%", "36%"], //位置
            data: pieData1,
            label: {
              show: false,
              formatter: function (params) {},
              textStyle: {
                fontSize: "18",
                fontWeight: "bold",
                color: "#fff",
              },
            },
            emphasis: {
              show: false,
            },
          },
          {
            type: "gauge",
            zlevel: 1,
            // z: 198,
            splitNumber: 70,
            radius: "39%",
            center: ["50%", "36%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                width: 3,
                color: "rgba(108,173,202,1)",
              },
            },
            data: [
              {
                value: 198,
                name: "测已断面",
                title: {
                  // 配置“家居总数”的样式
                  show: true,
                  fontSize: 18,
                  fontWeight: 700,
                  // fontFamily: fontFamily.fontFamily65W,
                  color: "rgba(128,255,255,1)",
                  offsetCenter: [0, "20%"],
                },
              },
            ],
            detail: {
              // 调节数字位置
              offsetCenter: [-2, -17],
              fontSize: 25,
              fontWeight: 700,
              // fontFamily: fontFamily.fontFamily95W,
              color: "rgba(128,255,255,1)",
            },
            pointer: {
              show: false,
            },
            // detail: {
            //   show: 0,
            // },
          },
        ],
 
};