Echarts栅格进度条装饰实现

本文主要是介绍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"/>

这篇关于Echarts栅格进度条装饰实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---