echarts フォーマッタは、整数を取得するなど、パーセンテージの小数点以下の位置をどのようにカスタマイズしますか。{b}{d}%
1. ステータス
option
次のような円グラフがありますformatter
。
label: {
show: true,
position: 'outside',
fontSize: 12,
formatter: '{b} {d}%'
},
グラフデータはこんな感じ
2. 需要
パーセンテージの内容を小数点以下 2 桁ではなく整数に変更する必要があります
3、悟る
フォーマッタを変更するだけですが、今回は、echarts に付属の変数を使用する代わりに、自分で定義します。
1. 操作可能な変数を確認する
まず、データの内容を確認します。
formatter: data => {
console.log(data)}
必要な変数がわかったら、name
percent
出力文字列をカスタマイズできます。私の定義は次のとおりです。
label: {
show: true,
position: 'outside',
fontSize: 12,
formatter: data => {
return `${
data.name}\t${
data.percent.toFixed(0)}%`
}
},
現在はこんな状態です。
2. 0% のケースを排除する
1%未満の問題は0%になることがわかりますが、これは不合理です。少なくとも1%と表現する必要があります。
そこで、切り上げるために再度変更します。使用Math.ceil()
label: {
show: true,
position: 'outside',
fontSize: 12,
formatter: data => {
return `${
data.name}\t${
Math.ceil(data.percent)}%`
}
},
4. 結果
ついに: