在我刚把项目中的echarts从2.x版本升级到echarts3.x，折腾老久，终于交付了项目的时候，echarts4又出来了，先不管，还是把我echarts3.x遇到的和formatter相关的问题总结一下。
1. 第一种情况是折线图或者柱状图的纵坐标：当纵坐标都是0的时候，此时echarts默认的纵坐标是从0到1等分，但是实际场景中可能我们的纵坐标永远是整数，这时候就有点不妥了，如图所示。此时的option为：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line'
}]
};
此时需要用到的是echarts的minInterval和max属性，设置纵坐标的间隔为单位长度1，且最大值为5，当然也要兼容值不是全为0的情况。具体配置如下。若要只是如右上图所示，加个单位的话，emmm，formatter加个单位。
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
// axisLabel: {
// formatter: '{value} kg'
// },
minInterval: 1,
max: Math.max.apply(null,value)<=5?5:null
},2.第二种情况是折线图或柱状图的横坐标：①横坐标过长可以设置成截取前几个字符再加上...的形式，如果不是超级长，可以设置成几个字符换一行；②当浏览器缩放时不能放下所有的横坐标时。如图所示。此时option配置如下：
option = {
xAxis: {
type: 'category',
axisLabel: {
margin: 2,
show: true,
interval: 0
},
data: ['超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标2', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标3', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标4', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标5', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标6', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标7']
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
// axisLabel: {
// formatter: '{value} kg'
// },
minInterval: 1,
max: Math.max.apply(null,value)<=5?5:null
},
series: [{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line'
}]
};
此时，需要用到xAxis的axisLabel的formatter,其实后面的几种情况都大同小异，找到对应的要格式化的文本，然后使用formatter，然后是处理字节还是处理字符长度按需选择嘛，效果如右上图，option修改部分如下：
axisLabel: {
show: true,
//interval: 0
formatter:function(val){
var re = '';
var length = val.length;
var bytes = 0;
for (var i = 0; i < length; i++) {
var code = val.charCodeAt(i);
bytes += code < 256 ? 1 : 2;
if (bytes > 16) {
re += '...';
break;
} else {
re += val[i];
}
}
return re;
}
},3.当折线图和柱状图的横纵坐标都合格的情况下，比如横坐标很略以后，如果还是想看完整的横坐标内容怎么办？这时候就使用到tooltip了，此处先讨论全局的tooltip，如图所示，超出画布的tooltip,瞬间被测试部的小姐姐提单了
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
show: true,
borderColor: '#ccc',
borderWidth: 1
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
//interval: 0
formatter:function(val){
var re = '';
var length = val.length;
var bytes = 0;
for (var i = 0; i < length; i++) {
var code = val.charCodeAt(i);
bytes += code < 256 ? 1 : 2;
if (bytes > 16) {
re += '...';
break;
} else {
re += val[i];
}
}
return re;
}
},
data: ['超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标2', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标3', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标4', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标5', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标6', '超级长的横坐标超级长的横坐标超级长的横坐标超级长的横坐标7']
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
// axisLabel: {
// formatter: '{value} kg'
// },
minInterval: 1,
max: Math.max.apply(null,value)<=5?5:null
},
series: [{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line'
}]
};
此时使用到tooltip的position属性，定位到角落里，不设置也行，跟随鼠标移动tooltip，在formatter函数里设置换行，啊哈哈，小圆点是宝宝用css做的，巨丑，忍受一下哈，配置参数如下：
tooltip: {
trigger: 'axis',
axisPointer: {
},
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#fff'
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px',
formatter: function(param){
param = param[0];
var re = '';
var length = param.name.length;
var bytes = 0;
for (var i = 0; i < length; i++) {
var code = param.name.charCodeAt(i);
bytes += code < 256 ? 1 : 2;
if (bytes && bytes % 20 === 0) {
re += '<br />';
} else {
re += param.name[i];
}
}
return [
re + '<br/>',
'<span style="width:10px;height:10px;border-radius:5px;background-color: #158cba;display:inline-block;margin-right:5px;"></span>' + param.data + '<br/>'
].join('');
}
},4.第四种情况是用在饼图中，legend里设置图例的显示和ltooltip，以及series里label的formatter，伟岸的UI给我设计了南丁格尔玫瑰图来显示数据TOP10，对，设计稿里巨漂亮，但那也是在完美的数据情况下啊！！测试部的小姐姐们都是从零开始建数据的哇，导致各种奇葩的图表出来。暴走的宝宝配置了如下的南丁格尔玫瑰图数据：
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left:'0',
itemGap:5,
icon: 'circle',
data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8']
},
color: ['rgba(13,136,252,1)', 'rgba(13,136,252,.9)', 'rgba(13,136,252,.8)', 'rgba(13,136,252,.7)', 'rgba(13,136,252,.6)', 'rgba(13,136,252,.5)', 'rgba(13,136,252,.4)', 'rgba(13,136,252,.3)', 'rgba(13,136,252,.2)', 'rgba(13,136,252,.1)'],
calculable : true,
series : [
{
name:'面积模式',
type:'pie',
radius : [0, 110],
center : ['50%', '50%'],
roseType : 'area',
label: {
normal: {
show: false,
// formatter:function(params){
// return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
// }
},
emphasis: {
show: true
}
},
data:[
{value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
{value:10, name:'rose2rose2rose2rose2rose2rose2'},
{value:15, name:'rose3rose3rose3rose3rose3'},
{value:20, name:'rose4rose4rose4rose4rose4'},
{value:25, name:'rose5'},
{value:30, name:'rose6'},
{value:35, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
大同小异的formatter，但是，emmmm,记得legend也是 有tooltip和formatter的。至此，宝宝的定制化结束啦，不知道为啥，一点都不想再做这个了，orz....
var dataOne = ['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'];
var dataTwo = [5,10,15,20,25,30,35,40];
option = {
tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter: function(params){
//console.log(name);
var re = '';
var length = params.name.length;
for (var i = 0, j = 1; i < length; i++,j++) {
if (j && j % 20 === 0) {
re += '<br />';
} else {
re += params.name[i];
}
}
if (params.data.show) {
return "无";
}
return params.seriesName+'<br/>'+'图例：<br/>'+re+'<br/>'+'数量：<br/>'+params.value;
}
},
legend: {
orient: 'vertical',
left:'0',
itemGap:5,
icon: 'circle', data:['rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1','rose2rose2rose2rose2rose2rose2','rose3rose3rose3rose3rose3','rose4rose4rose4rose4rose4','rose5','rose6','rose7','rose8'], tooltip: {
show: true,
formatter: function (params) {
var re = '';
var length = params.name.length;
var bytes = 0;
for (var i = 0; i < length; i++) {
var code = params.name.charCodeAt(i);
bytes += code < 256 ? 1 : 2;
if (bytes && bytes % 20 === 0) {
re += '<br />';
} else {
re += params.name[i];
}
}
return re;
},
},
formatter: function(name) {
var index = 0;
dataOne.forEach(function(value,i){
if(value == name){
index = i;
name = name.length > 8 ? name.slice(0,8) + '...' : name;
}
});
return name + " - " + dataTwo[index];
}
},
color: ['rgba(13,136,252,1)', 'rgba(13,136,252,.9)', 'rgba(13,136,252,.8)', 'rgba(13,136,252,.7)', 'rgba(13,136,252,.6)', 'rgba(13,136,252,.5)', 'rgba(13,136,252,.4)', 'rgba(13,136,252,.3)', 'rgba(13,136,252,.2)', 'rgba(13,136,252,.1)'],
calculable : true,
series : [
{
name:'面积模式',
type:'pie',
radius : [0, 110],
center : ['50%', '50%'],
roseType : 'area',
label: {
normal: {
show: false,
formatter:function(params){
return params.name.length > 5 ? params.name.slice(0,5) + '...' : params.name;
}
},
emphasis: {
show: true
}
},
data:[
{value:5, name:'rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1rose1'},
{value:10, name:'rose2rose2rose2rose2rose2rose2'},
{value:15, name:'rose3rose3rose3rose3rose3'},
{value:20, name:'rose4rose4rose4rose4rose4'},
{value:25, name:'rose5'},
{value:30, name:'rose6'},
{value:35, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};