Echarts环形进度条使用二（修改部分）

最新推荐文章于 2025-02-10 08:00:00 发布

sz_09

最新推荐文章于 2025-02-10 08:00:00 发布

阅读量9.3k

点赞数 1

分类专栏： echar

本文链接：https://blog.youkuaiyun.com/sz_09/article/details/80624886

版权

echar 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何定制Echarts的环形进度条，包括修改进度条的颜色、字体大小以及消除鼠标悬停时的放大效果。提供了相关参考资料链接，帮助读者实现个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可参考https://blog.youkuaiyun.com/zhalcie2011/article/details/55808145

///

一】修改进度条颜色

参考：https://jingyan.baidu.com/article/7f766dafff9b374101e1d093.html

二】修改进度条中字体大小

参考：https://segmentfault.com/q/1010000010552930

参考：http://gallery.echartsjs.com/editor.html?c=xSkT-YuIAl

改为

三】修改环形图鼠标移上取消放大效果

例如：

修改部分：

参考：https://segmentfault.com/q/1010000007740451

 hoverAnimation:false,//改为false加到series[{hoverAnimation:false,}]中
series : [
                {
                    name:'比例',
                    type:'pie',
                    hoverAnimation:false,
                    center : ['50%', '50%'],
                    radius : ['50px', '55px'],
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : false,
                                position : 'center',
                                textStyle : {
                                    fontSize : '18',
                                    fontWeight : 'bold'
                                }
                            }
                        }
                    },
                    data:[
                        {value:percent, name:percent*100+"%"},
                        {value:(1-percent), name:''}
                    ]
                }