echarts フォーマッタは、整数を取得するなど、パーセンテージの小数点以下の位置をどのようにカスタマイズしますか。{b}{d}%

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. 結果

ついに：