标签：圆角 false show color type 环形 https com 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

标签：圆角,false,show,color,type,环形,https,com,echarts
来源： https://www.cnblogs.com/MDGE/p/14690753.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。