ECharts 仪表盘（gauge） 改环形跑道 使用方法分享

ECharts 仪表盘（gauge） 改环形数据跑道 使用方法分享

官方原效果

这是ECharts的仪表盘，制作的多数据展示效果

好了开始干活！
先跳过简单的部分，相信大家都能搞定前面的几步，如有不会的小伙伴可留言哦！

直接进入重点

可以看出 每个类型数据的环形进度条（轴线）没有间隔 ，看上去很挤，空间感就很差
那么我们首先把进度条（轴线）的宽度设置稍微小一些

  axisLine: {
                lineStyle: {
                    width: 80,
                      color:[[1,'transparent']]  //‘transparent’轴线透明’
                  }
             }

这是官方文档的描述 官方文档传送门

回到实际使用
适度修改width的值

	lineStyle: {
                 width: 50,  //修改到50
                 color:[[1,'transparent']] 
               }

现在看上去就很多了，但是！各个进度条之间还是没有间隙啊，看上去还是让人感觉很挤，数据界限不够清晰
那么！

我们加上描边就会好很多（类似于给div加上border）

	itemStyle:{
            borderWidth:5, //设置border的宽度有多大
            borderColor:'#000819',
          }

这是官方文档的描述 官方文档传送门

直接上效果图！

搞定！ 收工