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

【数据可视化】—大屏数据可视化展示

news 2026/2/10 18:37:37

【数据可视化】—大屏数据可视化展示

一、数据可视化

数据可视化的目的：借助于图形化工具，清晰有效的传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

在这里插入图片描述

二、免费数据可视化库

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 百度…...

编程日记 2023/10/18 21:46:28

计算机算法分析与设计（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≤…...

编程日记 2023/10/18 21:45:28

打造属于自己的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中配置…...

编程日记 2023/10/18 21:44:27

C++11线程池

使用 condition_variable::wait(unique_lock<mutex>&lck, Predicate pred) 时，必须保证条件变量通过notify唤醒的同时，wait 的第二个参数 Predicate 返回 true 了才可以往下走。必须两个条件同时满足，如果notify的时候Predicate返回…...

编程日记 2023/10/18 21:43:25

企业打造VR虚拟展厅，开启商务洽谈新时代！

现代化数字营销中，企业做了虚拟线上展厅和不做虚拟展厅的对比是很明显的，VR虚拟展厅让企业产品、企业环境、企业实力的展示更加真实、直观。虚拟展厅是一种在线展示企业形象和品牌的新型方式，随着VR技术的发展，虚拟展厅正在逐步取…...

编程日记 2023/10/18 21:42:25

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 …...

编程日记 2023/10/18 21:41:23

c++_learning-基础部分

文章目录基础认识：语言特性（面向对象编程）：c的类（相当于c中的结构体）：三大特性：c包含四种编程范式：优缺点： c程序编译的过程：预处理->编译&am…...

编程日记 2023/10/18 21:40:22

支持PC端、手机端、数据大屏端的Spring Cloud智慧工地云平台源码

技术架构：微服务JavaSpring Cloud VueUniApp MySql 智慧建筑工地云平台主要利用大数据、物联网等技术，整合工地信息、材料信息、工程进度等，实现对建筑项目的全程管理。它可以实现实时监测和控制，有效解决施工中的问题&#xff0c…...

编程日记 2023/10/18 21:39:21

给cmd控制台程序套壳美化

给cmd控制台程序套壳美化，可以获取程序的标准输出和报错信息。 # _*_ coding: utf-8 _*_ """ 控制台程序启动器，杜绝黑窗口。 Time: 2023/10/18 15:28 Author: Jyun Version: V 0.1 File: main.py Blog: https://ctrlcv.…...

编程日记 2023/10/18 21:37:19

【系统架构设计】架构核心知识： 1 构件和中间件

目录一构件 1 构件的特性 2 构件、对象和模块的对比 3 构件的复用...

编程日记 2023/10/18 21:36:18

通过开发者工具-网络排查响应时间过长的问题

关键词：network 网络 pending 开发者工具有时候我们会发现某次http请求花费了很长时间，比如会花费十几秒，那么我们可以通过开发者工具的网络和其他一些工具来分析请求时间过长的原因 Dev Tool 中时间线各阶段代表的意义分别用edge、chorm…...

编程日记 2023/10/18 21:35:17

【Python】Python 实现 Excel 到 CSV 的转换程序

Python 实现 Excel 到 CSV 的转换程序 Excel 可以将电子表格保存为 CSV 文件，只要点几下鼠标，但如果有几百个 Excel文件要转换为 CSV ， 就需要点击几小时。利用 openpyxl 模块， 编程读取当前工作目录中的所有 Excel 文件&#x…...

编程日记 2023/10/18 21:34:15

BUUCTF题解之[极客大挑战 2019]Havefun 1

1.题目分析使用浏览器开发者工具查看网页源码，查看疑似flag的代码。 （特别是注释了的源码，一般是HTML,JS,PHP的源码） 修改统一资源定位符URL访问服务器后端接口，拿到flag。 1.URL URL是统一资源定位符（…...

编程日记 2023/10/18 21:33:14

DIV+CSS网页布局

本文参考 https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722 二、浮动浮动的元素会向左或向右浮动，直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流（不再占有原来的位置）。 &#xff08…...

编程日记 2023/10/18 21:32:13

python二次开发CATIA：CATIA Automation

CATIA 软件中有一套逻辑与关系都十分严谨的自动化对象，它们从CATIA(Application)向下分支。每个自动化对象（Automation Object，以下简称Object）都有各自的属性与方法。我们通过程序语言调用这些 Object 的属性与方法，便…...

编程日记 2023/10/18 21:30:11

2023年中国云计算软件市场规模、市场结构及市场份额情况分析[图]

云计算是分布式计算的一种，指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序，然后，通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算软件类型分为三类，即基础设施即服务、平台即服…...

编程日记 2023/10/18 21:28:09

docker入门加实战—部署Java和前端项目

docker入门加实战—部署Java和前端项目部署之前，先删除nginx，和自己创建的dd两个容器： docker rm -f nginx dd部署Java项目作为演示，我们的Java项目比较简单，提供了一个接口： 配置文件连接docker里的m…...

编程日记 2023/10/18 21:27:09

机器人制作开源方案 | 行星探测车概述

1. 功能描述行星探测车（Planetary Rover）是一种用于进行科学探索和勘测任务的无人车辆，它们被设计成能够适应各种复杂的地形条件和极端环境，以便收集数据、拍摄照片、采集样本等。行星探测车通常包含以下主要组件和功能&#xff…...

编程日记 2023/10/18 21:26:07

Git基础命令

一、Git 码云创建空白仓库什么都不选，使用代码初始化初始化仓库：git init 配置信息：git config user.name"mashuchao" 配置信息：git config user.email"mashuchao.com" 查看配置信息：git c…...

编程日记 2023/10/18 21:24:06

C#中Semaphore 和 CountdownEvent 的使用总结

信号量(Semaphore)，有时被称为信号灯，是在多线程环境下使用的一种设施，是可以用来保证两个或多个关键代码段不被并发调用。在进入一个关键代码段之前，线程必须获取一个信号量。一旦该关键代码段完成了，那么该线程必须释…...

编程日记 2023/10/18 21:23:04

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2026/2/10 11:45:58

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/31 6:04:01