散点图
下载和安装
TIP
当你不想全部导入所有的图表时请执行以下操作, 安装你想要的图表即可
下载
bash
bun add @v-charts2/scatterbash
pnpm add @v-charts2/scatterbash
yarn add @v-charts2/scatterbash
npm i @v-chart2/scatter安装
当你当前的打包工具为 webpack 时, 推荐你进行以下的安装步骤
WARNING
传统的 webpack4.x 没有 Tree Shaking 的支持, 如果你想引入 @v-charts2/scatter/vue2 或者 @v-charts2/scatter/vue3 的话, 可能会报错
javascript
import Vue from 'vue'
import VeScatter from '@v-charts2/scatter' // 兼容 vue2.x 和 vue3.x 的支持, 将会自动加载支持 vue2.x 的支持包或者支持 vue3.x 的支持包
Vue.use(VeScatter)当你当前的打包工具为 vite 或者 rollup 时, 推荐你进行以下的安装步骤
javascript
import Vue from 'vue'
import VeScatter from '@v-charts2/scatter/vue2' // 更好的 Tree Shaking 推荐引入 vue2.x 的专属支持包
import '@v-charts2/scatter/v-charts.css' // 需要手动引入样式
Vue.use(VeScatter)javascript
import { createApp } from 'vue'
const app = createApp()
import VeScatter from '@v-charts2/scatter/vue3' // 更好的 Tree Shaking 推荐引入 vue3.x 的专属支持包
import '@v-charts2/scatter/v-charts.css' // 需要手动引入样式
app.use(VeScatter)DEMO
横轴为维度（日期）, 纵轴为指标（访问用户, 下单用户, 年龄）。
双维度多指标散点图示例
:::
图例和横轴分别为两个维度(地点, 日期), 指标（访问用户, 下单用户, 年龄）展示在 纵轴, 散点大小, visualMap 及 tooltip 中。
其中, metrics 数组的第一项（默认为 columns[1]）展示为纵轴, 第二项（默认为 columns[2]）展示为散点大小, visualMap 需特殊配置。
visualMap 中的 dimension 属性用于设置数据的哪个指标映射到视觉元素上, 接受的是一个数字, 代表数据的次序, 其中, 数据的排序为 dimension, metrics[0], metrics[1], columns 中的其他指标, 在上图中的次序就是 日期, 访问用户, 下单用户, 年龄, 如果想要将年龄映射到视觉元素上, dimension 的值就是 3。
两种类型的图通过数据格式区分: 单维度多指标散点图的数据格式为:
json
{
"columns": ["日期", "访问用户", "下单用户", "年龄"],
"rows": [
{ "日期": "1/1", "访问用户": 123, "年龄": 3, "下单用户": 1244 },
{ "日期": "1/2", "访问用户": 1223, "年龄": 6, "下单用户": 2344 },
{ "日期": "1/3", "访问用户": 7123, "年龄": 9, "下单用户": 3245 },
{ "日期": "1/4", "访问用户": 4123, "年龄": 12, "下单用户": 4355 },
{ "日期": "1/5", "访问用户": 3123, "年龄": 15, "下单用户": 4564 },
{ "日期": "1/6", "访问用户": 2323, "年龄": 20, "下单用户": 6537 }
]
}单维度多指标散点图的数据格式为:
json
{
"columns": ["日期", "访问用户", "下单用户", "年龄"],
"rows": {
"上海": [
{ "日期": "1/1", "访问用户": 123, "年龄": 3, "下单用户": 1244 },
{ "日期": "1/2", "访问用户": 1223, "年龄": 6, "下单用户": 2344 },
{ "日期": "1/3", "访问用户": 7123, "年龄": 9, "下单用户": 3245 },
{ "日期": "1/4", "访问用户": 4123, "年龄": 12, "下单用户": 4355 },
{ "日期": "1/5", "访问用户": 3123, "年龄": 15, "下单用户": 4564 },
{ "日期": "1/6", "访问用户": 2323, "年龄": 20, "下单用户": 6537 }
],
"北京": [
{ "日期": "1/1", "访问用户": 123, "年龄": 3, "下单用户": 1244 },
{ "日期": "1/2", "访问用户": 1273, "年龄": 6, "下单用户": 2344 },
{ "日期": "1/3", "访问用户": 3123, "年龄": 15, "下单用户": 4564 },
{ "日期": "1/4", "访问用户": 2123, "年龄": 9, "下单用户": 3245 },
{ "日期": "1/5", "访问用户": 4103, "年龄": 12, "下单用户": 4355 },
{ "日期": "1/6", "访问用户": 7123, "年龄": 10, "下单用户": 3567 }
],
"广州": [
{ "日期": "1/1", "访问用户": 123, "年龄": 3, "下单用户": 1244 },
{ "日期": "1/2", "访问用户": 1223, "年龄": 6, "下单用户": 2344 },
{ "日期": "1/3", "访问用户": 2123, "年龄": 30, "下单用户": 3245 },
{ "日期": "1/5", "访问用户": 4123, "年龄": 12, "下单用户": 4355 },
{ "日期": "1/4", "访问用户": 5123, "年龄": 18, "下单用户": 4564 },
{ "日期": "1/6", "访问用户": 3843, "年龄": 30, "下单用户": 4850 }
]
}
}指标维度配置
数据类型配置
属性名配置
缩放配置
散点样式配置
散点出现覆盖时, 提示框可以改成通过坐标轴触发
settings 配置项
| 配置项 | 简介 | 类型 | 备注 |
|---|---|---|---|
| dimension | 维度 | string | 默认 columns[0] |
| metrics | 指标 | array | 默认 [columns[0], columns[1]] |
| dataType | 数据类型 | object | - |
| xAxisType | x轴类型 | string | 可选值: category, value, time, log |
| xAxisName | x轴标题 | string | - |
| yAxisName | y轴标题 | string | - |
| digit | 设置数据类型为percent时保留的位数 | number | 默认为2 |
| labelMap | 设置指标的别名 | object | - |
| legendName | 设置图表上方图例的别名 | object | - |
| tooltipTrigger | 提示框的触发方式 | string | 可选值: item, axis |
| axisVisible | 是否显示坐标轴 | boolean | - |
| symbolSizeMax | 气泡最大值 | number | 默认为50 |
| symbol | 标记的图形 | string | 内容参考文档 |
| symbolSize | 标记的大小 | number, array, Function | 内容参考文档 |
| symbolRotate | 标记的旋转角度 | number | 内容参考文档 |
| symbolOffset | 标记相对于原本位置的偏移 | array | 内容参考文档 |
| cursor | 鼠标悬浮时在图形元素上时鼠标的样式 | string | 内容参考文档 |
| scale | 是否是脱离 0 值比例 | boolean | - |
| min | y轴最小值 | number | - |
| max | y轴最大值 | number | - |