Avue-data数据大屏显示柱状图(附Demo讲解)

目录

  • 前言
  • 1. 接口方式
  • 2. SQL查询

前言

由于网上对这部分的知识点相对较少,研究半天的框架最终输出结果

此文主要以记录总结的方式展示如何使用数据库以及接口方式

在这里插入图片描述

需要明白柱状图的返回数据格式:

#柱状图数据格式
{"categories": ["苹果",],"series": [{"name": "手机品牌","data": [1000879,]}]
}

同理其他的图形

对于这部分的基础知识推荐阅读:

  1. Avue框架实现图表的基本知识 | 附Demo(全)
  2. 详细分析Python中的SQLAlchemy库(附Demo)

1. 接口方式

接口方式的输出比较简单,通过制作一个MYSQL等数据库的查询来操作,制作的接口一定要加入跨源

对应的接口模版如下:(python为主)
使用该Demo的时候只需要替换数据库的连接信息以及查询语句信息即可

from flask import Flask, jsonify
from flask_cors import CORS
import mysql.connectorapp = Flask(__name__)
CORS(app)  # 启用CORSdef fetch_data():# 建立数据库连接conn = mysql.connector.connect(host="xxx",user="root",password="root",database="xxx")cursor = conn.cursor()# 执行查询query = """数据库查询语句"""cursor.execute(query)results = cursor.fetchall()# 关闭数据库连接cursor.close()conn.close()# 转换为avue-data格式avue_data = {"categories": [],"series": [{"name": "码农研究僧","data": []}]}for result in results:date, num = resultavue_data["categories"].append(date)avue_data["series"][0]["data"].append(num)return avue_data@app.route('/api/data', methods=['GET'])
def get_data():data = fetch_data()app.logger.info(f"Returned data: {data}")return jsonify(data)if __name__ == '__main__':app.run(debug=True)

通过python xx.py启动程序即可

最终截图如下:

在这里插入图片描述

访问接口其截图如下:

在这里插入图片描述
查看其格式与柱状图的格式一致,对此只需要将其填入平台即可

在这里插入图片描述

2. SQL查询

通过平台来查询的方式比较简单

配置好数据源之后,放置对应的SQL语句

在这里插入图片描述

配置好数据库之后,查询出来的语句如下:

在这里插入图片描述
对应需要转换成柱状图所需要的格式

对应在过滤器上进行配置
在这里插入图片描述

配置规则如下:

(data)=>{console.log(data)return {categories:data.map(v => v.date),series: [{"data": data.map(v => v.num)}]}
}

如果要个性化设置,加入一些图标,可以加入name或者其他

最终请求数据,结果如下:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【redis】Spring之RedisTemplate配置与使用

1.概述 转载:Spring之RedisTemplate配置与使用 用过redis,但直接使用Jedis进行相应的交互操作,现在正好来看一下RedisTemplate是怎么实现的,以及使用起来是否更加便利 2. 基本配置 2.1. 依赖 依然是采用Jedis进行连接池管理&…

C# 接口的使用案例

IEnumerable接口的使用案例 1. IEnumerable接口同时满足数组和列表2. OPPO和VIVO使用相同接口 1. IEnumerable接口同时满足数组和列表 利用 IEnumerable 这个接口来实现一个方法可以同时满足数组和列表传入。接口就是供需双方的约定/契约,需求方是用户需要计算一组…

组织是什么,为什么需要组织,为什么需要公司

垂直组织 组织架构设计,曾经咱们多个章节进行沟通,今天再回到组织本身。不妨可以思考一个这样的问题,或者随访身边的老板或者朋友,让他们绘制一个组织架构图,或者绘制一个本组织一个视图,得到以下图的示意…

TypeScript中的迭代器和生成器:控制数据流的新方法

