环形圆角图echarts

本文主要是介绍环形圆角图echarts，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

社区看了很多，无法用饼图来实现，在官方 Issues 看到类似问题，官方已解决，使用极坐标来实现。

option = {     title: {       text: '95.08%',       textStyle: {         color: '#333',         fontSize: 16       },       subtext: '100万',       subtextStyle: {         color: '#333',         fontSize:16       },       itemGap: 10, // 主副标题距离       left: 'center',       top: 'center'     },     angleAxis: {       max: 100, // 满分       clockwise: false, // 逆时针         // 隐藏刻度线       axisLine: {         show: false       },       axisTick: {         show: false       },       axisLabel: {         show: false       },       splitLine: {         show: false       }     },     radiusAxis: {       type: 'category',         // 隐藏刻度线       axisLine: {         show: false       },       axisTick: {         show: false       },       axisLabel: {         show: false       },       splitLine: {         show: false       }     },     polar: {       center: ['50%', '50%'],       radius: ['60%','100%'] //图形大小     },     series: [{       type: 'bar',       data: [{         name: '作文得分',         value: 75,         itemStyle: {           normal: {             color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{               offset: 0,               color: '#6BAAF9'             }, {               offset: 0.5,               color: '#6BAAF9'             },{               offset: 1,               color: '#1A59A8'             }])           }         },       }],       coordinateSystem: 'polar',       roundCap: true,       barWidth: 15,       barGap: '-100%', // 两环重叠       z: 2,     },{ // 灰色环         type: 'bar',         data: [{           value: 100,           itemStyle: {             color: '#E9F5FF',             shadowColor: 'rgba(1, 0, 0, 0.2)',             shadowBlur: 5,             shadowOffsetY: 2           }         }],         coordinateSystem: 'polar',         roundCap: true,         barWidth: 15,         barGap: '-100%', // 两环重叠         z: 1     }] } 此配置为我经国原文链接改造过后的图：  

 

 

 

 

原为链接：https://blog.csdn.net/z291493823/article/details/103502767?utm_medium=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecase&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecas 查看 demo https://gallery.echartsjs.com/editor.html?c=xuyO-o_wd
官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393 环形圆角图在线更改：https://www.makeapie.com/editor.html?c=xuyO-o_wd 更多作品：https://www.makeapie.com/explore.html?u=bd-1949357510&type=work#sort=rank~timeframe=all~author=all

这篇关于环形圆角图echarts的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！