echarts散点图中大小_ECharts如何实现散点图

在 ECharts 系列中通过使用 series[i]-scatter 来实现散点(气泡)图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系，如果数据项有多个维度，其它维度的值可以通过不同大小的 symbol 展现成气泡图，也可以用颜色来表现。这些可以配合

visualMap 组件完成。

ECharts 散点图可以应用在直角坐标系，极坐标系，地理坐标系上。Tip: ECharts 2.x 中在地图上通过 markPoint 标记大量数据点方式在 ECharts 3 中建议通过地理坐标系上的 scatter 实现。下面示例就是在中国地图上用散点图展现了空气质量的分布。并且用 visualMap 组件将 PM2.5 映射到了颜色。

series[i]-scatter.type

设置 ECharts 散点图，取值为 string 类型，此处的值为 scatter。

series[i]-scatter.name

设置散点图系列的名称，取值类型为 string用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

series[i]-scatter.coordinateSystem

散点图系列使用的坐标系，值类型为 string，默认值为 cartesian2d；以下是可选的取值：

'cartesian2d'：使用二维的直角坐标系(也称笛卡尔坐标系)，通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。

'polar'：使用极坐标系，通过 polarIndex 指定相应的极坐标组件

'geo'：使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

series[i]-scatter.xAxisIndex

散点图使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。取值类型为 number，默认值为 0。

series[i]-scatter.yAxisIndex

散点图使用的 y 轴的 index，在单个图表实例中存在多个 y 轴的时候有用。取值类型为 number，默认值为 0。

series[i]-scatter.polarIndex

散点图使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。取值类型为 number，默认值为 0。

series[i]-scatter.geoIndex

散点图使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。取值类型为 number，默认值为 0。

series[i]-scatter.calendarIndex

使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。取值类型为 number，默认值为 0。

series[i]-scatter.hoverAnimation

是否在散点图中开启鼠标 hover 的提示动画效果。取值类型为 boolean。

series[i]-scatter.legendHoverLink

是否启用散点图图例 hover 时的联动高亮。取值类型为 boolean，默认值为 true。

series[i]-scatter.symbol

在散点图中使用的标记的图形。取值类型为 string，默认值为 circle。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series[i]-scatter.symbolSize

标记的大小，取值类型为 number, Array, Function，默认值为 10。可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(v