echarts饼图显示百分比,和显示内容字体及大小

// 基于准备好的dom,初始化echarts实例
        var pieEchart = echarts.init(document.getElementById('pieEchart'));

         // 指定图表的配置项和数据
         var pieoption = {  
            title : {  
                text: '公里总里程',   
                x:'left',
                textStyle:{
                    color:'#FFFFFF',
                    fontSize:25
                }
            },  
            tooltip : {  
                trigger: 'item',  
                formatter: "{a} <br/>{b} : {c} KM"  
            },  
            legend: {  //设置小块标记
                orient : 'vertical',  
                x : 'left',  
                top:40,
                itemWidth:70,
                itemHeight:30,
                formatter: '{name}',
                textStyle:{
                    color: '#FFFFFF'
                },
                data:[{name:'高速50KM',icon:'rect'},{name:'一级150KM',icon:'rect'},{name:'二级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}]  }
            ,   
            calculable : true,  
            series : [  
                {  
                    name:'公里总里程',  
                    type:'pie',  
                    radius : '70%',//饼图的半径大小  
                    center: ['60%', '60%'],//饼图的位置 
                    label:{            //饼图图形上的文本颜色设置
                            normal:{
                                show:true,
                                position:'inner', //标签的位置
                                textStyle : {
                                    fontWeight : 300 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:'{d}%'  //设置百分比

                                
                            }
                        },
                    data:[  
                        {value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}}, //饼图图形颜色 
                        {value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},  
                        {value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}}, 
                        {value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
                        {value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
                    ]
                }  
            ]  
        };

            // 使用刚指定的配置项和数据显示图表。
            pieEchart.setOption(pieoption);

在这里插入图片描述

### 如何在 ECharts 环形上添加设置文字 要在 ECharts 的环形中实现文字显示,可以通过 `series` 配置项中的 `label` 自定义的 `formatter` 来控制文字的内容、样式以及布局。以下是具体的配置方法: #### 使用 `avoidLabelOverlap` 属性防止重叠 当环形的数据为零或者某些情况下可能会导致字体相互覆盖时,可以启用 `avoidLabelOverlap` 属性来自动调整标签的位置以避免重叠[^2]。 ```javascript series: [{ type: 'pie', radius: ['50%', '70%'], // 设置环形内外半径比例 avoidLabelOverlap: true, // 自动调整标签位置以防重叠 label: { normal: { show: true, position: 'inside', // 文本位于内部 formatter: '{d}%' // 显示百分比 } }, data: [ {value: 30, name: 'A'}, {value: 20, name: 'B'} ] }] ``` #### 添加中心文字并调整样式 如果希望在环形中央显示特定的文字(如标题),可以通过 `title` 组件配合 `textStyle` 进行定制化设计[^3]。下面是一个例子展示如何将文字放置到表中间区域,并且支持动态修改其颜色与大小。 ```javascript title: { text: '总览数据', // 中心大字描述 subtext: '详情见下表', // 副标题可选参数 left: 'center', // 水平居中对齐方式 top: '48%', // 距离顶部距离微调至合适高度 textStyle: { fontSize: 16, fontWeight: 'bold', color: '#333' // 字体颜色设定 } }, ``` #### 同时在外围显示额外信息 对于更复杂的场景需求而言,在外圈也增加一些辅助性的说明是非常常见的做法之一。这通常借助于扩展后的 `label.lineStyle` 或者单独绘制形元素达成目标效果如下所示代码片段所示范那样操作即可满足此类业务逻辑要求: ```javascript series: [{ ... labelLine: { normal: { length: 15, // 改变引导线长度 lineStyle: { width: 1, type: 'solid' } } }, label: { normal: { show: true, position: 'outside', // 外部标注 formatter: function (params) { return params.name + '\n' + params.value; // 新增换行符分隔名称数值 } } } }] ``` 以上就是关于如何利用Echart库创建带有丰富文本提示功能的圆形统计表的一些技巧分享啦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值