Preface
Today, Echart.js is used in the project for reporting. I encountered some solutions not documented in the Echart.js document. Record it here...
Use Dataset to manage data when loading data asynchronously in Echart.js: If it is 0, Label will not be displayed
Show map
In this case, there is no need to display 0.00 employees. So the solution is to use the formatter attribute for data processing. Finally processed into the effect you want. This place belongs to Label in the series.
Therefore, when we are doing data processing, we must be clear about what we are going to do and whom we are dealing with.
My solution
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'
}])
}
}
]
Business logic
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 + '元';
}
}
}
Effect picture after the problem is solved
Custom tooltip in Echart.js
Some things can be customized in this place, and the formatter attribute is also used for data processing.
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;
}
}
}
to sum up
Since it is a report, the data is presented. Then the "valid data" should be displayed intuitively, and unnecessary data should be processed. Rather than arranging the data together in a dense manner, creating a bad experience for users.