Prefácio
Hoje, Echart.js é usado no projeto para relatórios. Encontrei algumas soluções não documentadas no documento Echart.js . Grave aqui ...
Use o conjunto de dados para gerenciar dados ao carregar dados de forma assíncrona em Echart.js: Se for 0, o rótulo não será exibido
Mostrar mapa
Nesse caso, não há necessidade de exibir 0,00 funcionários. Portanto, a solução é usar o atributo formatter para processamento de dados. Finalmente processado no efeito que você deseja. Este local pertence à etiqueta da série.
Portanto, quando estamos fazendo processamento de dados, devemos ter clareza sobre o que vamos fazer e com quem estamos lidando.
Minha solução
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'
}])
}
}
]
Logíca de negócios
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 + '元';
}
}
}
Imagem de efeito após o problema ser resolvido
Dica de ferramenta personalizada em Echart.js
Algumas coisas podem ser personalizadas neste local e o atributo formatter também é usado para processamento de dados.
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;
}
}
}
Resumindo
Por se tratar de um relatório, os dados são apresentados. Então, os "dados válidos" devem ser exibidos intuitivamente e os dados desnecessários devem ser processados. Em vez de organizar os dados de maneira densa, criando uma experiência ruim para os usuários.