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

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

一、数据可视化

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

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

在这里插入图片描述
在这里插入图片描述

二、 免费数据可视化库

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;}}

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

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

相关文章

Kurento多对多webrtc会议搭建测试

Kurento多对多webrtc会议搭建测试

环境ubuntu18.04 KMS版本6.13.0 多对多通信demo7.0.0 KMS运行起来后&#xff0c;通过运行它的一个个demo&#xff0c;来实现不同的功能&#xff0c;它的demo很多如下&#xff1a; https://github.com/Kurento 里面有一对一&#xff0c;多对多&#xff0c;还有一些特效的demo。…
阅读更多...
Android13 实现有线网络和wifi共存

Android13 实现有线网络和wifi共存

Android13 实现有线网络和wifi共存 文章目录 Android13 实现有线网络和wifi共存一、前言二、修改代码&#xff1a;1、ConnectivityService.java2、NetworkFactoryImpl.java3、Android11 和Android13 修改代码目录对比&#xff1a;4、如果只修改部分代码的后果只修改 Connectivi…
阅读更多...
提升医院安全的关键利器——医院安全（不良）事件报告系统源码

提升医院安全的关键利器——医院安全（不良）事件报告系统源码

医院是人们寻求医疗服务和康复的场所&#xff0c;安全是医院运营的基石。然而&#xff0c;医疗过程中不可避免地会出现不良事件&#xff0c;如药物错误、手术事故等。为了及时发现、评估和解决这些问题&#xff0c;医院安全&#xff08;不良&#xff09;事件报告系统应运而生。…
阅读更多...
聊聊Android线程优化这件事

聊聊Android线程优化这件事

一、背景 在日常开发APP的过程中&#xff0c;难免需要使用第二方库和第三方库来帮助开发者快速实现一些功能&#xff0c;提高开发效率。但是&#xff0c;这些库也可能会给线程带来一定的压力&#xff0c;主要表现在以下几个方面&#xff1a; 线程数量增多&#xff1a;一些库可…
阅读更多...
Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…
阅读更多...
主机重启后k8s kubelet无法自动启动问题解决梳理

主机重启后k8s kubelet无法自动启动问题解决梳理

1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 K8S安装配置完成后，重启服务器发现，kubelet没有正常启动(systemctl status kubelet) 命令： systemctl status kubelet [root@centos79-3 ~]# systemctl status kubelet ●…
阅读更多...
使用 pyspark 进行 Classification 的简单例子

使用 pyspark 进行 Classification 的简单例子

