ECharts是一个基于JavaScript的开源可视化库，可用于Web应用程序开发。ECharts官方提供的全要素的多种类型数据图表支持，其中水球图是一种较为特殊的图表类型。可以基于ECharts水球图来展示一个圆形对称的图表，具有很好的视觉吸引力和阐明数据的效果。
一、水球图的基本概述
水球图是一种引人注目的图表类型，它通常用来描绘一个反映整体总量的数据。水球图中心通常有一个实心圆，表示数据总量的占比，外圈则是一个半透明的圆环，表示当前数据占比的大小。熟悉ECharts的人会发现，水球图事实上是一种特殊的仪表盘，它在表达的数据方面和基于仪表盘的数据可视化有很大的相似性。
水球图将数据放入了一个圆环中，可通过鼠标指针经过圆环时的滑过效果，即可详细展开数据。使用ECharts创建水球图的开发人员需要预先设定好几个基本参数，例如数据范围、颜色、半径、边框线条大小和样式等。ECharts水球图的基本属性如下所示。
// 基本配置项
var option = {
series: [
{
type: 'liquidFill',
data: [0.6, 0.5, 0.4],
radius: '80%',
backgroundStyle: {
color: '#f2f2f2'
},
label: {
normal: {
formatter: '{c}%',
fontSize: 45,
color: '#1E90FF'
}
}
}
]
};
二、水球图标识配置
水球图中的标识配置是实现水球图表格和数据显示的关键参数之一，这些参数可影响图表传达信息的清晰性和表现力。创建ECharts水球图的开发人员可以对自己的水球图进行诸多标识配置，例如：
- 添加标识线，以增强图表的直观性；
- 对标识数据和文本进行格式化，增加交互感、观赏性和美感；
- 可针对标识差距较大的数据进 行自适应性处理，即显示较大数值时，将标识线和数据往外放，以防数据过于挤压；反之，显示较小数值时，将标识线和数据往内重叠，以减少占用轮廓限定容量造成的空间浪费。
// 带有标识配置的水球图
var option = {
series: [
{
type: 'liquidFill',
data: [0.6, 0.5, 0.4],
label: {
normal: {
formatter: '活跃度：{c}',
fontSize: 40,
}
},
itemStyle: {
normal: {
color: '#2f7ed8',
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.2)',
label: {
show: false
}
}
},
backgroundStyle: {
borderColor: '#2f7ed8'
},
emphasis: {
itemStyle: {
opacity: 0.5
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: '#24b6ef'},
{offset: 0.5, color: '#fff'},
{offset: 1, color: '#f2f2f2'}
]
),
opacity: 0.7,
shadowBlur: 40,
shadowColor: '#fff'
}
},
emphasis: {
itemStyle: {color: '#f2f2f2'}
}
}
]
};
三、多个水球图的嵌套
实际数据分析展示中，只有一个水球图是显然不够的。ECharts提供了可嵌套多个水球图的功能，这种设计模式可以方便开发人员更加自由地展示和对比数据。多个水球图的嵌套具有很强的表现力，可以通过多个图表之间的对比，增强数据表达的可读性。针对多个水球图的嵌套功能，开发人员可以对每一个水球图单独设定参数，组合多组数据集成新的更为复杂的数据表达方式。
// 带有嵌套功能的多个水球图配置参数
var option = {
series: [
{
type: 'liquidFill',
data: [0.7, 0.6, 0.5],
color: ['rgba(0, 255, 225, 0.35)', 'rgba(0, 255, 225, 0.5)', 'rgba(0, 255, 225, 0.7)'],
center: ['25%', '50%'],
radius: '50%',
outline: {
itemStyle: {
borderColor: 'rgba(0, 255, 225, 0.2)',
borderWidth: 5,
borderType: 'solid',
shadowBlur: 20
}
},
label: {
normal: {
formatter: '{c}%',
fontSize: 30,
color: 'rgba(0,0,0,0.5)'
}
}
},
{
type: 'liquidFill',
data: [0.8, 0.7, 0.6],
center: ['50%', '50%'],
radius: '50%',
color: ['#87CEFA', '#00CED1', '#FF69B4'],
outline: {
itemStyle: {
borderColor: 'rgba(128, 128, 128, 1)',
borderWidth: 8,
borderType: 'solid',
shadowBlur: 20
}
},
label: {
normal: {
formatter: '{c}%',
fontSize: 30,
color: 'rgba(0,0,0,0.5)'
}
}
},
{
type: 'liquidFill',
data: [0.4, 0.3, 0.2],
center: ['75%', '50%'],
radius: '50%',
color: ['rgba(255,250,250,0.7)','rgba(255,250,250,0.6)','rgba(255,250,250,0.5)'],
outline: {
itemStyle: {
borderColor: 'rgba(255,250,250,0.2)',
borderWidth: 5,
borderType: 'solid',
shadowBlur: 20
}
},
label: {
normal: {
formatter: '{c}%',
fontSize: 30,
color: 'rgba(0,0,0,0.5)'
}
}
}
]
};
四、水球图的局限性
虽然水球图是一种非常具有表现力和可读性的数据可视化类型，但同时也存在着它的局限性。其中最主要的一点就是，水球图不能自由展示更为复杂的数据，例如100%的数据占比，即一个实心圆，就无法通过水球图来展示。此外，水球图也不能够清晰地展现数据的发展和变化趋势，只能反映当前数据的占比和变化关系，而无法表达更为深入的数据信息。
但是，不论其是否存在局限性，ECharts水球图作为数据可视化展示的一种选择，其表现力和吸引力是其他图表所无法替代的。基于这种视觉上的呈现方式，ECharts水球图可以被广泛应用于基于数据分析领域中，如企业管理决策和金融、市场分析等领域。
