基础散点图
散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。
最简单的散点图
下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置：
option = { xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, yAxis: {}, series: [ { type: 'scatter', data: [220, 182, 191, 234, 290, 330, 310] } ] };
笛卡尔坐标系下的散点图
在上文的例子中，散点图的横坐标都是离散的类目轴，而纵坐标都是连续的数值轴。而对于散点图而言，另一种常见的场景是，两个坐标轴均为连续的数值轴，也就是笛卡尔坐标系。这时的系列形式略有不同，数据的横坐标和纵坐标一同写在 data 中，而非坐标轴中。
option = { xAxis: {}, yAxis: {}, series: [ { type: 'scatter', data: [ [10, 5], [0, 8], [6, 10], [2, 12], [8, 9] ] } ] };
散点图样式设置
图形的形状
图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。
ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。
如果想要将图形指定为任意的图片，以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。
除此之外，还支持 SVG 的路径作为矢量图形，将 symbol 设置为以 'path://' 开头的 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 控制。它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。
除此之外，它还可以是一个回调函数，其参数格式为：
(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; } } ] };