This is the second assignment for the Coursera course “Advanced Machine Learning and Signal Processing” Just execute all cells one after the other and you are done - just note that in the last one you have to update your email address (the one you’ve u…
阅读更多...
Java设计模式之过滤器模式（Filter Pattern）

Java设计模式之过滤器模式（Filter Pattern）

过滤器模式&#xff08;Filter Pattern&#xff09;是一种常用的设计模式&#xff0c;它用于通过一系列条件来过滤对象集合&#xff0c;并将满足条件的对象保留下来。该模式可以帮助我们在不修改原始对象集合的情况下&#xff0c;根据特定的条件对集合进行筛选和处理。 在过滤…
阅读更多...
互联网Java工程师面试题·Java 面试篇·第一弹

互联网Java工程师面试题·Java 面试篇·第一弹

目录 1、Java 中能创建 volatile 数组吗&#xff1f; 2、volatile 能使得一个非原子操作变成原子操作吗&#xff1f; 3、volatile 修饰符的有过什么实践&#xff1f; 4、volatile 类型变量提供什么保证&#xff1f; 5、10 个线程和 2 个线程的同步代码&#xff0c;哪个更容…
阅读更多...
使用 ClickHouse 深入了解 Apache Parquet （二）

使用 ClickHouse 深入了解 Apache Parquet （二）

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 这篇文章是我们的 Parquet 和 ClickHouse 博客系列的第二部分。在这篇文章中&#xff0c;我们将更详细地探讨 Parquet 格式&#xff0c;重点介绍使用 ClickHouse 读写文…
阅读更多...
Xline 源码解读（四）—— CURP 状态机引擎

Xline 源码解读（四）—— CURP 状态机引擎

在上一篇源码解读的文章&#xff08;Xline 源码解读&#xff08;三&#xff09; —— CURP Server 的实现&#xff09;中&#xff0c;我们简单阐述了Xline 的 Curp Server 是如何实现的。接下来&#xff0c;就让我们话接上回&#xff0c;继续深入地来了解 Curp Server 中的一些…
阅读更多...
利用Python爬虫获取某乎热榜

利用Python爬虫获取某乎热榜

如今&#xff0c;某乎必须要登录才能查看相关话题内容&#xff0c;给我们的日常造成了极大的不便&#xff0c;今天我就教大家如何利用简单的代码&#xff0c;绕开登录限制。 准备工作 配置好python运行环境&#xff0c;推荐 pycharm。复制下面的源代码&#xff0c;运行&#x…
阅读更多...
LNMP架构部署Discuz论坛系统

LNMP架构部署Discuz论坛系统

文章目录 LNMP架构&部署Discuz论坛系统部署LNMP架构环境前期准备安装Nginx安装mariadb安装php配置nginx 部署Discuz论坛系统下载Discuz论坛系统代码包部署Discuz论坛系统配置虚拟主机安装Discuz论坛访问站点尝试注册一个账号 LNMP架构&部署Discuz论坛系统 部署LNMP架构…
阅读更多...
mongodb创建管理账户步骤

mongodb创建管理账户步骤

本文以ubuntu系统配置为例&#xff1a; 1.数据库进入和查看指令 mongo ##进入账户 show dbs ##查看有哪些数据库 use admin ##进入管理员数据库admin show collections ##查看有哪些数据集合 db.system.users.find() ##查看当前有哪些管理员账号2.创建管理员账号 …
阅读更多...
试着写几个opencv的程序

试着写几个opencv的程序

一、认识opencv OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源计算机视觉库&#xff0c;旨在提供丰富的图像处理和计算机视觉功能&#xff0c;以帮助开发者构建视觉应用程序。OpenCV最初由英特尔开发&#xff0c;现在由社区维护和支持。它支持…
阅读更多...
@ResponseBodyAdvice @RequestBodyAdivce失效

@ResponseBodyAdvice @RequestBodyAdivce失效

背景 最近项目要有向外部提供服务的能力&#xff0c;但是考虑到数据安全问题&#xff0c;要对接口进行加解密&#xff1b;实现加解密的方案有很多&#xff0c;比如过滤器、拦截器、继承RequestResponseBodyMethodProcessor什么的&#xff0c;不过我最近正在了解ResponseBodyAd…
阅读更多...
【华为OD机试】HJ26 字符串排序

【华为OD机试】HJ26 字符串排序

描述 编写一个程序&#xff0c;将输入字符串中的字符按如下规则排序。 规则 1 &#xff1a;英文字母从 A 到 Z 排列&#xff0c;不区分大小写。 如&#xff0c;输入&#xff1a; Type 输出&#xff1a; epTy 规则 2 &#xff1a;同一个英文字母的大小写同时存在时&#xff0c;…
阅读更多...
Day5力扣打卡

Day5力扣打卡

打卡记录 对角线上不同值的数量差&#xff08;矩阵对角线遍历 前缀和&#xff09; 链接 思路&#xff1a;由于任意行 i 与 列 j&#xff0c;满足对角线上 i j t 的关系&#xff0c;t 的范围为 [1 - n, m - 1]&#xff0c;设 s t n&#xff0c;可以得到 s的范围为 [1, n …
阅读更多...
C#WPF Prism框架区域管理应用实例

C#WPF Prism框架区域管理应用实例

本文实例演示C#WPFPrism框架区域管理应用实例 目录 一、Prism框架区域 二、不使用Prism框架的RegionManager 三、使用Prism框架的RegionManager 一、Prism框架区域
阅读更多...
计算机网络学习笔记（四）：网络层（待更新）

计算机网络学习笔记（四）：网络层（待更新）

目录 4.1 IP地址、子网划分、合并超网 4.1.1 IP地址、子网掩码、网关 4.1.2 IP地址的编址方法1&#xff1a;IP地址分类&#xff08;A~E类地址、保留的IP地址&#xff09; 4.1.4 IP地址的编址方法2&#xff1a;子网划分&#xff08;等长、变长&#xff09; 4.1.5 IP地址的编…
阅读更多...
最新文章

Copyright @ 2022~2023