序文
現在、Echart.jsはプロジェクトでレポートに使用されています。Echart.jsドキュメントに記載されていないいくつかの解決策に遭遇しました。ここに記録してください...
Echart.jsでデータを非同期にロードするときに、データセットを使用してデータを管理します。0の場合、ラベルは表示されません。
地図を表示
この場合、0.00人の従業員を表示する必要はありません。したがって、解決策は、データ処理にフォーマッター属性を使用することです。最終的にあなたが望む効果に処理されます。この場所はシリーズのラベルに属しています。
したがって、データ処理を行うときは、何をするのか、誰を扱うのかを明確にする必要があります。
私の解決策
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のカスタムツールチップ
この場所でカスタマイズできるものもあり、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;
}
}
}
総括する
レポートですので、データを掲載しています。次に、「有効なデータ」を直感的に表示し、不要なデータを処理する必要があります。データを密に配置するのではなく、ユーザーに悪いエクスペリエンスを作成します。