Scatter 散点图
散点图示例,使用 <g-scatter> 组件。
基础用法
直接使用 <g-scatter> 标签,并传入图表数据即可。
点的大小、颜色
直接使用 <g-scatter> 标签,传入图表数据,通过 size 和 color 属性设置点的大小和颜色。
不同象限的点不同颜色
直接使用 <g-scatter> 标签,传入图表数据,设置 quadrantPointColor 属性设置为 true,即可实现不同象限的点展示不同颜色。
组件参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dbOptions | 数据和字段配置项 | object | — |
| options | 自定义ECharts配置 | object | — |
| description | 空数据描述 | string | 暂无数据 |
| size | 用于设置点大小 | string | 14 |
| color | 用于控制每个点颜色 | string | #3971E2 |
| quadrantPointColor | 象限点颜色,设置为 true 时,四个象限点展示不同的颜色(与color属性互斥) | boolean | false |
dbOptions API
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| xAxisField | X轴字段名 | string | — |
| yAxisField | Y轴字段名 | string | — |
| columns | 所有字段定义,包含标题等,title 显示轴名称或图例名,field 绑定字段名, unit 单位 | array | — |
| labelField | 用于显示散点标签的字段 | string | — |
| data | 图表数据配置 | array | — |