当前位置：首页 > news >正文

数据可视化:php+echarts实现数据可视化(包含echart安装引入)

news 来源：原创 2025/8/15 11:28:14

一、实现效果

实现动态时间，多列柱状图，单列柱状图，普通表格，表格动画等效果

二、实现

1、动态时间显示

通过php获取当前时间

设置计时器来动态显示时间秒数

<!-- 时间动画 -->
<script>// 动态更新时间中的秒数function updateTime() {const now = new Date();const hours = String(now.getHours()).padStart(2, '0');const minutes = String(now.getMinutes()).padStart(2, '0');const seconds = String(now.getSeconds()).padStart(2, '0');const formattedTime = `${hours}:${minutes}:${seconds}`;// 更新时间显示document.getElementById('current-time').textContent = formattedTime;}// 每秒更新一次时间setInterval(updateTime, 1000);// 页面加载时立即更新时间updateTime();
</script>

2、非图表数据获取

第一行的标题，第二行的第一列，第二列，第三行的第三列均使用普通数据

①主页面展示框架

例如，线别的获取，写入div框架，内部的内容由ajax获取

②ajax请求

请求数据同时设置刷新时间，保证数据的及时更新

function fetchData() {fetch('echarts/get_base_data.php').then(response => response.json()).then(data => {console.log(data);// 线别const lineTitle = document.querySelector('.line1_title');if (lineTitle && data.linebody && data.linebody.linebody) {lineTitle.textContent = data.linebody.linebody;}// 清空旧工单信息const wipContainer = document.querySelector('.line2_item1');if (wipContainer) {wipContainer.innerHTML = ''; // 清空之前的内容if (data.wip) {const wipHtml = `<div class="line2_1_block flex flex-between"><div class="line2_1_title">工单号</div><div class="line2_1_content">${data.wip.wip_entity_name || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">机种料号</div><div class="line2_1_content">${data.wip.item_no || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">机种名称</div><div class="line2_1_content">${data.wip.item_name || ''}</div></div><div class="line2_1_block flex flex-between"><div class="line2_1_title">规格型号</div><div class="line2_1_content">${data.wip.item_desc || ''}</div>

数据可视化:php+echarts实现数据可视化(包含echart安装引入)

一、实现效果实现动态时间，多列柱状图，单列柱状图，普通表格，表格动画等效果二、实现 1、动态时间显示通过php获取当前时间设置计时器来动态显示时间秒数  <script>// 动态更新时间中的秒数function updateTime() {const now = new D…...

编程日记 2025/8/15 11:28:14

《Python星球日记》第47天：聚类与KMeans

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏：《Python星球日记》，限时特价订阅中ing 目录一、聚类与…...

编程日记 2025/8/14 20:30:55

linux(centos)联网情况下部署

nginx部署 1.linux(centos)联网情况下部署 1.下载nginx所需依赖 # 安装开发工具组（若未安装） sudo yum groupinstall "Development Tools"# 安装 OpenSSL 开发包 sudo yum install openssl-devel# 安装 PCRE 开发包 sudo yum install pcre-…...

编程日记 2025/8/14 20:30:53

Kubernetes生产级资源管理实战：从QoS策略到OOM防御体系

一、资源限制的本质：不是成本控制，而是稳定性保障当集群中某个节点的内存耗尽时，Kubernetes会像冷酷的交通警察一样，根据Pod的"优先级证件"（QoS类别）决定哪些Pod需要被驱逐。这种机制直接关系到…...

编程日记 2025/8/14 20:30:51

gcc的使用

gcc 是 GNU Compiler Collection（GNU 编译器套件）的缩写，是 GNU 项目开发的编程语言编译器集合，支持多种编程语言（如 C、C、Objective-C、Fortran、Ada 等）。以下是关于 gcc 的核心信息： 1. 主要…...

编程日记 2025/8/14 20:30:50

聊一聊Qwen3思考模式实现以及背后原理探讨

Qwen3思考模式切换实现硬开关我们先通过官方的示例代码来体验一下，如何实现在思考模式和非思考模式之间切换通过tokenizer.apply_chat_template的enable_thinking参数来实现默认情况下，Qwen3 启用了思考功能，类似于 QwQ-32B。这意味着…...

编程日记 2025/8/14 20:30:48

spark行动算子

在 Apache Spark 中，行动算子（Action）用于触发对 RDD 的实际计算，并将结果返回给驱动程序（Driver）或保存到外部存储系统中。与转换算子（Transformation）不同，行动算子会立…...

编程日记 2025/8/14 20:30:46

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import jieba # 数据读取 df pd.read_csv(双十一_淘宝美妆数据.csv) # 数据清洗 # 处理重复值 data df.drop_duplicates(inplaceFalse) data data.reset_index(in…...

编程日记 2025/8/14 20:30:44

STM32裸机开发问题汇总

一、代码编写 1. keil中某个文件无法修改 keil中某个文件无法修改，不能输入_keil5 h文件无法修改-CSDN博客 2.编译报错declaration may not appear after executable statement in block STM32常见错误error: #268: declaration may not appear after executabl…...

编程日记 2025/8/14 11:40:17

C语言复习笔记--自定义类型

今天我们来复习一下自定义类型.自定义类型大概分为结构体,枚举,联合体,数组这几种.数组在之前就介绍过.今天我们来看下其他三种. 结构体首先来看结构体. 结构体类型的声明之前在操作符的地方简单认识过结构体.下面我们回顾一下. 结构体回顾结构是⼀些值的集合，这…...

编程日记 2025/8/14 18:54:47

做 iOS 调试时，我尝试了 5 款抓包工具

日常做开发的人，特别是和客户端接口打交道的同学，应该对“抓包”这件事不陌生。调试登录流程、分析接口格式、排查错误返回、分析网络性能、甚至研究第三方 App 的数据通信……说到底，都绕不开“抓 HTTPS 包”这一步。而这一步&#xff0…...

编程日记 2025/8/14 21:41:43

html css js网页制作成品——HTML+CSS珠海网页设计网页设计（4页）附源码

目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目七、🎁更多干货一、👨‍&#x1f…...

编程日记 2025/8/14 17:50:03

FID和IS的区别

📊 生成模型评估：你选 IS 还是 FID？ 在评估 GAN、Diffusion 等图像生成模型时，两个最常被提到的指标是： 🔹IS (Inception Score) 🔹FID (Frchet Inception Distance) 🧠 Inception…...

编程日记 2025/8/14 20:30:41

前端三大件--HTML

引言在互联网的世界里，每一个绚丽多彩的网页背后，都离不开 HTML 的支撑。HTML（Hyper Text Markup Language，超文本标记语言）作为网页开发的基础语言，就像是搭建高楼大厦的砖块，是所有 Web 开发…...

编程日记 2025/8/14 20:30:39

Node.js 的 child_process 模块详解

Node.js 的 child_process 模块提供了创建子进程的能力，使 Node.js 应用能够执行系统命令、运行其他程序或脚本。这个模块非常强大，可以帮助我们实现很多复杂的功能。 1. exec - 执行 shell 命令 exec 方法用于执行 shell 命令，并缓冲任何产生的输出。特点创建 shell 来…...

编程日记 2025/8/14 20:30:38

日常知识点之随手问题整理（虚函数虚函数表继承的使用场景）

新来的同事提到一个虚函数解耦头文件的问题，就想起来对虚函数进行一些回顾。他的问题是，通过纯虚函数，如何实现不包含头文件即可真正调用到子类的实际接口。》这里肯定是不合理的，需要一个中间管理类，对纯虚函数和相…...

编程日记 2025/8/14 20:30:36

【软件设计师：数据结构】2.数据结构基础（二）

一、树树是n(n≥0)个结点的有限集合，n=0时称为空树，在任一非空树中 ● 有且仅有一个称为根的结点。 ● 其余的结点可分为m(m≥0)个互不相交的子集T1，T2…，Tm，其中每个子集本身又是一棵树，并称其为根结点的子树。 1、树的基本概念 ● 双亲和孩子 ● 兄弟：具有相同双…...

编程日记 2025/8/14 20:30:34

Python训练营打卡——DAY18（2025.5.7）

目录一、基于聚类进一步推断类型 1. 聚类分析 2. 簇的总结与定义二、作业 1. 聚类分析 2. 簇的总结与定义 3. 模型效果提升一、基于聚类进一步推断类型选用昨天kmeans得到的效果进行聚类，进而推断出每个簇的实际含义。 1. 聚类分析 # 先运行之前预处理…...

编程日记 2025/8/14 14:54:15

初学Python爬虫

文章目录前言一、爬虫的初识1.1 什么是爬虫1.2 爬虫的核心1.3 爬虫的用途1.4 爬虫分类1.5 爬虫带来的风险1.6. 反爬手段1.7 爬虫网络请求1.8 爬虫基本流程二、urllib库初识2.1 http和https协议2.2 编码解码的使用2.3 urllib的基本使用2.4 一个类型六个方法2.5 下载网页数据2…...

编程日记 2025/8/14 13:19:27

【CSS】Grid 的 auto-fill 和 auto-fit 内容自适应

CSS Grid 的 auto-fill 和 auto-fit /* 父元素 */ .grid {display: grid;/* 定义「网格容器」里有多少列，以及每列的宽度 *//* repeat 是个「重复函数」，表示后面的模式会被重复多次 *//* auto-fit 是一个特殊值，自动根据容器宽度&#xff…...

编程日记 2025/8/14 20:30:33

绕线机的制作与研究

绕线机的制作与研究摘要本文详细阐述了绕线机的制作过程，涵盖从设计规划到实际制作的各个环节。通过对绕线机工作原理的深入分析，确定了关键技术参数，并依此完成机械结构与控制系统的设计。在制作阶段，运用多种加工工艺完成零件制造与设备组装。经测试，自制绕线机性能…...

编程日记 2025/8/14 20:30:31

引用的使用

引用的语法作用：起别名引用的本质是指针常量数据类型 &别名原名； 引用必须要初始化引用一旦初始化，不能修改不能返回局部变量的引用引用做形参 #include<iostream> #include<string> using namespace std; //通过引用…...

编程日记 2025/8/14 20:30:29

css animation 动画属性

animation // 要绑定的关键帧规则名称 animation-name: slidein;// 定义动画完成一个周期所需的时间，秒或毫秒 animation-duration: 3s;// 定义动画速度曲线 animation-timing-function: ease;// 定义动画开始前的延迟时间 animation-delay: 1s;// 定义动画播放次数…...

编程日记 2025/8/14 20:30:27

Nacos源码—Nacos集群高可用分析（二）

4.集群节点的健康状态变动时的数据同步 (1)Nacos后台管理的集群管理模块介绍在集群管理模块下，可以看到每个节点的状态和元数据。节点IP就是节点的IP地址以及端口，节点状态就是标识当前节点是否可用，节点元数据就是相关的Raft信息。其中节点…...

编程日记 2025/8/14 21:41:40

SRAM详解

一、SRAM基础原理定义与结构 SRAM（Static Random-Access Memory，静态随机存取存储器）是一种基于触发器（Flip-Flop）结构的易失性内存，通过交叉耦合的反相器（6晶体管，6T单元&#xff…...

编程日记 2025/8/14 21:41:39

JavaWeb：MySQL进阶

多表设计一对多（多对一） 外键一对一多对多多表查询内连接外连接子查询 -- 查询员工表 select * from emp;-- 查询部门表 select * from dept;-- 查询员工和部门 select * from emp, dept; -- 笛卡尔积select * from emp, dept where emp.dept_i…...

编程日记 2025/8/14 21:41:37

Golang 接口 vs Rust Trait：一场关于抽象的哲学对话

一、引言在现代编程语言中，接口（Interface） 和 Trait 是实现多态和抽象行为的关键机制。它们允许我们定义行为契约，让不同的类型共享相同的语义接口，从而提升代码的复用性和扩展性。 Go 和 Rust 分别代表了两种截然…...

编程日记 2025/8/14 21:41:35

智算中心的搭建标准

智算中心的搭建标准主要涉及以下几个方面： 开放标准： 硬件与软件开放：从硬件到软件、从芯片到架构，都应采用开放、标准的技术。例如，硬件支持如 OCP、ODCC、Open19 等开放社区标准，软件采用如 OpenStack、K…...

编程日记 2025/8/14 21:41:33

商汤科技前端面试题及参考答案

有没有配置过 webpack，讲一下 webpack 热更新原理，能否自己实现一些插件？ Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。在实际项目中，经常会对其进行配置，以满足项目的各种需求，比如处理不同类型的文件、优化代码、配置开发服务器等。 Webpack 热更…...

编程日记 2025/8/14 21:41:31

windows下docker的使用

找了个docker教程 Windows Docker 安装 | 菜鸟教程Windows Docker 安装 Docker 并非是一个通用的容器工具，它依赖于已存在并运行的 Linux 内核环境。Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境，因此它执行的效率几乎等同于所部署的…...

编程日记 2025/8/14 21:41:29

AI日报 · 2025年5月07日｜谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本)，大幅提升编码与视频理解能力

1、谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本)，大幅提升编码与视频理解能力谷歌于5月6日提前发布 Gemini 2.5 Pro 预览版 (I/O 版本)，为开发者带来更强编码能力，尤其优化了前端与UI开发、代码转换及智能体工作流构建，并在WebDe…...

编程日记 2025/8/14 21:41:27

Redis 8.0 正式版发布，新特性很强！

就在前两天，Redis 8.0 正式版 (GA) 来了！这并不是一次简单的更新，Redis 8.0 不仅带来了性能上的进一步提升，还带来一些实用的新特性与功能增强。并且，最重要的是拥抱 AGPLv3 重归开源！ 下面，简单…...

编程日记 2025/8/14 21:41:26

MySQL核心机制：日志系统、锁机制与事务管理的深度剖析

一.介绍 MySQL作为世界上最流行的开源关系型数据库之一，其强大的事务处理能力和高并发支持使其在各种复杂应用场景中得到广泛应用。MySQL的核心机制包括日志系统、锁机制和事务管理，这些机制共同确保了数据库的ACID特性，为应用程序提供了可靠…...

编程日记 2025/8/14 21:41:23

Mybatis标签使用 -association 绑定对象，collection 绑定集合

注意 association标签中的 select , column 属性使用 collection 标签中的 ofType 属性使用 Data public class Tours implements Serializable {private static final long serialVersionUID 1L;private Integer touId;private String tourName;private Integer guideId;pri…...

编程日记 2025/8/14 21:41:21

IBM BAW（原BPM升级版）使用教程Toolkit介绍

本部分为“IBM BAW（原BPM升级版）使用教程系列”内容的补充。一、系统Toolkit 在 IBM Business Automation Workflow (BAW) 中，System Toolkit 是一组预先定义和配置好的工具、功能和组件，旨在帮助流程设计者和开发人员快速构建…...

编程日记 2025/8/14 21:41:19

排列组合算法：解锁数据世界的魔法钥匙

在 C 算法的奇幻世界里，排列和组合算法就像是两把神奇的魔法钥匙，能够帮我们解锁数据世界中各种复杂问题的大门。今天，作为 C 算法小白的我，就带大家一起走进排列和组合算法的奇妙天地。排列算法：创造所有可能的顺序…...

编程日记 2025/8/14 17:26:17

LVGL -meter的应用

1 meter介绍 lv_meter 是 LVGL v8 引入的一种图形控件，用于创建仪表盘样式的用户界面元素，它可以模拟像速度表、电压表、温度表这类模拟表盘。它通过可视化刻度、指针、颜色弧线等来展示数值信息，是一种非常直观的数据展示控件。 1.1 核心特…...

编程日记 2025/8/13 23:38:28

MCP学习

一、MCP基础理论与核心概念 1.1 协议定义与设计目标 MCP（Model Context Protocol）是Anthropic公司于2024年11月开源的标准化协议，旨在解决大型语言模型（LLM）与外部工具、数据源之间的动态交互问题。其核心目标包括&…...

编程日记 2025/8/14 21:41:13

软件工程（三）：模块的内聚模型

模块内聚的7种类型（从低到高） 等级类型描述示例1️⃣ 最低偶然性内聚（Coincidental Cohesion）模块内部的各功能毫无关系，随机拼凑一个模块中既有文件读写，又有图像压缩、还处理用户登录2️⃣逻辑性内聚&am…...

编程日记 2025/8/14 21:41:12

Java中字符转数字的原理解析 - 为什么char x - ‘0‘能得到对应数字

前言在Java编程中，我们经常需要将字符形式的数字转换为实际的数值。有很多方法可以实现这一转换，比如使用Integer.parseInt()或Character.getNumericValue()等方法。但有一种简便且高效的方式是直接使用char - 0运算，本文将详细解析这种方法…...

编程日记 2025/8/14 21:41:10

View的事件分发机制

（一）为什么要有事件分发机制安卓界面上面的View的层级结构是树形的，可能出现多个View重叠在一起的现象（如下图），当我们点击的地方为多个View重叠的区域时，这个点击事件应该给谁呢？为…...

编程日记 2025/8/14 21:41:08

【C++】类和对象【下】

目录一、再探构造函数1、测试题二、类型转换三、static成员1. 静态成员变量2. 静态成员函数四、友元五、内部类六、匿名对象七、对象拷贝时的编译器优化个人主页<—请点击 C专栏<—请点击一、再探构造函数之前我们实现构造函数时，初始化成员变量主要使…...

编程日记 2025/8/14 21:41:06

【JS逆向基础】并发爬虫

前言：所谓并发编程是指在一台处理器上“同时”处理多个任务。并发是在同一实体上的多个事件。强调多个事件在同一时间间隔发生。 1，进程、线程以及协程【1】进程概念我们都知道计算机的核心是CPU，它承担了所有的计算任务;而操作系统是计算…...

编程日记 2025/8/14 21:41:04

Android组件化 -＞基础组件进行Application，Activity生命周期分发

在lib_common基础组件模块创建上下文持有类，生命周期派发类 object AppContextProvider {private lateinit var application: Applicationprivate var currentActivityRef: WeakReference<Activity>? null// 应用生命周期监听器列表private val appLifecyc…...

编程日记 2025/8/14 21:41:02

42. PCB防静电环设计

PCB防静电环的作用 1. PCB防静电环的作用2. 防静电环设计技术点 1. PCB防静电环的作用防静电环主要用于生产、运输、售后等环节人体会直接接触电路板的场景。防静电环只在顶层和底层设计即可。 2. 防静电环设计技术点...

编程日记 2025/8/14 8:53:13

深入理解Java反射机制

java反射是java语言中一个强大而灵活的特性，它允许程序在运行时检查和操作类、接口、字段和方法。为了方便理解下文，我先给出Cat对象 public class Cat implements jump,Run {private int age;public String name;protected String color;double he…...

编程日记 2025/8/14 21:40:58

嵌入式音视频通话EasyRTC基于WebRTC技术驱动智能带屏音箱：开启智能交互新体验

一、引言随着智能家居市场的蓬勃发展，智能带屏音箱作为家庭智能交互中心的重要组成部分，其功能需求日益丰富。EasyRTC凭借其低延迟、高稳定性的特点，为智能带屏音箱带来了全新的交互体验，能满足用户在视频通话、远程监控、在线…...

编程日记 2025/8/14 21:40:56

1987-2023年各省进出口总额数据整理（含进口和出口）（无缺失）

1987-2023年各省进出口总额数据整理（含进口和出口）（无缺失） 1、时间：1987-2023年 2、来源：各省年鉴、统计公报 3、指标：进出口总额（万美元）、进口总额（万美…...

编程日记 2025/8/14 21:40:55

paddle ocr 或 rapid ocr umi ocr 只识别了图片的下部分内容解决方案

如上图，识别的准确率其实很高，但是只识别了下半部分的内容，上半部分的内容就没有识别到，其实是程序设置有点问题，程序设置的解决方案如下：如上图，识别的准确率其实很高，但是只识别了下半部分的内容，上半部分的内容就没有识别到，其实是程序设置有点问题，程序设置的…...

编程日记 2025/8/14 21:40:53

【深度学习-Day 7】精通Pandas：从Series、DataFrame入门到数据清洗实战

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/8/14 21:40:51