echarts仪表盘 => 多层级仪表盘进度 -彩虹桥 :自定义添加圆环样式和仪表进度比例展示

机缘

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

收获

起初拿到设计稿想到的是使用Ant Design中的进度条实现,但是吧,圆形的,还多层级,好想没有遇到过这种。处于之前搞过一个 “echarts水球图”动态波纹百分比数据显示,于是就想着通过eChart的仪表盘改造一下子,具体效果如下:
echarts仪表盘 => 多层级仪表盘进度 -彩虹桥 :自定义添加圆环样式和仪表进度比例展示_第1张图片

看看,这种带进度比例的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水球图-动态波纹百分比数据显示
  • 水球型比例图
  • 彩虹桥 - 多层级仪表盘进度

你可能感兴趣的:(ECharts经验分享,echarts,前端,javascript)