基本散布図

散布図は、頻繁に使用されるチャートタイプであり、複数の「点」で構成されています。これらの点は、座標系（デカルト座標系、地理座標系など）における値の位置を表す場合があり、アイテムのサイズと色を値にマッピングして、高次元データを表す場合もあります。

簡単な例

次の例は、X軸をカテゴリ、Y軸を値とする基本的な散布図の設定です。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

デカルト座標系における散布図

前のケースでは、散布図のX軸は離散カテゴリ軸、Y軸は連続値軸です。ただし、散布図の通常のシーンは、2つの連続値軸（デカルト座標系とも呼ばれます）を持つことです。系列タイプの違いは、X軸とY軸の両方の値が `data` に含まれ、 `xAxis` と `yAxis` には含まれないことです。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5],
        [0, 8],
        [6, 10],
        [2, 12],
        [8, 9]
      ]
    }
  ]
};

カスタマイズされた散布図

シンボルスタイル

シンボルは、散布図のアイテムの形状を指します。3種類の konfigurations があります。1つ目はECharts組み込み形状、2つ目は画像、最後はSVGパスです。

EChartsの組み込み形状には、 `'circle'`、 `'rect'`（長方形）、 `'roundRect'`（角丸長方形）、 `'triangle'`、 `'diamond'`、 `'pin'`、 `'arrow'` が含まれます。組み込み形状を使用するには、 `symbol` を対応する文字列に設定する必要があります。

形状を任意の画像として定義する場合は、パスの後に `'image'` を使用してみてください。例： `'image://http://example.com/xxx.png'` または `'image://./xxx.png'`。

ECharts `symbol` はSVGベクターグラフィックスもサポートしています。 `symbol` を `'path://'` で始まるSVGファイルパスとして定義して、ベクターグラフィックスを配置できます。ベクターグラフィックスの利点は、サイズが小さく、ギザギザやぼやけがないことです。

SVGパスを見つける方法： `SVG` パスを開きます。 `<path d="M… L…"></path>` のようなパスを見つけます。 `'path://'` の後に `d` の値を追加します。アイテムをハートのベクトル形状に定義する方法を確認しましょう。

まず、ハートの `SVG` ファイルが必要です。ベクター編集ソフトウェアで描画するか、インターネットからダウンロードできます。コンテンツは次のとおりです。

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
    <path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
</svg>

EChartsでは、 konfigurations `symbol` をdのパスとして定義します。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: 20,
      symbol:
        'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
    }
  ]
};

このようにして、アイテムのハートベクトルを作成できます。

シンボルサイズ

シンボルのサイズは、`series.symbolSize` で定義されます。アイテムサイズのピクセル値、または幅と高さを定義するための2つの数値を含む配列にすることができます。

さらに、コールバック関数として定義することもできます。形式の例を次に示します。

(value: Array | number, params: Object) => number | Array;

最初の引数はデータ値、2番目の引数はデータアイテムの他の引数です。次の例では、データ値に比例してアイテムのサイズを定義します。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: function(value) {
        return value / 10;
      }
    }
  ]
};