echarts 饼图标签文字过多重叠
series : [
{
name: '访问来源',
type: 'pie',
radius : '45%',
label: {
normal: {
// formatter: ' {b|{b}:} {per|{c}%} ',
formatter:get,
textStyle:{ //这只是为了让文字居中而已
align:"left", //水平对齐方式可选left,right,center
// baseline:"top", //垂直对齐方式可选top,bottom,middle
fontSize : 8,
},
var get=function(e){
var newStr=" ";
var start,end;
var name_len=e.name.length;
// alert(e.value); //每个内容名称的长度
var max_name=4; //每行最多显示的字数
var new_row = Math.ceil(name_len / max_name); // 最多能显示几行,向上取整比如2.1就是3行
if(name_len>max_name){ //如果长度大于每行最多显示的字数
for(var i=0;i<new_row;i++){ //循环次数就是行数
var old=''; //每次截取的字符
start=i*max_name; //截取的起点
end=start+max_name; //截取的终点
if(i==new_row-1){ //最后一行就不换行了
old=e.name.substring(start);
}else{
old=e.name.substring(start,end)+"\n";
}
newStr+=old; //拼接字符串
}
}else{ //如果小于每行最多显示的字数就返回原来的字符串
newStr=e.name;
}
return newStr+':\n'+e.value+'%\n'; //不想重叠就是在返回字符串的最后加“\n”
}
相关文章链接:点击打开链接,点击打开链接
echarts x轴显示不完:相关文章1,相关文章2
<div class="pieBoxHalf" style="width:60%;">
<div class="pieTitle">各用水合作组织交易概览</div>
<div class="pieIdBox" id="rightBar"></div>
</div>
var myChart4 = echarts.init(document.getElementById('rightBar'));
function option4(x,title,buySumDealNumber,initWaterTotal,sellSumDealNumber) {
var option4 = {
title: {
/* text: "知识分类统计",*/
textStyle: {
color: "#436EEE",
fontSize: 17
}
},
//鼠标触发提示数量
tooltip: {
trigger: "axis",
formatter: function(params) {
var result = '';
result += params[0].name+"<br/>";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + ((item.value < 0)?(item.value * -1):(item.value)) +"万m³</br>";
});
return result;
}
},
legend: {
data:title,
formatter:function (params) {
console.info(JSON.stringify(params));
var result = params.substring(0,2);
if(result == "初始"){
result = "水权";
}
return result;
}
},
//grid:{y2:240},//图形高度
//x轴显示
xAxis: {
data: x,
splitLine:{
show:false
},
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
textStyle:{
fontSize:10 // 让字体变大
}
// ,
// formatter:function (params) {
// var index = params.lastIndexOf("用水合作组织");
// console.info(index);
// var result = params.substring(0,index);
// return result;
// }
}
},
//y轴显示
yAxis: {
splitLine:{
show:false
}
},
series: [
{
name: "初始水权",
type: "bar",
stack: "业务",
data: initWaterTotal,
barWidth : 14,
itemStyle:{
normal:{color:"#42A7DD"}
}
},
{
name: "买入水权",
type: "bar",
stack: "业务",
data: buySumDealNumber,
barWidth : 14,
itemStyle:{
normal:{color:"#19BEC3"}//柱状图颜色
}
},
{
name: "卖出水权",
type: "bar",
stack: "业务",
data: sellSumDealNumber,
barWidth : 14,
itemStyle:{color:'#FE6988'}
},
]
};
myChart4.setOption(option4);
}