在echarts中遇到几个样式问题,现总结如下:
1、tooltip中样式中 值换行

在tooltip中修改加上一句代码
formatter: '{b0}: {c0}<br />'
示例如下:
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},formatter: '{b0}: {c0}<br />'
}
最终效果:

2、X轴超过4个标题显示不完全

在xAxis中加上这段代码 鉴于字数长度过长,排版不够,这里设置了字数长度,多出的用省略号替代
axisLabel: {
interval: 0,
formatter: function(value) { /*return value.split("").join("\n");*/
if(value.length > 3) {
return value.substring(0, 3) + "..";
} else {
return value;
}
}
}
示例如下:
xAxis: [{
type: 'category',
data: ['承办总件次', '承办单位数', '独办', '分办', '主办'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
formatter: function(value) { /*return value.split("").join("\n");*/
if(value.length > 3) {
return value.substring(0, 3) + "..";
} else {
return value;
}
}
}
}],
最终效果:

本文分享了在ECharts中解决两个常见样式问题的方法:一是如何让tooltip中的数值换行显示,二是当X轴标题过长时如何通过设置字数限制和使用省略号来改善显示效果。
864





