【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决

1. 解决前

2.解决后

3.代码

function makePie(id, title, name, data, show) {if (!show) {show = false;}var myChart = echarts.init(document.getElementById(id));var option = {title: {show:false,text: title,top: 2,left: '20',textStyle: {fontSize: 14,color:'#767676',fontWeight:600,fontFamily:'Microsoft Yahei'},},tooltip: {trigger: 'item',textStyle: {fontSize: 12,fontFamily:'Microsoft Yahei'},formatter: function (params) {return params.data.name + ":<br/>" + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";}},legend: {// type: 'scroll',orient:'vertical',top:80,y:'middle',height:'60%',right: getValueFromJson(data, 'name').length > 6 ? 0 : 5,textStyle: {fontSize: 12,color:'#848484'},icon:'circle',data: getValueFromJson(data, 'name')},series: [{name: name,x: 'left',  y: 'center', type: 'pie',center:['50%', '60%'],//radius: getValueFromJson(data, 'name').length > 6 ?  ['40%', '84px'] :  ['46%','90px'],radius: '55%',avoidLabelOverlap: true,minAngle: 5,label: {align: 'left',normal: {show: show,lineHeight:30,textStyle: {fontFamily:'Microsoft Yahei'},formatter(v) {let text = Math.round(v.percent)+'%' + '' + v.nameif(text.length <= 8){return text;}else if(text.length > 8 && text.length <= 16){return text = `${text.slice(0,8)}\n${text.slice(8)}`}else if(text.length > 16 && text.length <= 24){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`}else if(text.length > 24 && text.length <= 30){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`}else if(text.length > 30){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`}},rich: {  color1: {  color: '#000000',fontSize: 14,lineHeight:12,fontWeight:600},  color2: {  color: '#848484'  ,fontSize: 12,}  },  }, emphasis: {show: !show,textStyle: {fontSize: 12,color:'#000000',fontFamily:'Microsoft Yahei'},formatter: function (params) {return params.data.name + ": " + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";}}},labelLine:{length:10,length2:100,lineStyle:{color:'#848484',}},data: data,color:getValueFromJson(data, 'color'),}]};myChart.setOption(option);
}

4.主要代码段：

series: [{name: name,x: 'left',  y: 'center', type: 'pie',center:['50%', '60%'],//radius: getValueFromJson(data, 'name').length > 6 ?  ['40%', '84px'] :  ['46%','90px'],radius: '55%',avoidLabelOverlap: true,minAngle: 5,label: {align: 'left',normal: {show: show,lineHeight:30,textStyle: {fontFamily:'Microsoft Yahei'},formatter(v) {//此方法为核心代码，解决问题let text = Math.round(v.percent)+'%' + '' + v.nameif(text.length <= 8){return text;}else if(text.length > 8 && text.length <= 16){return text = `${text.slice(0,8)}\n${text.slice(8)}`}else if(text.length > 16 && text.length <= 24){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`}else if(text.length > 24 && text.length <= 30){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`}else if(text.length > 30){return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`}},rich: {  color1: {  color: '#000000',fontSize: 14,lineHeight:12,fontWeight:600},  color2: {  color: '#848484'  ,fontSize: 12,}  },  }, emphasis: {show: !show,textStyle: {fontSize: 12,color:'#000000',fontFamily:'Microsoft Yahei'},formatter: function (params) {return params.data.name + ": " + fmoneyf(params.data.value, 0) + "(" + params.percent + "%)";}}},

转载自：https://blog.csdn.net/liangayang/article/details/84792294

【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决相关推荐

echarts饼状图数据过多时，数据叠加(问题篇)
1.问题如下图所示 2.解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数selected: {}, // 决定图表中显示的个数处理后台取到的数据 // ...
echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
使用echarts画饼状图，设置饼状图颜色
前言: 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. 图表在容器中可以调整位置,让图表显示的更完整. 今日分享重点:画饼状图. 1.引入相关js <script type=& ...
Echarts动态饼状图，柱形图，关系图绘制
1 饼状图代码(动态) //echarts图var chrNumber =[];var chrnum=[];for (var i=0;i<data.chrNum.length;i++){//通过 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
Echarts百分比饼状图
百分比饼状图两个关键点 1.设置最大值 const maxVal = 100 2.data里两份数据 data: [{value: val, // 原始数据不做展示},{value: maxVal - ...

【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决

【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决相关推荐

最新文章

热门文章