前端实现模拟彩虹桥：echarts仪表盘 =＞ 多层级仪表盘进度 -彩虹桥 - 自定义添加圆环样式和仪表进度比例展示

机缘

最近在项目开发中遇到一个，觉得还蛮有意思的设计，实现类似彩虹🌈一样的多层级的进度展示，在这记录一下（注意：下方有调试入口）

收获

起初拿到设计稿想到的是使用Ant Design中的进度条实现，但是吧，圆形的，还多层级，好想没有遇到过这种。处于之前搞过一个 “echarts水球图”动态波纹百分比数据显示，于是就想着通过eChart的仪表盘改造一下子，具体效果如下：

看看，这种带进度比例的echarts是不是很像个彩虹桥，不同的颜色不同的层级代表着不动的数据项进度，清晰又直观

---

进入正题

废话不多说，直接上主体代码（完整代码及效果在Echarts Demo中 ），希望对你有帮助：

      res.series.push({
         type: 'gauge',
         radius: `${radius}%`, // 圆角半径
         startAngle: 180, // 起始角度
         endAngle: 0, 
         min: 0,
         max: 100, // 上限，因做进度条使用，满足100%
         splitNumber: 100,
         center: ['50%', '75%'],
         itemStyle: {
            normal: {
               color, // 线条颜色a
            },
         },
         progress: { // 进度条填充
            show: true,
            roundCap: true,
            width: 15,
         },
         pointer: {
            show: false,
         },
         axisLine: { // 进度条背景轨道
            roundCap: true,
            lineStyle: {
               width: 15,
            },
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         title: {
            show: false,
         },
         detail: {
            show: false,
         },
         data: [
            { value }, // 当前项数据值
         ],
      });

考虑层级，通过遍历处理配置数据。具体可以直接去调试地址：Echarts Demo集 测试参考

---

Tips

具体的一些配置参数根据自己的项目需求，可以去echarts官网查阅

往期echarts相关文章：

• Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
• echarts水球图-动态波纹百分比数据显示
• 水球型比例图
• 彩虹桥 - 多层级仪表盘进度