基礎散點圖

散點圖是一種常用的圖表型別，由多個“點”構成。這些點有時表示值在座標系（笛卡爾座標系、地理座標系等）中的位置，有時點的大小和顏色可以對映到某個維度的資料，從而表示高維資料。

簡單示例

下面的例子是基礎散點圖的配置，其中 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 軸是連續的數值軸。然而，散點圖更常見的場景是擁有兩個連續的數值軸（也稱為笛卡爾座標系）。這種情況下，系列的型別有所不同，x 軸和 y 軸的值都包含在 data 中，而不是在 xAxis 和 yAxis 中。

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

自定義散點圖

標記（Symbol）的樣式

標記（Symbol）指的是散點圖中每個點的圖形。有三種配置方式可用。第一種是 ECharts 內建的圖形，第二種是圖片，最後一種是 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> 的路徑；將 d 的值新增到 'path://' 之後。讓我們看看如何將一個數據項定義為心形的向量圖形。

首先，我們需要一個心形的 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 中，將配置項 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'
    }
  ]
};
線上示例

透過這種方式，我們就得到了一個心形的向量資料點。

標記（Symbol）的大小

標記的大小由 series.symbolSize 定義。它可以是表示資料項大小的畫素值，也可以是一個包含兩個數字的陣列，分別定義寬度和高度。

此外，它還可以定義為一個回撥函式。以下是其格式示例：

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

第一個引數是資料值（data value），第二個引數包含了資料項的其他引數。在下面的例子中，我們將資料項的大小定義為與資料值成正比。

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;
      }
    }
  ]
};
線上示例

貢獻者 在 GitHub 上編輯此頁

pissang