Echarts栅格进度条装饰实现

如下图，如果你的业务需要这么一个饼图，你单纯借助echarts是实现不了如图效果的，你需要借助dom操作，合svg的配合才能实现。

首先饼图部分结束echarts,实现以及通过配置实现你想要的效果。

中间的文字百分比计算需要自己计算，然后通过echarts的mouseover事件经过不同色块，切换计算即可。

getInstance()?.on("mouseover", (params: any) => {
      // console.log(params, "params");
      if (params.componentSubType === "pie") {
        state.centerData = params.data;
        state.percent = parseFloat(params.data.value / state.total);
      }
});

这里要注意下，echarts的配置，要讲饼图放置正中间。（ center: ["50%", "50%"] ）

这样你利用布局可以讲中间的dom圆圈也适配着放在正中间，dom圆圈宽高以echarts的高度适配。

第二，就是如何实现这个渐进式的栅格进度条。这个我们要结束svg做一个vue3组件，也是按照当前echarts的高度适配。

至于svg怎么实现，可参考svg相关知识点。

我这里已经封装了组件。

支持传递参数

const props = defineProps({
    rate: {
      type: Number,
      default: 0
    },
    bgRingColor: {
      type: String,
      default: "#25b489"
    },
    ringColor: {
      type: String,
      default: "#67C23A"
    },
    strokeLinecap: {
      type: String,
      default: "round"
    },
    strokeWidth: {
      type: Number,
      default: 20
    },
    part: {
      type: Number,
      default: 20
    },
    partGap: {
      type: Number,
      default: 12
    },
    showGradient: {
      type: Boolean,
      default: false
    },
    clockWise: {
      type: Boolean,
      default: true
    },
    gradient: {
      type: Object,
      default: () => {
        return {
          id: "svg-linear-gradient",
          x1: "0%",
          y1: "0%",
          x2: "0%",
          y2: "100%",
          colorStops: [
            {
              offset: "0%",
              color: "yellow"
            },
            {
              offset: "100%",
              color: "orange"
            }
          ]
        };
      }
    }
  });

最后该组件支持的效果有：

参考地址：

SVG绘制圆环进度条_svg 环形条七点-CSDN博客

在鼠标经过echarts色块的时候，可通过参数获取到对应参数后，给svg组件重新赋值，可动态实现进度效果。

<svgProcess
        :rate="state.percent"
        bg-ring-color="rgba(0,191,255, 0.2)"
        ring-color="#1cbd9c"
        :stroke-width="20"
        stroke-linecap="butt"
        :part="40"
        :part-gap="8"
        :show-gradient="true"
        :gradient="state.myGradient"
      />