前言
今天在项目中使用了Echart.js 做报表。遇到了些Echart.js文档中没有记录的解决方案。在这里记录一下……
Echart.js中异步加载数据时使用Dataset管理数据：如果是0就不显示Label
显示图
像这种情况，0.00员工的就根本没必要显示出来了。于是解决方案就是使用使用formatter属性 做数据处理。最终处理成自己想要的效果。这个地方是属于series里的Label。
所以我们在做数据处理的时候，一定要清楚，我们要干什么，对谁进行处理。
我的解决方案
series: [
{
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
sampling: 'average',
itemStyle: {
color: '#8ec6ad'
},
stack: 'a',
label: {
show: true,
formatter: function (params) {
if (params.data.TotalAmount == 0) {
return params.data.TotalAmount = '';
} else {
return params.data.TotalAmount = params.data.TotalAmount + '元';
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8ec6ad'
}, {
offset: 1,
color: '#ffe'
}])
}
},
{
type: 'bar',
smooth: true,
symbol: 'circle',
symbolSize: 5,
sampling: 'average',
itemStyle: {
color: 'rgb(0,122,204)'
},
stack: 'a',
label: {
show: true,
formatter: function (params) {
if (params.data.Otheramount == 0) {
return params.data.Otheramount = '';
} else {
return params.data.Otheramount = params.data.Otheramount + '元';
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(0,122,204)'
}, {
offset: 1,
color: '#ffe'
}])
}
}
]
业务逻辑
label: {
//显示数据 例如：0.0元，239，00元……
show: true,
//数据处理，且必须要又返回值
formatter: function (params) {
//这个地方可以把它输出来看看，有些什么东西 console.log(params)
//判断当前的 TotalAmount 数据是否为0，也就是说是否为0元
if (params.data.TotalAmount == 0)
{
//如果是，那么将返回一个空值
return params.data.TotalAmount = '';
}
else
{
//否则，就再加个单位 元 且返回出去
return params.data.TotalAmount = params.data.TotalAmount + '元';
}
}
}
问题解决之后的效果图
Echart.js中自定义tooltip 工具提示
在这个地方可以自定义一些东西，同样是使用formatter属性做数据处理。
tooltip: {
//设置工具提示容器的宽，高
extraCssText: 'width:300px;height:90px;',
//对工具提示容器内要显示的数据进行处理
formatter: function (parms) {
//这个地方可以把它输出来看看，有些什么东西
console.log(params)
if (parms[0] != null) {
//判断当前相关金额类型是否为空
if (parms[0].data.TotalAmount == "") {
parms[0].data.TotalAmount = " 0.00元";
}
if (parms[0].data.Otheramount == "") {
parms[0].data.Otheramount = " 0.00元";
}
//再加一个小标题
var res = '<span style="margin-left:100px"></span>房屋租赁管理系统<br/>';
//自定义一些要显示的数据
res += '时间：' + parms[0].name + '<br/>';
res += parms[0].marker + '合同收租资金：' + parms[0].data.TotalAmount + '<br/>';
res += parms[1].marker + '其他收租资金：' + parms[0].data.Otheramount + '<br/>';
//其中parms[index].marker是每个数据代表的图形对象标签
return res;
}
}
}
总结
既然是做报表，把数据呈现出来。那么就应该把 “有效的数据” 直观的显示出来，把没必要的数据就应该处理掉。而不是密密麻麻的把数据排列在一起，给用户造成不好的体验。