【数据可视化】—大屏数据可视化展示
【数据可视化】—大屏数据可视化展示
一、数据可视化
数据可视化的目的：借助于图形化工具，清晰有效的传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
二、 免费数据可视化库
Echarts
百度创建的这个库对于 Web 的数据可视化非常有用。它也提供英文版本，适用于大数据集。它还支持 SVG 和 Canvas 渲染。
适用于：所有环境
Highcharts
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
D3.js、AntV……
三、Echarts使用五步曲
<style>.box{width: 500px;height: 500px;background-color: pink;}</style>
</head>
<body><div class="box"></div><script src="./js//echarts.min.js"></script><script>//初始化var myChart=echarts.init(document.querySelector(".box"))// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚才指定的配置项和数据显示图表。myChart.setOption(option);</script>
四、项目实战
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据可视化</title><link rel="stylesheet" href="./css/index.css" /></head><body><!-- header --><header><h1>数据可视化-Echarts</h1><div class="showTime"></div><script>function time() {var vWeek, vWeek_s, vDay;vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六",];var date = new Date();year = date.getFullYear();month = date.getMonth() + 1;day = date.getDate();hours = date.getHours();minutes = date.getMinutes();seconds = date.getSeconds();vWeek_s = date.getDay();document.querySelector(".showTime").innerHTML =year +"年" +month +"月" +day +"日" +"\t" +hours +":" +minutes +":" +seconds +"\t" +vWeek[vWeek_s];}setInterval("time()", 1000);</script></header><!-- 主体部分 --><section class="mainbox"><div class="column"><div class="panel bar"><h2>柱状图-就业行业 </h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line"><h2>折线图-人员变化</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie"><h2>饼形图-年龄分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div><div class="column"><div class="no"><div class="no-hd"><ul><li>125811</li><li>104563</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><div class="map"><div class="chart"></div><div class="map1"></div><div class="map2"></div><div class="map3"></div></div></div><div class="column"><div class="panel bar1"><h2>柱状图-技能掌握</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line1"><h2>折线图-播放量</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie1"><h2>饼形图-地区分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div></section><script src="js/flexible.js"></script><script src="js/jquery.js"></script><script src="js/echarts.min.js"></script><script src="js/index.js"></script><script src="js/china.js"></script><script src="js/myMap.js"></script></body></html>
* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);}body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;/* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */background: url(../images/bg.jpg) no-repeat #000;background-size: cover;/* 行高是字体1.15倍 */line-height: 1.15;}header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat top center;background-size: 100% 100%;}header h1 {font-size: 0.475rem;color: #fff;text-align: center;line-height: 1rem;}header .showTime {position: absolute;top: 0;right: 0.375rem;line-height: 0.9375rem;font-size: 0.25rem;color: rgba(255, 255, 255, 0.7);}.mainbox {min-width: 1024px;max-width: 1920px;padding: 0.125rem 0.125rem 0;display: flex;}.mainbox .column {flex: 3;}.mainbox .column:nth-child(2) {flex: 5;margin: 0 0.125rem 0.1875rem;overflow: hidden;}.panel {position: relative;height: 3.875rem;border: 1px solid rgba(25, 186, 139, 0.17);background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png);padding: 0 0.1875rem 0.5rem;margin-bottom: 0.1875rem;}.panel::before {position: absolute;top: 0;left: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}.panel::after {position: absolute;top: 0;right: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}.panel .panel-footer {position: absolute;left: 0;bottom: 0;width: 100%;}.panel .panel-footer::before {position: absolute;bottom: 0;left: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}.panel .panel-footer::after {position: absolute;bottom: 0;right: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}.panel h2 {height: 0.6rem;line-height: 0.6rem;text-align: center;color: #fff;font-size: 0.25rem;font-weight: 400;}.panel h2 a {margin: 0 0.1875rem;color: #fff;text-decoration: underline;}.panel .chart {height: 3rem;}.no {background: rgba(101, 132, 226, 0.1);padding: 0.1875rem;}.no .no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);}.no .no-hd::before {content: "";position: absolute;width: 30px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;top: 0;left: 0;}.no .no-hd::after {content: "";position: absolute;width: 30px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;right: 0;bottom: 0;}.no .no-hd ul {display: flex;}.no .no-hd ul li {position: relative;flex: 1;text-align: center;height: 1rem;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;padding: 0.05rem 0;font-family: electronicFont;font-weight: bold;}.no .no-hd ul li:first-child::after {content: "";position: absolute;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);right: 0;top: 25%;}.no .no-bd ul {display: flex;}.no .no-bd ul li {flex: 1;height: 0.5rem;line-height: 0.5rem;text-align: center;font-size: 0.225rem;color: rgba(255, 255, 255, 0.7);padding-top: 0.125rem;}.map {position: relative;height: 10.125rem;}.map .chart {position: absolute;top: 0;left: 0;z-index: 5;height: 10.125rem;width: 100%;}.map .map1,.map .map2,.map .map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 6.475rem;height: 6.475rem;background: url(../images/map.png) no-repeat;background-size: 100% 100%;opacity: 0.3;}.map .map2 {width: 8.0375rem;height: 8.0375rem;background-image: url(../images/lbx.png);opacity: 0.6;animation: rotate 15s linear infinite;z-index: 2;}.map .map3 {width: 7.075rem;height: 7.075rem;background-image: url(../images/jt.png);animation: rotate1 10s linear infinite;}@keyframes rotate {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}@keyframes rotate1 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}@media screen and (max-width: 1024px) {html {font-size: 42px !important;}}@media screen and (min-width: 1920) {html {font-size: 80px !important;}}相关文章：
【数据可视化】—大屏数据可视化展示
【数据可视化】—大屏数据可视化展示 一、数据可视化 数据可视化的目的：借助于图形化工具，清晰有效的传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 二、 免费数据可视化库 Echarts 百度…...
计算机算法分析与设计（12）---贪心算法(最优装载问题和哈夫曼编码问题)
文章目录 一、最优装载问题1.1 问题表述1.2 代码编写 二、哈夫曼编码2.1 哈夫曼编码概述2.2 前缀码2.3 问题描述2.4 代码思路2.5 代码编写 一、最优装载问题 1.1 问题表述 1. 有一批集装箱要装上一艘载重量为 c c c 的轮船，已知集装箱 i ( 1 ≤ i ≤ n ) i(1≤i≤…...
打造属于自己的vue图标库
hfex-icon图标库 Install npm i -D hfex-icon主要提供2种使用方式 方式一 通过svg图标资源，借助unplugin-icons库将svg图标文件生成vue组件，然后通过vue组件的引入方式在vue中使用 unplugin-icons 兼容vue2和vue3 在vue.config.js的plugins中配置…...
C++11线程池
使用 condition_variable::wait(unique_lock<mutex>&lck, Predicate pred) 时，必须保证条件变量通过notify唤醒的同时，wait 的第二个参数 Predicate 返回 true 了才可以往下走。必须两个条件同时满足，如果notify的时候Predicate返回…...
企业打造VR虚拟展厅，开启商务洽谈新时代！
现代化数字营销中，企业做了虚拟线上展厅和不做虚拟展厅的对比是很明显的，VR虚拟展厅让企业产品、企业环境、企业实力的展示更加真实、直观。虚拟展厅是一种在线展示企业形象和品牌的新型方式，随着VR技术的发展，虚拟展厅正在逐步取…...
linux部署gitlab
1. 配置yum源： vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] nameGitlab CE Repository baseurlhttps://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el$releasever/ gpgcheck0 enabled1 2. 更新本地缓存 sudo yum install -y gitlab-ce 3. 安装相关依赖 yum …...
c++_learning-基础部分
文章目录 基础认识：语言特性（面向对象编程）：c的类（相当于c中的结构体）：三大特性：c包含四种编程范式：优缺点： c程序编译的过程：预处理->编译&am…...
支持PC端、手机端、数据大屏端的Spring Cloud智慧工地云平台源码
技术架构：微服务JavaSpring Cloud VueUniApp MySql 智慧建筑工地云平台主要利用大数据、物联网等技术，整合工地信息、材料信息、工程进度等，实现对建筑项目的全程管理。它可以实现实时监测和控制，有效解决施工中的问题，…...
给cmd控制台程序 套壳 美化
给cmd控制台程序套壳美化，可以获取程序的标准输出和报错信息。 # _*_ coding: utf-8 _*_ """ 控制台程序启动器，杜绝黑窗口。 Time: 2023/10/18 15:28 Author: Jyun Version: V 0.1 File: main.py Blog: https://ctrlcv.…...
【系统架构设计】架构核心知识： 1 构件和中间件
目录 一 构件 1 构件的特性 2 构件、对象和模块的对比 3 构件的复用...
通过开发者工具-网络排查响应时间过长的问题
关键词：network 网络 pending 开发者工具 有时候我们会发现某次http请求花费了很长时间，比如会花费十几秒，那么我们可以通过开发者工具的网络和其他一些工具来分析请求时间过长的原因 Dev Tool 中时间线各阶段代表的意义 分别用edge、chorm…...
【Python】Python 实现 Excel 到 CSV 的转换程序
Python 实现 Excel 到 CSV 的转换程序 Excel 可以将电子表格保存为 CSV 文件，只要点几下 鼠标，但如果有几百个 Excel文件要转换为 CSV ， 就需要点击几小时。利用 openpyxl 模块， 编程读取当前工作目录中的所有 Excel 文件&#x…...
BUUCTF题解之[极客大挑战 2019]Havefun 1
1.题目分析 使用浏览器开发者工具查看网页源码，查看疑似flag的代码。 （特别是注释了的源码，一般是HTML,JS,PHP的源码） 修改统一资源定位符URL访问服务器后端接口，拿到flag。 1.URL URL是统一资源定位符（…...
DIV+CSS网页布局
本文参考 https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722 二、浮动 浮动的元素会向左或向右浮动，直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流（不再占有原来的位置）。 （…...
python二次开发CATIA：CATIA Automation
CATIA 软件中有一套逻辑与关系都十分严谨的自动化对象，它们从CATIA(Application)向下分支。每个自动化对象（Automation Object，以下简称Object）都有各自的属性与方法。我们通过程序语言调用这些 Object 的属性与方法，便…...
2023年中国云计算软件市场规模、市场结构及市场份额情况分析[图]
云计算是分布式计算的一种，指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序，然后，通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算软件类型分为三类，即基础设施即服务、平台即服…...
docker入门加实战—部署Java和前端项目
docker入门加实战—部署Java和前端项目 部署之前，先删除nginx，和自己创建的dd两个容器： docker rm -f nginx dd部署Java项目 作为演示，我们的Java项目比较简单，提供了一个接口： 配置文件连接docker里的m…...
机器人制作开源方案 | 行星探测车概述
1. 功能描述 行星探测车（Planetary Rover）是一种用于进行科学探索和勘测任务的无人车辆，它们被设计成能够适应各种复杂的地形条件和极端环境，以便收集数据、拍摄照片、采集样本等。行星探测车通常包含以下主要组件和功能ÿ…...
Git基础命令
一、Git 码云创建空白仓库 什么都不选，使用代码初始化 初始化仓库：git init 配置信息：git config user.name"mashuchao" 配置信息：git config user.email"mashuchao.com" 查看配置信息：git c…...
C#中Semaphore 和 CountdownEvent 的使用总结
信号量(Semaphore)，有时被称为信号灯，是在多线程环境下使用的一种设施，是可以用来保证两个或多个关键代码段不被并发调用。在进入一个关键代码段之前，线程必须获取一个信号量。一旦该关键代码段完成了，那么该线程必须释…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...