基本散佈圖

散佈圖是一種常用的圖表類型，由數個「點」構成。這些點有時代表座標系統（直角座標系統、地理座標系統等）中數值的位置，有時項目的尺寸和顏色可以映射到該數值，表示高維數據。

簡單範例

以下範例是基本散佈圖配置，其中 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]
      ]
    }
  ]
};
即時

自訂散佈圖

符號樣式

符號是指散佈圖中的項目形狀。有三種類型的配置可用。第一種是 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> 的路徑；在 '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 中，將配置 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 定義。它可以是項目大小的像素值，或包含兩個數字的陣列，以定義寬度和高度。

此外，它可以定義為回呼函式。以下是格式的範例

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

第一個參數是數據值，第二個參數包含數據項目的其他參數。在以下實例中，我們定義了與數據值成比例的項目大小。

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 pissang