echarts实现酷炫圆环，伪渐变

直接上代码

HTML

<div id="chart1" style="width: 160px; height: 160px"></div>

JS

const chart1 = document.getElementById("chart1");
      const myChart1 = echarts.init(chart1);
      const option1 = getConfig(80, "副标题");
      myChart1.setOption(option1);

      function getConfig(data = 80, text) {
        const option = {
          title: {
            text: `{a|${data}}%\n {b|${text}}`,
            x: "center",
            y: "center",
            textStyle: {
              color: "#fff",
              fontSize: 10,
              rich: {
                a: {
                  fontSize: 18,
                  color: "#fff",
                },
                b: {
                  fontSize: 8,
                  color: "#fff",
                  padding: [0, 0, 4, 0],
                },
              },
            },
          },
          series: [
            {
              type: "pie",
              name: "外层描边底环",
              radius: ["65%", "66%"],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  color: "#98B8FF",
                },
              },
              label: {
                show: false,
              },
              data: [100],
            },
            {
              type: "pie",
              name: "外层描边",
              radius: ["63%", "66%"],
              hoverAnimation: false,
              clockWise: false,
              label: {
                show: false,
              },
              data: [
                { value: 25, itemStyle: { color: "transparent" } },
                { value: 25, itemStyle: { color: "#739FFF" } },
                { value: 25, itemStyle: { color: "transparent" } },
                { value: 25, itemStyle: { color: "#739FFF" } },
              ],
            },

            {
              type: "gauge",
              radius: "53%",
              clockwise: false,
              startAngle: "0",
              endAngle: "359.9999",
              splitNumber: 9,
              detail: {
                offsetCenter: [0, -20],
                formatter: " ",
              },
              pointer: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: [
                    [0.1, "#235AD8"],
                    [0.22, "#4377ed"],
                    [0.34, "#6494fe"],
                    [0.45, "#8cb1fe"],
                    [
                      1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: "#8cb1fe",
                        },
                        {
                          offset: 1,
                          color: "#E8F0FF",
                        },
                      ]),
                    ],
                  ],
                  width: 100,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                  color: "#fff",
                  width: 6,
                },
              },
              axisLabel: {
                show: false,
              },
            },
            {
              type: "pie",
              name: "内层细圆环",
              radius: ["41%", "45%"],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                normal: {
                  color: "#fff",
                },
              },
              label: {
                show: false,
              },
              data: [100],
            },
            {
              type: "pie",
              name: "内层环",
              radius: [0, "41%"],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#235AD8", // 100% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#6695FF", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#A9C4FA", // 0% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        };
        return option;
      }