基础散点图

散点图是一种常用的图表类型，由多个“点”构成。这些点有时表示值在坐标系（笛卡尔坐标系、地理坐标系等）中的位置，有时点的大小和颜色可以映射到某个维度的数据，从而表示高维数据。

简单示例

下面的例子是基础散点图的配置，其中 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