记录–Echarts绘制气泡图

  • 记录–Echarts绘制气泡图已关闭评论
  • 50 次浏览
  • A+
所属分类:Web前端
摘要

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


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

记录--Echarts绘制气泡图

Echarts绘制气泡图

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

Echarts气泡图基础

在Echarts中,要绘制气泡图需指定seriestype'scatter'并在series.data中为每个数据点指定一个数组,通常数组的前两个值代表x轴和y轴的坐标,第三个值代表气泡的大小(即气泡半径)。

以下是一个基础的Echarts气泡图的配置例子:

var option = {     tooltip: {         trigger: 'item',         formatter: function (params) {             return params.seriesName + ' :<br/>' +                 params.value[0] + 'cm ' +                 params.value[1] + 'kg ' +                 params.value[2] + '岁';         }     },     xAxis: {         scale: true,         type: 'value',         name: '身高(cm)'     },     yAxis: {         scale: true,         type: 'value',         name: '体重(kg)'     },     series: [{         name: '年龄',         type: 'scatter',         symbolSize: function (data) {             return Math.sqrt(data[2]) * 5; // 根据值大小调整气泡大小         },         data: [             [161.2, 51.6, 25],             [167.5, 59.0, 29],             // ... 更多数据         ],         animationDelay: function (idx) {             return idx * 100;         }     }] };

配置项解析

tooltip

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

xAxis和yAxis

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

series

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

高级配置

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

visualMap

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

visualMap: {     dimension: 2,     min: 0,     max: 100,     calculable: true,     inRange: {         color: ['#50a3ba', '#eac736', '#d94e5d']     },     textStyle: {         color: '#fff'     } }

markArea, markPoint, markLine

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

series: [{     // ... 其他配置 ...     markPoint: {         data: [             {type: 'max', name: '最大值'},             {type: 'min', name: '最小值'}         ]     },     markLine: {         lineStyle: {             normal: {                 type: 'solid'             }         },         data: [             {type: 'average', name: '平均值'}         ]     }     // ... 其他配置 ... }]

legend

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

legend: {     right: 10,     data: ['年龄'] }

grid

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

grid: {     left: '3%',     right: '7%',     bottom: '3%',     containLabel: true }

dataset

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

dataset: {     dimensions: ['身高', '体重', '年龄'],     source: [         [161.2, 51.6, 25],         [167.5, 59.0, 29],         // ... 更多数据     ] }, series: [{     // ... 其他配置 ...     encode: {         x: '身高', // 映射到x轴的数据         y: '体重', // 映射到y轴的数据         z: '年龄'  // 映射到气泡大小的数据     }     // ... 其他配置 ... }]

emphasis

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

series: [{     // ... 其他配置 ...     emphasis: {         itemStyle: {             borderColor: 'blue',             borderWidth: 2         }     }     // ... 其他配置 ... }]

自定义样式和布局

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

series: [{     // ... 其他配置 ...     itemStyle: {         shadowBlur: 10,         shadowColor: 'rgba(120, 36, 50, 0.5)',         shadowOffsetY: 5     }     // ... 其他配置 ... }]

结语

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

本文转载于:

https://juejin.cn/post/7311216938751934516

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

 记录--Echarts绘制气泡图