首页 前端知识 Echarts环形饼状图设置内外边框

Echarts环形饼状图设置内外边框

2024-03-20 11:03:51 前端知识 前端哥 93 269 我要收藏

上班快一个月了,最近再写echarts的项目,亚历山大啊

记录一下饼状图设置内外边框的代码

series: [
                {
                    name: '项目分数',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: true
                    },
                    data: [
                        {value: 335, name: '970分以上'},
                        {value: 310, name: '950-970分'},
                        {value: 234, name: '900-950分'},
                        {value: 135, name: '900分以下'},
                    ]
                },
                {
                    name: '外边框',
                    type: 'pie',
                    clockWise: false,
                    radius: ['74%', '74%'],//边框大小
                    center: ['50%', '50%'],//边框位置
                    data: [{
                        value: 10,
                        itemStyle: {
                            normal: {
                                borderWidth: 8,//设置边框粗细
                                borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
                            }
                        }
                    }]
                },
            ]

此时还需要把指示线取消

labelLine:{  
   normal:{  
       length:45, 
       length2:45,
       show: false    // 隐藏所有指示线
   }  
},

效果图

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3994.html
标签
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!