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

可视化大屏 - 项目1

news 2025/7/8 23:33:10

文章目录

  • 技术栈
  • echarts 可视化
  • 需求分析
  • 代码实现

技术栈

  • flexible.js + rem 实现不同终端下的响应式布局，根据不同屏幕宽度，自适配布局；

    • html中引入index.js，可以改名为flexible.js；
    • 默认划分10份，可以自己修改，比如24份，rem = widthPixel / 24 + ‘px’
      在这里插入图片描述

  • vscode 安装cssrem插件，将像素px 转为 rem份额；
    file > preferences > settings 在这里插入图片描述
    也可以点击扩展图标>对应插件的齿轮图表> Extension Settings
    在这里插入图片描述
     
    设置完成，重启vscode，编辑css width 像素时，会自动计算划分的rem数，选择即可，如下：
    在这里插入图片描述
     
    编写一个div块，设置width:80px; height:80px; 检查响应效果；

  • Flex布局；

  • Less ；

  • eCharts 可视化

 

echarts 可视化

  • 百度开源的 js 可视化库，其他还有如D3.js 可视化库；

  • 使用PC端、移动端，兼容主流的浏览器；

  • echarts apache官网; (https://www.echartsjs.com/)

  • echarts快速入门

  • 使用步骤:

    • 下载echarts.js 文件，并在html页面中引用；
    • 准备图表的容器；
    • echarts.init(容器) 初始化实例对象；
    • 指定配置项、数据；
    • 将配置项设置为echarts的实例对象;

  • 基础配置项 ->配置项手册

var option = {title: { // 图表的标题text: 'Stacked Line'},tooltip: { // 提示框组件trigger: 'axis' //axis坐标轴出发  item 图表触发},legend: { // 图例data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] // 图例名称},grid: { // 坐标网格left: '3%', //左边 距离容器距离right: '4%', bottom: '3%',containLabel: true // 包含刻度},toolbox: { // 工具箱组件feature: {saveAsImage: {}}},xAxis: { // x轴type: 'category', // 类别boundaryGap: false, // 图表与坐标轴的间隙data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 类别名},yAxis: { // y轴type: 'value' // 显示值},color: ["red", "black", "pink", "blue", "yellow"], // 每个图形的颜色series: [ // 图形数组{name: 'Email', // 该图表的图例，有name时，legend可以省略type: 'line', // 该图表类型stack: 'Total', // 不同的图形 数据堆叠data: [120, 132, 101, 134, 90, 230, 210] // 该图表的数据},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};

 

需求分析

 
在这里插入图片描述

代码实现

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/index.css"><title>数据可视化</title>
</head>
<body><script src="js/flexible.js"></script><script src="js/echarts.js"></script><script src="js/index.js"></script><script src="js/jquery.js"></script><!-- css设置body 背景图 --><!-- header 块 --><div class="header"><h1>数据可视化</h1><div class="showTime"></div></div><!-- 显示时间的js --><script type="text/javascript">// 显示时间的函数function freshTime(){var date = new Date();// 块级作用域的变量let divShowTime = document.getElementsByClassName("showTime")[0];// 解析时间元素let curYear = date.getFullYear();let curMonth = date.getMonth() + 1; // month从0开始，所以+1curMonth = curMonth < 10 ? "0" + curMonth : curMonth;let curDate = date.getDate();curDate = curDate < 10 ? "0" + curDate : curDate;let curHours = date.getHours();curHours = curHours < 10 ? "0" + curHours : curHours;let curMinutes = date.getMinutes();curMinutes = curMinutes < 10 ? "0" + curMinutes : curMinutes;let curSeconds = date.getSeconds();curSeconds = curSeconds < 10 ? "0" + curSeconds : curSeconds;// java 和 javascript 都支持字符串与数值的拼接divShowTime.innerHTML = "当前时间：" + curYear + "-" + curMonth + "-" + curDate + " " + curHours + ":" + curMinutes + ":" + curSeconds;}// 立即执行函数(function(){// 设置定时器 ， 每秒执行一次freshTime函数setInterval(freshTime, 1000);})()</script><!-- 主体部分  --><div class="main"><div class="column"><!-- 左列 --><div class="commonPanel bar"><h2>柱形图</h2><div class="chart"></div><div class="footer"></div></div><div class="commonPanel line"><h2 id="leftLine">折线图<a href="javascript:;" class="leftLineTab3">2023</a><a href="javascript:;" class="leftLineTab4">2024</a></h2><div class="chart"></div><div class="footer"></div></div><div class="commonPanel pie"><h2>圆饼图</h2><div class="chart"></div><div class="footer"></div></div></div><div class="column"><!-- 中间列 --><div class="num"><div class="head"><ul><li>1230</li><li>456</li></ul></div><div class="body"><ul><li>需求人数</li><li>供应人数</li></ul></div></div><div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div><div class="chart"></div></div></div><div class="column"><!-- 右列 --><div class="commonPanel bar"><h2>柱形图</h2><div class="chart"></div><div class="footer"></div></div><div class="commonPanel"><h2>折线图</h2><div class="chart"></div><div class="footer"></div></div><div class="commonPanel"><h2>圆饼图</h2><div class="chart"></div><div class="footer"></div></div></div></div><!-- 展示地图 --><script src="js/china.js"></script><script src="js/myMap.js"></script>
</body>
</html>

相关文章：

可视化大屏 - 项目1

文章目录 技术栈echarts 可视化需求分析代码实现 技术栈 flexible.js rem 实现不同终端下的响应式布局&#xff0c;根据不同屏幕宽度&#xff0c;自适配布局&#xff1b; html中引入index.js&#xff0c;可以改名为flexible.js&#xff1b;默认划分10份&#xff0c;可以自己修…...

编程日记 2024/4/6 2:09:06

Collection与数据结构 链表与LinkedList(三):链表精选OJ例题(下)

1. 分割链表 OJ链接 class Solution {public ListNode partition(ListNode head, int x) {if(head null){return null;//空链表的情况}ListNode cur head;ListNode formerhead null;ListNode formerend null;ListNode latterhead null;ListNode latterend null;//定义…...

编程日记 2024/4/6 2:08:05

如何通过C++身份证实名认证接口实现实名认证功能

线上平台使用身份核验过程是验证个人身份真实性的过程&#xff0c;对于大多数线上平台来说&#xff0c;自己去开发集成身份证实名认证接口需要耗费大量的人力、物力成本&#xff0c;对此&#xff0c;为助力有需要的企业快速实现实名认证的功能&#xff0c;翔云平台提供了身份证…...

编程日记 2024/4/6 2:07:04

用html写一个爱心

<!DOCTYPE html> <html lang"zh-CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><title>爱您</title><style>* {padding: 0;margin: 0;}body {background-color: pin…...

编程日记 2024/4/6 2:06:02

如何看到 synchronized 背后的“monitor 锁”？

Java全能学习+面试指南：https://javaxiaobear.cn 获取和释放 monitor 锁的时机 我们都知道，最简单的同步方式就是利用 synchronized 关键字来修饰代码块或者修饰一个方法，那么这部分被保护的代码，在同一时刻就最多只有一个线程可以运行，而 synchronized 的背后正是利用 …...

编程日记 2024/4/6 2:03:00

如何建立一个网页模版

创建一个网页模板涉及的主要步骤如下： 基本HTML结构模板创建： 创建HTML文件： 首先，你需要创建一个新的HTML文件，并在其中编写基本的HTML结构，例如： <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"...

编程日记 2024/4/6 2:01:58

P8783 [蓝桥杯 2022 省 B] 统计子矩阵

题目:P8783 [蓝桥杯 2022 省 B] 统计子矩阵 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 代码&#xff1a;&#xff08;部分解析在代码中&#xff09; #include<bits/stdc.h> using namespace std; long long a[1010][1010]; long long pre[1010][1010]; long long …...

编程日记 2024/4/6 1:59:56

【C++】list介绍

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. list介绍2. list的构造3. ist iterator的使用4. capacity5. element access6. modifiers7. 迭代器失效8. Operations8.1 reverse8.2 sort8.3 unique8.4 splice 1. list介绍 list是可以在常数范围内在任意位置进行插…...

编程日记 2024/4/6 1:58:54

【SQL Server】2. 将数据导入导出到Excel表格当中

最开始&#xff0c;博主介绍一下自己的环境&#xff1a;SQL Sever 2008 R2 SQL Sever 大致都差不多 1. 通过自带软件的方式 首先找到下载SQL Sever中提供的导入导出工具 如果开始界面没有找到自己下载的路径 C:\Program Files\Microsoft SQL Server\100\DTS\Binn下的DTSWiz…...

编程日记 2024/4/6 1:57:54

基于JAVA+SSM+VUE的前后端分离的大学竞赛管理系统

一、项目背景介绍&#xff1a; 随着互联网技术的快速发展&#xff0c;大学竞赛管理系统已经成为了各个高校组织和管理各类学术竞赛的重要工具。传统的大学竞赛管理系统往往采用前后端混合的开发模式&#xff0c;导致系统的性能和可维护性受到限制。为了提高系统的开发效率和用户…...

编程日记 2024/4/6 1:54:51

音频转换工具 Bigasoft FLAC Converter for Mac

Bigasoft FLAC Converter for Mac是一款专为Mac用户设计的音频转换工具&#xff0c;它能够将FLAC音频文件高效、高质量地转换为其他常见的音频格式&#xff0c;如MP3、AAC等。这款软件具有直观易用的界面&#xff0c;使用户能够轻松上手&#xff0c;无需复杂的操作步骤即可完成…...

编程日记 2024/4/6 1:53:49

洛谷 P4554 小明的游戏

思路&#xff1a;双端队列。 其实一开始你可以用BFS进行实验&#xff0c;由于我们需要找最小的费用&#xff0c;所以我们在BFS的时候可以这样想&#xff1a;在我们遍历到第一块板子的时候&#xff0c;在找周围的路时&#xff0c;我们可以改成这样的判断&#xff1a;如果周围的…...

编程日记 2024/4/6 1:49:44

序列化案例实操（统计每一个手机号耗费的总上行流量、总下行流量、总流量）

文章目录 序列化概述自定义bean对象实现序列化接口&#xff08;Writable&#xff09;案例需求编写MapReduce程序运行结果 序列化概述 序列化就是把内存中的对象&#xff0c;转换成字节序列&#xff08;或其他数据传输协议&#xff09;以便于存储到磁盘&#xff08;持久化&…...

编程日记 2024/4/6 1:48:43

使用 LLMLingua-2 压缩 GPT-4 和 Claude 提示

原文地址&#xff1a;Compress GPT-4 and Claude prompts with LLMLingua-2 2024 年 4 月 1 日 向大型语言模型&#xff08;LLM&#xff09;发送的提示长度越短&#xff0c;推理速度就会越快&#xff0c;成本也会越低。因此&#xff0c;提示压缩已经成为LLM研究的热门领域。 …...

编程日记 2024/4/6 1:46:41

编程大牛坚持了 10 年的 10 个编程好习惯

目录 1.多看官方文档 2.面向搜索引擎编程 3.规范命名 4.认真注释 5.不要重复造轮子 6.多读多写代码 7.预留开发时间 8.大胆重构 9.师傅领进门 10.多阅读源码 1.多看官方文档 不要被这几个字吓到&#xff0c;官方文档其实都是宝藏。 一个成熟的技术诞生&#xff0c;…...

编程日记 2024/4/6 1:45:40

QEMU上PAC功能验证与异常解析

PAC功能如何验证&#xff1f;PAC检查失败时发生什么&#xff1f;问题如何定位&#xff1f;本博客主要探讨这些问题。...

编程日记 2024/4/6 1:44:39

简约轻量-失信录系统源码

失信录系统-最新骗子收录查询系统源码 首页查询&#xff1a; 举报收录页&#xff1a; 后台管理页&#xff1a; 失信录系统 V1.0.0 更新内容&#xff1a; 1.用户查询,举报功能 2.界面独立开发 3.拥有后台管理功能 4.xss,sql安全过滤 5.平台用户查询 6.用户中心&#xff08;待完…...

编程日记 2024/4/6 1:43:38

前端入门系列-HTML-HTML常见标签（注释，标题，段落，换行）

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” HTML常见标签 注释标签 注释不会显示在界面上&#xff0c;目的是提高代码的可读性 <!---这是一个注释----> 注释的原则 要和代码逻辑一致尽量使用中文不要传递负能量 …...

编程日记 2024/4/6 1:41:35

【mysql 第3-10条记录怎么查】

mysql 第3-10条记录怎么查 在MySQL中&#xff0c;如果你想要查询第3到第10条记录&#xff0c;你通常会使用LIMIT和OFFSET子句。但是&#xff0c;需要注意的是&#xff0c;LIMIT和OFFSET是基于结果集的行数来工作的&#xff0c;而不是基于记录的物理位置。这意味着它们通常与某种…...

编程日记 2024/4/6 1:39:32

1.Git是用来干嘛的

本文章学习于【GeekHour】一小时Git教程&#xff0c;来自bilibili Git就是一个文件管理系统&#xff0c;这样说吧&#xff0c;当多个人同时在操作一个文件的同时&#xff0c;很容易造成紊乱&#xff0c;git就是保证文件不紊乱产生的 包括集中式管理系统和分布式管理系统 听懂…...

编程日记 2024/4/6 1:36:29

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/8 22:11:21

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/7/4 8:53:19

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/7/8 12:26:44

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2025/7/8 2:26:17

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/6/21 8:57:47

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/7/6 16:11:09

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/7/7 13:13:31

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/6/15 14:38:19