引言 迭代器和生成器是ES6及更高版本JavaScript中引入的两个强大的迭代协议,它们提供了一种新的方式来遍历数据集合和控制函数的执行流程。TypeScript通过类型系统增强了这些特性,使得迭代更加安全和灵活。 基础知识 迭代器(Iterator&…

vue从入门到精通(六):数据代理

一&#xff0c;什么是数据代理 通过一个对象代理对另一个对象中属性的操作 二&#xff0c;object.defineproperty方法 object.defineproperty方法可以对对象追加属性 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>object…

[Redis]Set类型

集合类型也是保存多个字符串类型的元素的&#xff0c;但和列表类型不同的是&#xff0c;集合中 1&#xff09;元素之间是无序的 2&#xff09;元素不允许重复 一个集合中最多可以存储2^32-1个元素。 Redis 除了支持集合内的增删查改操作&#xff0c;同时还支持多个集合取交…

【数据结构】链表----头结点的作用

链表是一种常见的数据结构&#xff0c;由一系列节点&#xff08;Node&#xff09;组成&#xff0c;每个节点包含数据和指向下一个节点的指针。链表的头结点&#xff08;Head Node&#xff09;也称为哨兵位&#xff0c;是链表的起点&#xff0c;通常有以下几个重要作用&#xff…

盲盒小程序库存管理的关键策略

随着盲盒经济的兴起&#xff0c;越来越多的商家开始投入盲盒小程序的开发与运营。然而&#xff0c;在享受市场红利的同时&#xff0c;库存管理的问题也随之而来。合理的库存管理不仅能够满足用户需求&#xff0c;还能有效优化库存周转率&#xff0c;提升商家的盈利能力。本文将…

有光摄影分享网站系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;基础数据管理&#xff0c;论坛管理&#xff0c;足球资讯管理&#xff0c;球队管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;活动&#xff0c;论坛…

『大模型笔记』什么是提示词注入(Prompt Injection)攻击?

什么是提示词注入(Prompt Injection)攻击? 文章目录 一. 什么是提示词注入(Prompt Injection)?二. 参考文献一. 什么是提示词注入(Prompt Injection)? 想花1美元买一辆新SUV吗?有人真的尝试过这样做。事实上,他们在一家特定汽车经销商的网站聊天机器人上进行了尝试。为了…

Shell路径变量切割

目录 使用参数扩展来切割路径 1. 获取文件名部分 2. 获取目录部分 3. 获取文件扩展名 4. 获取没有扩展名的文件名 使用命令行工具来切割路径 1. 获取文件名 basename 2. 获取目录名 dirname 总结&#xff1a; # 和 ## 用于删除字符串前缀 % 和 %% 用于删除字符串后缀…

HCIA--OSPF实验(复习)

实验拓扑&#xff1a; 实验思路&#xff1a; 1.规划IP&#xff0c;配置环回&#xff0c;接口IP 2.把R1&#xff0c;R2优先级改为0&#xff0c;让R1、R2放弃选举&#xff0c; [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ospf dr-priority 0 <r1>reset ospf…

C语言:IO操作

引言 I/O操作是一切实现的基础。IO即为input &output 标准IO&#xff08;stdio&#xff09; FILE类型贯穿始终&#xff0c;FILE是由typedef定义出来的 vii /usr/include/asm-generic/errno-base.h (errno定义的位置) /usr/include/x86_64-linux-gnu/bits/types/struct…

12-从URL到页面:探寻Web页面渲染的全过程

从URL到页面&#xff1a;探寻Web页面渲染的全过程 笔记分享 在我们浏览网页时&#xff0c;从输入URL到最终页面呈现在浏览器上&#xff0c;这背后发生了一系列复杂的步骤。本文将详细介绍这个过程&#xff0c;包括TCP连接的建立与终止。 1. DNS解析 当你在浏览器中输入一个U…

工业自动化喷涂生产线设计方案

利用机械臂代替人工进行喷涂工艺生产线的设计实现方案可以减少人工成本&#xff0c;同时提高整厂自动化程度&#xff0c;提高生产效率&#xff0c;改善工人办公环境&#xff0c;本文简单介绍如何利用机械臂代替人工进行自动化喷涂生产线设计。 整体布置包括利用三台埃夫特机械臂…

Github 2024-06-04 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-04统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10Shell项目1TypeScript项目1yt-dlp: 一个增强版的youtube-dl分支 创建周期:1184 天开发语言:Python协议类型:The UnlicenseStar数…

数据结构——哈希表、哈希桶

哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较&#xff0c;顺序查找时间复杂度为O(N),平衡树中为树的高度,即O(logN),搜索的效率取决于搜索过程种元素的比较次…

ElasticSearch学习笔记之一:介绍及EFK部署

1. 系统概述 The Elastic Stack&#xff0c;包括Elasticsearch、Kibana、Beats和Logstash&#xff08;也成为ELK Stack&#xff09; Elasticsearch&#xff1a;简称ES&#xff0c;是一个开源的高扩展的分布式全文搜索引擎&#xff0c;是整个Elastic Stack技术栈的核心。它可以…

docker安装redis以及持久化

为了避免当虚拟机关机后redis数据丢失的情况&#xff0c;redis需要持久化。所以要挂载数据卷 创建数据和配置存放的目录 [root192 data]# pwd /root/data [root192 data]# mkdir -p /root/data/redis/conf && chmod 777 /root/data/redis/conf [root192 data]# mkdir …

Ant Design Vue 动态表头并填充数据

在使用 Ant Design Vue 动态生成表头并填充数据时&#xff0c;你需要以下几个关键步骤&#xff1a; 1. **安装 Ant Design Vue**&#xff1a; 确保你已经安装并配置了 Ant Design Vue。 bash npm install ant-design-vue 2. **引入 Ant Design Vue 组件**&#xff…