基本的な円グラフ

円グラフは主に、いくつかのカテゴリの割合を合計と比較して表示するために使用されます。ラジアンは各カテゴリの割合を表します。

簡単な例

円グラフの設定は、折れ線グラフや棒グラフとは完全に同じではありません。軸を設定する必要はありません。データの名前と値はseriesで定義する必要があります。基本的な円グラフから始めましょう。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'Direct Visit'
        },
        {
          value: 234,
          name: 'Union Ad'
        },
        {
          value: 1548,
          name: 'Search Engine'
        }
      ]
    }
  ]
};
ライブ

ここで言及しておくと、valueはパーセンテージデータである必要はありません。EChartsは、すべてのデータに応じて、対応するラジアンを円グラフに比例して配分します。

カスタマイズされた円グラフ

円グラフの半径

円グラフの半径は、series.radiusで定義できます。パーセント文字列('60%')と絶対ピクセル文字列('200')の両方が使用できます。パーセント文字列の場合、短いコンテナ('div')のエッジに比例します。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'Direct Visit'
        },
        {
          value: 234,
          name: 'Union Ad'
        },
        {
          value: 1548,
          name: 'Search Engine'
        }
      ],
      radius: '50%'
    }
  ]
};
ライブ

データ合計が0の場合のグラフの非表示

デフォルトでは、データ合計が0の場合、シリーズは図形を均等に分割します。たとえば、4つのシリーズの値がすべて0の場合に図形を表示したくない場合は、series.stillShowZeroSumをfalseに設定できます。

option = {
  series: [
    {
      type: 'pie',
      stillShowZeroSum: false,
      data: [
        {
          value: 0,
          name: 'Direct Visit'
        },
        {
          value: 0,
          name: 'Union Ad'
        },
        {
          value: 0,
          name: 'Search Engine'
        }
      ]
    }
  ]
};
ライブ

ラベルも非表示にする場合は、series.label.showもfalseに設定します。

option = {
    series: [{
        type: 'pie',
        stillShowZeroSum: false,
        label: {
            show: false
        }
        data: [{
            value: 0,
            name: 'Direct Visit'
        }, {
            value: 0,
            name: 'Union Ad'
        }, {
            value: 0,
            name: 'Search Engine'
        }]
    }]
};
ライブ

貢献者 GitHubでこのページを編集

pissang pissang