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

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

一、数据可视化

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

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

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

二、 免费数据可视化库

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;以及各种资源分享&…
阅读更多...
互联网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架构…
阅读更多...
试着写几个opencv的程序

试着写几个opencv的程序

一、认识opencv OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源计算机视觉库&#xff0c;旨在提供丰富的图像处理和计算机视觉功能&#xff0c;以帮助开发者构建视觉应用程序。OpenCV最初由英特尔开发&#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 …
阅读更多...
计算机网络学习笔记（四）：网络层（待更新）

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

目录 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地址的编…
阅读更多...
Adobe 推出 Photoshop Elements 2024 新版

Adobe 推出 Photoshop Elements 2024 新版

&#x1f989; AI新闻 &#x1f680; Adobe 推出 Photoshop Elements 2024 新版 摘要:Adobe 最新发布 Photoshop Elements 2024 版本,新增引入 AI 功能,提供匹配颜色、创建照片卷、一键选择照片天空或背景等新功能,界面也进行了优化更新。本次发布重点加强了 AI 支持,简化复杂…
阅读更多...
打卡go学习第一天

打卡go学习第一天

8.1 下面展示一些 代码。 package mainimport ("fmt""net""os""time" )type Clock struct {Name stringAddr string &#xff5d; func main() {clocks : []Clock{{Name: "New York", Addr: "localhost:8000"…
阅读更多...
spring cloud Eureka集群模式搭建（IDEA中运行）

spring cloud Eureka集群模式搭建（IDEA中运行）

spring cloud Eureka集群模式搭建&#xff08;IDEA中运行&#xff09; 新建springboot 工程工程整体目录配置文件IDEA中部署以jar包形式启动总结 新建springboot 工程 新建一个springboot 工程&#xff0c;命名为&#xff1a;eureka_server。 其中pom.xml文件为&#xff1a; …
阅读更多...
OnlyOffice documentType类型值

OnlyOffice documentType类型值

参考官网说明&#xff1a; https://api.onlyoffice.com/editors/config/#documentType 其值为&#xff1a;word | cell | slide
阅读更多...
SpringCloud: feign整合sentinel实现降级

SpringCloud: feign整合sentinel实现降级

一、加依赖&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache…
阅读更多...
060：mapboxGL点击某处，通过flyTo，以动画的形式聚焦到此点

060：mapboxGL点击某处，通过flyTo，以动画的形式聚焦到此点

第060个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中点击某处，通过flyto，以动画的形式聚焦到此点。这里用到了flyTo的方法，里面可以设置bearing，zoom，pitch等众多的属性内容。 直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果 文章目录 示…
阅读更多...
RabbitMQ运行机制和通讯过程介绍

RabbitMQ运行机制和通讯过程介绍

文章目录 1.RabbitMQ 环境搭建2.RabbitMQ简介3.RabbitMQ的优势&#xff1a;4. rabbitmq服务介绍4.1 rabbitmq关键词说明4.2 消息队列运行机制4.3 exchange类型 5.wireshark抓包查看RabbitMQ通讯过程 1.RabbitMQ 环境搭建 参考我的另一篇&#xff1a;RabbitMQ安装及使用教程&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023