记录--Echarts绘制气泡图

无人知晓的浪潮

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

Echarts绘制气泡图

气泡图是一种用于可视化三维数据的图表类型，其中两个变量用于确定数据点在平面上的位置，另一个变量用于确定气泡的大小。Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括灵活多变的气泡图。本文将详细介绍如何使用Echarts来绘制气泡图，并介绍气泡图相关的配置。
Echarts气泡图基础

在Echarts中，要绘制气泡图需指定series的type为'scatter'并在series.data中为每个数据点指定一个数组，通常数组的前两个值代表x轴和y轴的坐标，第三个值代表气泡的大小（即气泡半径）。
以下是一个基础的Echarts气泡图的配置例子：

1. var option = {
2.     tooltip: {
3.         trigger: 'item',
4.         formatter: function (params) {
5.             return params.seriesName + ' :<br/>' +
6.                 params.value[0] + 'cm ' +
7.                 params.value[1] + 'kg ' +
8.                 params.value[2] + '岁';
9.         }
10.     },
11.     xAxis: {
12.         scale: true,
13.         type: 'value',
14.         name: '身高(cm)'
15.     },
16.     yAxis: {
17.         scale: true,
18.         type: 'value',
19.         name: '体重(kg)'
20.     },
21.     series: [{
22.         name: '年龄',
23.         type: 'scatter',
24.         symbolSize: function (data) {
25.             return Math.sqrt(data[2]) * 5; // 根据值大小调整气泡大小
26.         },
27.         data: [
28.             [161.2, 51.6, 25],
29.             [167.5, 59.0, 29],
30.             // ... 更多数据
31.         ],
32.         animationDelay: function (idx) {
33.             return idx * 100;
34.         }
35.     }]
36. };

复制代码

配置项解析

tooltip

tooltip配置是图表的提示框组件，可以在鼠标悬浮时显示数据的详细信息。可以通过formatter属性来定义提示框显示的内容。
xAxis和yAxis

xAxis和yAxis配置定义了图表的x轴和y轴，type一般为'value'表示数值轴。name属性用于定义轴名称，scale属性设置为true时轴将不会强制包含零，这对于散点图和气泡图非常重要，以便更真实地反映数据的分布情况。
series

series数组的每个对象表示一组数据，对于气泡图，每个对象的type属性设置为'scatter'。symbolSize函数用于根据数据点的值（如年龄）调整气泡的大小。data属性是一个数组，包含了图表中每个气泡的信息。
高级配置

Echarts的气泡图还有许多高级配置可以使图表更加丰富和个性化，下面将介绍其中一些重要的配置。
visualMap

visualMap组件可以根据数值映射到颜色，从而以颜色的变化来表示一个数据维度。

1. visualMap: {
2.     dimension: 2,
3.     min: 0,
4.     max: 100,
5.     calculable: true,
6.     inRange: {
7.         color: ['#50a3ba', '#eac736', '#d94e5d']
8.     },
9.     textStyle: {
10.         color: '#fff'
11.     }
12. }

复制代码

markArea, markPoint, markLine

这些是Echarts的标注工具，可以在图表中标记特定区域、点或线条。

1. series: [{
2.     // ... 其他配置 ...
3.     markPoint: {
4.         data: [
5.             {type: 'max', name: '最大值'},
6.             {type: 'min', name: '最小值'}
7.         ]
8.     },
9.     markLine: {
10.         lineStyle: {
11.             normal: {
12.                 type: 'solid'
13.             }
14.         },
15.         data: [
16.             {type: 'average', name: '平均值'}
17.         ]
18.     }
19.     // ... 其他配置 ...
20. }]

复制代码

legend

图例组件legend显示了不同系列的标记，颜色和名称，用户可以通过点击图例来切换显示的系列。

1. legend: {
2.     right: 10,
3.     data: ['年龄']
4. }

复制代码

grid

grid组件可以控制图表的位置和大小，在气泡图中经常需要调整，以便为气泡留出足够的空间。

1. grid: {
2.     left: '3%',
3.     right: '7%',
4.     bottom: '3%',
5.     containLabel: true
6. }

复制代码

dataset

当有多个系列需要共享一套数据或者数据结构比较复杂时，使用dataset可以对数据进行集中管理。

1. dataset: {
2.     dimensions: ['身高', '体重', '年龄'],
3.     source: [
4.         [161.2, 51.6, 25],
5.         [167.5, 59.0, 29],
6.         // ... 更多数据
7.     ]
8. },
9. series: [{
10.     // ... 其他配置 ...
11.     encode: {
12.         x: '身高', // 映射到x轴的数据
13.         y: '体重', // 映射到y轴的数据
14.         z: '年龄'  // 映射到气泡大小的数据
15.     }
16.     // ... 其他配置 ...
17. }]

复制代码

emphasis

通过emphasis，可以设置当鼠标悬浮在气泡上时的样式，如气泡的边线颜色、宽度等。

1. series: [{
2.     // ... 其他配置 ...
3.     emphasis: {
4.         itemStyle: {
5.             borderColor: 'blue',
6.             borderWidth: 2
7.         }
8.     }
9.     // ... 其他配置 ...
10. }]

复制代码

自定义样式和布局

可以自定义气泡的样式，例如为气泡添加阴影等，使得图表看起来更具有立体感。

1. series: [{
2.     // ... 其他配置 ...
3.     itemStyle: {
4.         shadowBlur: 10,
5.         shadowColor: 'rgba(120, 36, 50, 0.5)',
6.         shadowOffsetY: 5
7.     }
8.     // ... 其他配置 ...
9. }]

复制代码

结语

气泡图在数据可视化中是展示多维数据关系的重要图表类型。Echarts提供了丰富的配置项来创建丰富多彩、互动性强的气泡图。本文涵盖的这些基础与高级配置足以应对大多数的气泡图使用场景。
本文转载于:

https://juejin.cn/post/7311216938751934516

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17897619.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！