1.设置图表的位置；
grid:{
left:'0',
right:'0',
bottom:'0',
containLabel:ture
}
2.x轴文字限制，超出...
xAxis: {
triggerEvent: true,
type: 'category',
data: ['这是名称非常长的商品1', '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3', '短的商品4'],
axisLabel: {
formatter: function(value) {
var res = value;
if(res.length > 5) {
res = res.substring(0, 4) + "..";
}else{
res = value;
}
return res;
}
}
},
3.特殊样式的图表可以去echarts社区去查找实例
4.Echarts 解决饼图文字过长重叠的问题
下面再来说下我的解决方案
第一步：调整文字的显示大小，手机上文字可以更小，这里我用的是8px字号
第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互）
第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启）
第四步：文字换行展示，echarts给我们提供了一个 formatter（标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行）属性。
关键代码如下：
series: [
{
type: 'pie',
clickable:false, //是否开启点击
minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true, //是否启用防止标签重叠策略
hoverAnimation:false, //是否开启 hover 在扇区上的放大动画效果。
silent: true, //图形是否不响应和触发鼠标事件
radius: ['30%', '60%'],
center: ['50%', '50%'],
data: [],
label:{
align: 'left',
normal:{
formatter(v) {//解决文字过长问题
let text = Math.round(v.percent)+'%' + '' + v.name
if(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)}`
}
},
textStyle : {
fontSize : 8
}
}
}
}
],
处理后的展示效果
1042672-20180524112507484-802315122.png
5.echarts x轴文字换行显示
xAxis : [
{
splitLine:{show:false},
type : 'category',
data : ['社交人际','沟通交流','心理认知','游戏玩耍','大小运动','生活自理','执行管控','知识常识'],
splitArea:{show:false},
axisLabel: {
show: true,
interval:0,
formatter:function(params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 2; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
},
textStyle: {
color: '#6861a6' //文字颜色
}
}
},
