Avue-data数据大屏显示饼图(附Demo)

2024-06-22 09:36
文章标签 数据 显示 data demo 大屏 avue

本文主要是介绍Avue-data数据大屏显示饼图(附Demo),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 前言
  • 1. Sql查询
  • 2. 颜色细节

前言

对于这部分知识,原先有过柱状图实战:Avue-data数据大屏显示柱状图(附Demo讲解)

以下直奔主题,以Sql数据库数据为主

1. Sql查询

以饼图为例,需要返回的形式如下:

[{"name": "周口","value": 55},{"name": "南阳","value": 120},{"name": "西峡","value": 78},{"name": "驻马店","value": 66}
]

对应响应的数据需要接收name以及value

对应查询出来的数据如下:

在这里插入图片描述

饼图多数以单值的形式进行存储

对应需要配置成我们需要返回的响应数据

其过滤器规则如下:(根据自身的规则去除不需要的字段值)

(data) => {const { ID, GDate, etltime, ...rest } = data[0]; // 解构去除不需要的字段return Object.entries(rest).map(([name, value]) => ({name,value}));
};

截图如下:

在这里插入图片描述

最终的成效图如下:(按照设定的时间进行动态跳转)

在这里插入图片描述

2. 颜色细节

对于更改颜色等细节变化

不可直接在过滤器中修改,无法生效

下述Demo错误:

(data) => {const colorMap = {"A": "red","B": "green","C": "blue","D": "orange","E": "purple","F": "cyan","G": "magenta"};// 解构去除不需要的字段const { ID, GDate, etltime, ...rest } = data[0]; // 创建数据项数组const formattedData = Object.entries(rest).map(([name, value]) => ({name,value}));// 创建颜色数组const colors = Object.keys(rest).map(name => colorMap[name] || "defaultColor");return {data: formattedData,color: colors,unit: '单位'};
};

此处的过滤器只有data数值,不应该返回任何颜色的属性

保持原先代码:

(data) => {const { ID, GDate, etltime, ...rest } = data[0]; // 解构去除不需要的字段return Object.entries(rest).map(([name, value]) => ({name,value}));
};

修改颜色的配置位于此处:

在这里插入图片描述

对应的颜色配置如下:

(data)=>{return {config:{radius: '40%',activeRadius: '45%',data: data,color : ['#e062ae', // 粉红色'#fb7293', // 玫瑰红'#e690d1', // 浅粉色'#32c5e9', // 天蓝色'#96bfff', // 浅蓝色'#9e62ae', // 紫红色'#7f62ae'  // 紫色],digitalFlopStyle: {fontSize: 20},showOriginValue: true}}
}

结果如下:
在这里插入图片描述

这篇关于Avue-data数据大屏显示饼图(附Demo)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1083919

相关文章

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片