可视化图表:水球图,展示百分比的神器。

article/2024/5/23 2:00:45

Hi,我是贝格前端工场的老司机,本文分享可视化图表设计的水球图设计,欢迎老铁持续关注我们。

一、水球图及其作用

水球图是一种特殊的可视化图表,它主要用于展示百分比或比例的数据,并以水球的形式进行呈现。水球图的作用如下:

  1. 强调比例和百分比:水球图通过水球的大小来表示数据的比例或百分比,使得数据的相对大小一目了然。水球图可以帮助用户直观地理解数据的比例关系,特别适用于展示相对较小的数值差异。
  2. 吸引注意力:水球图的形式独特而有趣,能够吸引用户的注意力。相比于传统的柱状图或饼图,水球图更加生动和引人注目,有助于提升数据的可视化效果和吸引用户的注意。
  3. 情感表达:水球图的形象化呈现可以带来一定的情感表达。通过调整水球的颜色、透明度或纹理等视觉属性,可以传达不同的情感和意义。例如,可以使用红色水球表示危险或警告,使用绿色水球表示安全或良好等。
  4. 增加互动性:水球图可以与用户的交互操作结合,增加图表的互动性和可操作性。用户可以通过鼠标悬停或点击水球,获取更详细的数据信息或进行进一步的交互操作,提升用户体验和数据探索的灵活性。

需要注意的是,水球图适用于展示相对简单和直观的数据比例或百分比,对于复杂的数据关系或多维数据的展示,可能不太适合使用水球图。在选择图表类型时,需要根据数据的特征和目标传达的信息来综合考虑。


二、水球图的样式

水球图的样式可以根据需求和设计风格的不同进行灵活的调整和定制。以下是一些常见的水球图样式:

  1. 水球大小:水球图的主要特点是水球的大小表示数据的比例或百分比。水球的大小可以根据数据的大小比例进行调整,比例越大,水球越大。
  2. 水球颜色:水球图可以使用不同的颜色来表示不同的数据或区域。通常,可以使用渐变色或颜色映射来表示数据的程度或级别。例如,使用红色表示高风险,绿色表示低风险。
  3. 水球透明度:水球图可以通过调整水球的透明度来增加视觉效果和层次感。透明度较高的水球可以使背景的信息透过来,增加图表的层次感和深度感。
  4. 水球纹理:水球图可以使用纹理或图案来增加图表的视觉效果和细节。例如,可以使用波浪纹理来表示水球的液体状态,或使用图标纹理来表示不同的数据类型。
  5. 标签和文字:水球图可以在水球上方或下方添加标签或文字,用于标识数据或提供额外的信息。标签可以显示数据的具体数值或描述,文字可以用于表达附加的信息或说明。

需要根据具体的需求和设计风格来选择合适的水球图样式,以达到最佳的可视化效果和用户体验。同时,应该注意保持图表的简洁和清晰,避免过多的视觉元素和信息的混乱。


三、水球图的数学原理

水球图并没有严格的数学原理,它更多地是一种视觉表达方式,通过直观的图形来表示数据的比例或百分比关系。然而,水球图的绘制过程可以涉及一些基本的数学计算和几何原理。

  1. 比例计算:水球图的关键是将数据的比例转化为水球的大小。这涉及到对数据进行比例计算的过程。通常,可以将数据的值与总和或基准值进行比较,然后将比例应用于水球的大小。
  2. 水球形状:水球图通常采用球形或半球形状来表示数据。球形的几何原理涉及到球体的体积和表面积的计算。可以使用球体的半径或直径来表示数据的大小。
  3. 坐标系:水球图通常是在二维坐标系上绘制的,其中水球的位置和大小可以通过坐标来确定。坐标系的原理包括基本的平面几何和坐标转换。

需要注意的是,水球图更多地关注于数据的可视化效果和视觉表达,而不是严格的数学原理。在实际应用中,可以根据具体的需求和设计要求进行灵活的调整和定制,以达到最佳的可视化效果和用户体验。


四、如何使用echarts中的水球图

