给echarts散点图横坐标进行分组后添加备注,请给我写个详细的例子
时间: 2023-11-27 22:50:16 浏览: 51
好的,以下是一个详细的例子:
假设我们有这样一组数据:
```javascript
const data = [
{ x: 1, y: 2, group: 'A' },
{ x: 2, y: 4, group: 'A' },
{ x: 3, y: 1, group: 'A' },
{ x: 4, y: 3, group: 'B' },
{ x: 5, y: 5, group: 'B' },
{ x: 6, y: 2, group: 'B' },
{ x: 7, y: 4, group: 'C' },
{ x: 8, y: 1, group: 'C' },
{ x: 9, y: 3, group: 'C' },
];
```
其中,`x` 和 `y` 分别表示散点的横纵坐标,`group` 表示散点所属的分组。
我们可以使用 echarts 中的 `dataset` 和 `series` 配置项来实现对横坐标进行分组后添加备注:
```javascript
option = {
dataset: {
source: data,
// 按照 group 字段进行分组
dimensions: ['x', 'y', 'group'],
// 将分组后的数据按照 group 字段进行排序
transform: {
type: 'sort',
config: { dimension: 'group', order: 'asc' }
}
},
xAxis: {
// 使用类目轴
type: 'category',
// 按照 group 字段进行分组后的类目轴数据
data: echarts.util.map(data, item => item.group),
},
yAxis: {
type: 'value'
},
series: [{
type: 'scatter',
// 使用 dataset 中的数据源
datasetIndex: 0,
// 横坐标使用 x 字段,纵坐标使用 y 字段
encode: { x: 'x', y: 'y' },
// 对每个分组进行单独的配置
dimensions: ['group'],
// 配置每个分组的样式
itemStyle: {
// 分组 A 的样式
0: {
color: 'red'
},
// 分组 B 的样式
1: {
color: 'blue'
},
// 分组 C 的样式
2: {
color: 'green'
}
},
// 配置每个散点的标签
label: {
show: true,
// 使用 dataset 中的数据源
formatter: '{b}: ({c})',
// 横坐标和纵坐标都使用 encode 中指定的字段
position: 'top',
// 配置每个分组的标签样式
// 这里只配置了分组 A 的标签样式,其他分组的样式可以类似地配置
rich: {
0: {
backgroundColor: 'rgba(255, 0, 0, 0.5)',
padding: [3, 5],
borderRadius: 3,
color: '#fff'
}
}
}
}]
};
```
这段代码中,我们使用 `dataset` 配置项将数据源设置为 `data`,并指定 `dimensions` 为 `[x, y, group]`,这样 echarts 就会按照 `group` 字段进行分组。
然后我们将 x 轴的类型设置为 `category`,并将 x 轴的数据设置为分组后的类目轴数据,这样就实现了对横坐标进行分组。
接着,我们在 `series` 中配置散点图,并将数据源设置为 `datasetIndex: 0`,这样 echarts 就会使用我们分组后的数据源。
我们还可以通过 `dimensions` 配置项来为每个分组单独配置样式,比如将分组 A 的散点颜色设置为红色,分组 B 的散点颜色设置为蓝色,分组 C 的散点颜色设置为绿色。
最后,我们可以使用 `label` 配置项来为每个散点添加标签,这里我们使用 `{b}: ({c})` 来显示散点所属的分组和散点的值,然后又通过 `rich` 配置项来为每个分组单独配置标签样式。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)