Skip to content

Scatter 散点图

散点图示例,使用 <g-scatter> 组件。

基础用法

直接使用 <g-scatter> 标签,并传入图表数据即可。

点的大小、颜色

直接使用 <g-scatter> 标签,传入图表数据,通过 sizecolor 属性设置点的大小和颜色。

不同象限的点不同颜色

直接使用 <g-scatter> 标签,传入图表数据,设置 quadrantPointColor 属性设置为 true,即可实现不同象限的点展示不同颜色。

组件参数

名称说明类型默认值
dbOptions数据和字段配置项object
options自定义ECharts配置object
description空数据描述string暂无数据
size用于设置点大小string14
color用于控制每个点颜色string#3971E2
quadrantPointColor象限点颜色,设置为 true 时,四个象限点展示不同的颜色(与color属性互斥)booleanfalse

dbOptions API

名称说明类型默认值
xAxisFieldX轴字段名string
yAxisFieldY轴字段名string
columns所有字段定义,包含标题等,title 显示轴名称或图例名,field 绑定字段名, unit 单位array
labelField用于显示散点标签的字段string
data图表数据配置array