要使用ECharts中的水球图,您需要按照以下步骤进行操作:

  1. 引入ECharts库:在HTML文件中引入ECharts库的JavaScript文件。您可以从ECharts官网(https://echarts.apache.org/zh/index.html)下载最新版本的ECharts库,然后将其引入到您的项目中。
  2. 准备一个具有正确数据格式的数据源:水球图通常需要一个包含数据的数组,每个数据项包括名称和值。例如:
var data = [{name: '数据1', value: 50},{name: '数据2', value: 30},{name: '数据3', value: 20},
];
  1. 创建一个容器元素:在HTML文件中创建一个用于容纳水球图的元素,例如一个div元素,通过id属性来标识它:
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
  1. 初始化ECharts实例:在JavaScript代码中,使用ECharts的init方法初始化一个ECharts实例,并将其绑定到容器元素上:
var chartContainer = document.getElementById('chartContainer');
var chart = echarts.init(chartContainer);
  1. 配置水球图的样式和数据:使用ECharts的配置项来设置水球图的样式和数据。您可以根据需要设置水球图的大小、颜色、标签等属性。例如:
var option = {series: [{type: 'liquidFill',data: data,// 设置其他样式和属性}]
};
  1. 渲染水球图:通过调用ECharts实例的setOption方法,将配置项应用到水球图中,并进行渲染:
chart.setOption(option);
  1. 完成:现在,您应该能够在浏览器中看到您的水球图了。

请注意,以上步骤只是一个基本的示例,您可以根据具体的需求和ECharts的文档进行更多的配置和定制。ECharts提供了丰富的API和配置选项,可以帮助您创建出更复杂和个性化的水球图。

往期回顾


  • 可视化图表:关系图,一图分清父子兄弟关系。
  • 可视化图表:饼图,展示数据的比例关系。
  • 可视化图表:柱状图,最直观的比较数据的方式。
  • 可视化图表:折线图,非常简单的一类图表。
  • 可视化图表:散点图,数据分布一目了然。

  • 可视化图表:热力图一文扫盲,冷暖一目了然。
  • 可视化图表:雷达图的全面介绍,一篇就够了。
  • B端设计:可视化图表之甘特图,一文读懂。
  • 可视化设计:一文读懂桑基图,从来处来,到去出去。
  • 可视化图表:南丁格尔玫瑰图,来自历史上最著名的护士。

http://www.ngui.cc/article/show-1927802.html

相关文章

【ArcPy】批量读取文件夹excel中XY并转为点shp

示例展示 代码 只读取excel中含有XY字段的文件&#xff0c;并将矢量命名为excel文件名称。 import os import pandas as pd import arcpy folder_path r"C:\Users\admin\Desktop\excelfile" extension"xlsx" files [file for file in os.listdir(folder…

面试官上来就让手撕HashMap的7种遍历方式,当场愣住,最后只写出了3种

HashMap的7种遍历方式 四大类遍历方式 其实在JDK1.8之前&#xff0c;遍历的方式远没有现在这样多&#xff0c;为了提高开发效率&#xff0c;JDK1.8开始引入了Stream流、Lambda 表达式等新特性&#xff0c;这让很多数据结构的遍历方式也丰富了起来。目前&#xff0c;常用的遍历方…

《PyTorch深度学习实践》第十一讲卷积神经网络进阶

一、 1、卷积核超参数选择困难&#xff0c;自动找到卷积的最佳组合。 2、1x1卷积核&#xff0c;不同通道的信息融合。使用1x1卷积核虽然参数量增加了&#xff0c;但是能够显著的降低计算量(operations) 3、Inception Moudel由4个分支组成&#xff0c;要分清哪些是在Init里定义…

【Leetcode每日一题】二分查找 - LCR 173. 点名(难度⭐)(24)

1. 题目解析 Leetcode题目链接&#xff1a;LCR 173. 点名 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到题目所给的连续数组中缺失的数字即可。 2.算法原理 在这个升序的数组中&#xff0c;我们发现&#xff1a; …

antvX6 - Vue自定义节点,并实现多种画布操作,拖拽、缩放、连线、双击、检索等等

一、 首先 antv x6 分为两个版本 低版本和高版本 我这里是使用的2.0版本 并且搭配了相关插件 例如&#xff1a;画布的图形变换、地图等 个人推荐 2.0版本&#xff0c;高版本配置多&#xff0c;可使用相关插件多&#xff0c;但是文档描述小&#xff0c;仍在更新&#xff0c; 低…

【Linux C | 网络编程】getaddrinfo 函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

优思学院|3步骤计算出Cpk|学习Minitab

在生产和质量管理中&#xff0c;准确了解和控制产品特性至关重要。一个关键的工具是Cpk值&#xff0c;它是衡量生产过程能力的重要指标。假设我们有一个产品特性的规格是5.080.02&#xff0c;通过收集和分析过程数据&#xff0c;我们可以计算出Cpk值&#xff0c;进而了解生产过…

MSCKF2讲:JPL四元数与Hamilton四元数

MSCKF2讲&#xff1a;JPL四元数与Hamilton四元数 文章目录 MSCKF2讲&#xff1a;JPL四元数与Hamilton四元数2 JPL四元数2.1 定义与区别2.2 JPL四元数的乘法2.3 反对称矩阵2.4 Ω ( ω ) \Omega(\omega) Ω(ω)矩阵2.5 JPL四元数与旋转矩阵的转换2.6 JPL四元数导数2.7 JPL四元数…

Linux学习-字符串数组和字符串

目录 使用场景 字符型数组定义&#xff1a; 初始化 数组储存 打印 字符型数组常见函数 常见操作 strcpy&#xff1a;字符串拷贝 strcat&#xff08;str1&#xff0c;str2&#xff09;字符串拼接 strcmp&#xff1a;字符串比较 注意&#xff1a; 二维字符型数…

突破编程_C++_面试(异常处理)

面试题 1 &#xff1a;什么是异常处理&#xff1f;为什么需要它&#xff1f; 在C中&#xff0c;异常处理是一种处理程序运行时错误的机制。它允许程序员在程序的某个部分中定义和处理可能会出现的异常情况&#xff0c;即“异常”。这些异常情况通常是由错误条件、非法操作或其…