基本散点图

散点图是一种使用频率较高的图表类型，由若干个“点”构成。这些点有时表示值在坐标系中的位置（笛卡尔坐标系、地理坐标系等），有时可以将物品的大小和颜色映射到值上，表示高维数据。

简单示例

以下示例是一个基本的散点图配置，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> 的路径；将 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'
    }
  ]
};
运行

通过这种方式，我们得到了一个项目的矢量心形。

符号大小

符号的大小由 series.symbolSize 定义。它可以是项目大小的 s 像素值，也可以是一个包含两个数字的数组，以定义宽度和高度。

此外，它还可以定义为一个回调函数。以下是格式示例

(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