基本折れ線グラフ

簡単な例

次のコードを使用すると、x軸をcategory、y軸をvalueとする折れ線グラフを作成できます。

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};
ライブ

この例では、xAxisとyAxisの下で軸のタイプをcategoryとvalueに設定します。また、dataを通じてx軸の内容を明確にしました。seriesでは、タイプをlineに設定し、dataを通じて3つの点の値を指定します。このようにして、簡単な折れ線グラフができました。

軸のデフォルトはvalueであり、xAxisはカテゴリのdataを指定しているため、ここでのtypeは省略できます。この場合、EChartsはこれがカテゴリ軸であることを認識できます。

直交座標系での折れ線グラフ

折れ線グラフを連続させたい場合はどうすればよいでしょうか？答えは簡単で、seriesのdata内のすべての値を2つの要素を含む配列で表すだけです。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
};
ライブ

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

ラインスタイル

ラインスタイルは、lineStyle設定で変更できます。色、線の幅、ポリラインタイプ、不透明度などを指定できます。詳細については、ハンドブックseries.lineStyleを参照してください。

これは、色、線の幅、タイプを設定する例です。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      }
    }
  ]
};
ライブ

ここで線の幅を設定すると、項目の線の幅は変更されません。項目のラインスタイルは別途設定する必要があります。

項目スタイル

項目スタイルは、series.itemStyleで変更できます。これには、color、borderColor、borderStyle、borderWidth、borderType、shadowColor、opacityなどが含まれます。これはlineTypeと同じように機能するため、さらに議論することはありません。

項目に値を表示する。

シリーズでは、項目のラベルはseries.labelで指定されていました。labelの下のshowをtrueに変更すると、デフォルトで値が表示されます。それ以外の場合、series.emphasis.label.showがtrueの場合、マウスが項目を横切った場合にのみラベルが表示されます。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};
ライブ

空のデータ

seriesには、空のデータがあります。これは0とは若干異なります。空の要素がある場合、折れ線グラフはその点を通過せずに無視します。つまり、空の要素は次の点によって接続されません。

EChartsでは、nullデータを表すために'-'を使用します。これは、他のシリーズのデータにも適用できます。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [0, 22, '-', 23, 19],
      type: 'line'
    }
  ]
};
ライブ

空のデータと0の違いに注意してください。

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

pissang pissang