ドーナツチャート

ドーナツチャートは、合計値と比較した値の割合を示すためにも使用されます。円グラフとは異なり、チャートの中央の空白は追加情報の提供に使用できます。そのため、ドーナツチャートは一般的に使用されるチャートの種類です。

基本的なドーナツチャート

EChartsでは、円グラフの半径は2つの要素を持つ配列にすることもできます。配列の各要素は文字列または数値にすることができます。最初の要素は内側の半径を表し、2番目の要素は外側の半径を表します。

この観点から見ると、棒グラフは内側の半径が0のドーナツチャートのサブセットです。

option = {
  title: {
    text: 'A Case of Doughnut Chart',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'A'
        },
        {
          value: 234,
          name: 'B'
        },
        {
          value: 1548,
          name: 'C'
        }
      ],
      radius: ['40%', '70%']
    }
  ]
};
ライブ

一方の半径をパーセンテージ値の文字列に設定し、もう一方を数値に設定すると、一部の解像度では内側の半径が外側の半径よりも小さくなります。EChartsは内側の半径に小さい方の要素を自動的に選択します。ただし、予期しない結果になる可能性があります。

強調表示されたセクターからドーナツチャートの中央にテキストを表示する

前の例では、ドーナツチャートの中央に固定テキストを表示する方法を示しました。次の例では、マウスで強調表示されたセクターに対応するテキストを表示する方法を示します。一般的な考え方は、デフォルトではlabelを非表示にしたまま、チャートの中央にlabelを固定することです。

option = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};
ライブ

この場合、avoidLabelOverlapは、EChartsがラベルの位置を調整して重複を避けるかどうかを制御するために使用されます。avoidLabelOverlapのデフォルト値はtrueです。ラベルを中央に固定したいので、falseとして定義する必要があります。

したがって、ドーナツチャートの中央には、強調表示されたセクターのnameが表示されます。

コントリビューター GitHubでこのページを編集

plainheart plainheartpissang pissang