首页 前端知识 Echarts环形图添加指示文字

Echarts环形图添加指示文字

2024-08-18 22:08:52 前端知识 前端哥 47 697 我要收藏

如图所示:
如果圆环图数据为0时字体重叠,只需要将series中avoidLabelOverlap属性设置为true即可

Smiley face

代码如下:

var dataDept = data[0];
                    var dataDeptName = new Array();
                    var dataDeptNum = new Array();
                    for (var i = 0; i < dataDept.length; i++) {
                        dataDeptName[i] = dataDept[i].FNAME;
                        dataDeptNum[i] = { value: dataDept[i].FCOUNT, name: dataDept[i].FNAME };
                    }
                    var departmentReportChart = echarts.init(document.getElementById("departmentReportChart")),
                        options = {
                            title: {
                                text: "科室填报例数统计TOP10(" + year + ")",
                                textStyle: {
                                    color: "#2c2c2c",
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            },
                            tooltip: {
                                trigger: "item",
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            //lable中添加指示文字
                            label: {
                                alignTo: 'edge',
                                formatter: "{b}: {c} ({d}%)",
                                color: 'black',
                                minMargin: 5,
                                edgeDistance: 10,
                                lineHeight: 25,
                                rich: {
                                    // 调整标签样式
                                    b: {
                                        fontSize: '0.1rem',
                                        color: '#fff',
                                        fontWeight: 700
                                    },
                                    a: {
                                        fontSize: '0.07rem'
                                    }
                                }
                            },
                            //legend: {
                            //    orient: 'horizontal',
                            //    x: 'center',
                            //    y: 'bottom',
                            //    data: dataDeptName
                            //},
                            series: [
                                {
                                    name: '科室',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'outside'
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                fontSize: '16',
                                                fontWeight: 'bold'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: true,
                                            length: 20,
                                            length2: 20,
                                            lineStyle: {
                                                color: '#333'
                                            }
                                        }
                                    },
                                    data: dataDeptNum
                                }
                            ]
                        };
                    departmentReportChart.setOption(options);
                    window.onresize = function () {
                        departmentReportChart.resize();//科室填报例数图表
                    }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16155.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

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