当前位置：首页 > web >正文

Echart设置圆饼图pie中间文字排版

web 2025/8/23 9:32:38

效果展示

在这里插入图片描述

代码如下

option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item',formatter:  //关键代码function (data,index) { // 设置圆饼图中间文字排版var top =[]var tip=''data.data.items.forEach((item) => {var source = String(item.value).split(".");//按小数点分成2部分source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");//只将整数部分进行都好分割var source = source.join(",");//再将小数部分合并进来var it=item.name+':  '+source+'股'+ '<br/>'top.push(it)})let b= top.join('')if(top&&top.length>0){tip = '【前五大'+data.name+'】'+'<br/>'+b }else{tip = data.name+':'+data.value +'%'}return tip// 对应的名字和值},},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' ,items: [{"value": "1048","name": "Search1",},{"value": "948","name": "Search2",},{"value": "378","name": "Search3",},{"value": "158","name": "Search4",},]},{ value: 735, name: 'Direct',items: [{"value": "1048","name": "Direct1",},{"value": "948","name": "Direct2",},{"value": "378","name": "Direct3",},{"value": "158","name": "Direct4",},]},{ value: 580, name: 'Email' ,items: [{"value": "1048","name": "Email1",},{"value": "948","name": "Email2",},{"value": "378","name": "Email3",},{"value": "158","name": "Email4",},]},{ value: 484, name: 'Union Ads',items: [{"value": "1048","name": "Union1",},{"value": "948","name": "Union2",},{"value": "378","name": "Union3",},{"value": "158","name": "Union4",},] },{ value: 300, name: 'Video Ads',items: [{"value": "1048","name": "Video1",},{"value": "948","name": "Video2",},{"value": "378","name": "Video3",},{"value": "158","name": "Video4",},] }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};