可视化大屏 - 项目1

文章目录

  • 技术栈
  • 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>

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

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

相关文章

Django -- 模型层

模型和字段 一个模型&#xff08;model&#xff09;就是一个单独的、确定的数据的信息源&#xff0c;包含了数据的字段和操作方法。通常&#xff0c;每个模型映射为一张数据库中的表。 基本的原则如下&#xff1a; 每个模型在Django中的存在形式为一个Python类每个类都是dja…

C#的Thread.CurrentThread.IsBackground的作用

当一个线程&#xff0c;被设置为IsBackground true的时候&#xff0c;它就会放手&#xff0c;让主线程不用等&#xff0c;而主线程一退出&#xff0c;它就会退出。 为False时&#xff0c;则是要求主线程等待其执行完毕&#xff0c;它先退出&#xff0c;主线程再退出。 参考官方…

使用阿里云试用Elasticsearch学习:1.6 基础入门——排序与相关性

默认情况下&#xff0c;返回的结果是按照 相关性 进行排序的——最相关的文档排在最前。 在本章的后面部分&#xff0c;我们会解释 相关性 意味着什么以及它是如何计算的&#xff0c; 不过让我们首先看看 sort 参数以及如何使用它。 排序 为了按照相关性来排序&#xff0c;需…

Linux存储的基本管理

实验环境&#xff1a; 系统里添加两块硬盘 ##1.设备识别## 设备接入系统后都是以文件的形式存在 设备文件名称&#xff1a; SATA/SAS/USB /dev/sda,/dev/sdb ##s SATA, dDISK a第几块 IDE /dev/hd0,/dev/hd1 ##h hard VIRTIO-BLOCK /de…

代码随想录算法训练营第四十三天|1049. 最后一块石头的重量 II 494. 目标和 474.一和零

1049. 最后一块石头的重量 II 本题就和 昨天的 416. 分割等和子集 很像了&#xff0c;可以尝试先自己思考做一做。 视频讲解&#xff1a;https://www.bilibili.com/video/BV14M411C7oV https://programmercarl.com/1049.%E6%9C%80%E5%90%8E%E4%B8%80%E5%9D%97%E7%9F%B3%E5%A4%…

Python性能优化:提升代码执行效率的秘诀

在Python编程中&#xff0c;性能优化是一个不可忽视的方面。无论是处理大数据集&#xff0c;还是构建需要快速响应的系统&#xff0c;高效的代码都是至关重要的。本文将讨论一些Python性能优化的关键策略&#xff0c;包括选择正确的数据结构、避免常见的性能陷阱以及使用并行计…

牛的学术圈(c++实现)

题目 由于对计算机科学的热爱&#xff0c;以及有朝一日成为 「Bessie 博士」的诱惑&#xff0c;奶牛 Bessie 开始攻读计算机科学博士学位。 经过一段时间的学术研究&#xff0c;她已经发表了 N 篇论文&#xff0c;并且她的第 i 篇论文得到了来自其他研究文献的 ci 次引用。 B…

Python常用算法思想--快速解决24点游戏案例【附源码】

算法的起源:欧几里德的《几何原本》中阐述的求两个数的最大公约数的过程。 算法的定义:解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表用系统的方法描述解决问题的策略机制。 算法的本质:算法是程序的灵魂,也是衡量一位程序员水平高低的最好参照物。…

SQLAlchemy 建立数据库模型之间的关系

常见关系&#xff1a; 一对多关系多对一关系多对多关系一对一关系 一对多关系&#xff08;一个作者&#xff0c;多篇文章&#xff09; ## 一对多关系&#xff0c;单作者-多文章&#xff0c;外键不可少 ## 外键(ForeignKey)总在多的那边定义,关系(relationship)总在单的那边定…

在国企特定的环境中,如何激励低效能员工?

导读&#xff1a; 总额高达4万亿元的巨额投资&#xff0c;曾经让国企在应对百年不遇的金融危机中交出一份靓丽的成绩单&#xff0c;然而随着“4万亿经济刺激措施”逐步退出&#xff0c;国企问题又开始暴露出来。 2012年度国内上市公司财务报告显示&#xff0c;国企成为亏损大户…

gitee代码上传同步指南(git操作)

1.下载安装git 最开始安装git&#xff0c;下载链接&#xff1a;CNPM Binaries Mirror 选择对应版本下载git即可 2.生成ssh公钥 电脑桌面右键&#xff0c;选择Open Git Bash here 需要注意&#xff0c;在git中复制粘贴功能和windows不同&#xff0c;它有两种方式&#xff…

解码零跑汽车2023年报:营收增速大幅滑坡,净亏42亿,如何讲故事

在2023年的新势力车企中&#xff0c;有这么一家低调崛起的品牌&#xff0c;并没有像蔚小理那样高调&#xff0c;但去年全年销量却反超小鹏汽车&#xff0c;晋升成为新势力车企中的销量第三名&#xff0c;它就是第四家登陆港交所上市的新势力品牌—零跑汽车。 不过&#xff0c;…

蓝桥集训之斐波那契前n项和

蓝桥集训之斐波那契前n项和 核心思想&#xff1a;矩阵乘法 左边求和 右边求和 得到Sn fn2 – 1 因此只要求出fn2 即可 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;int n,m;int A[2][2] { …

【数据库】MySQL InnoDB存储引擎详解 - 读书笔记

MySQL InnoDB存储引擎详解 - 读书笔记 InnoDB 存储引擎概述InnoDB 存储引擎的版本InnoDB 体系架构内存缓冲池LRU List、Free List 和 Flush List重做日志缓冲&#xff08;redo log buffer&#xff09;额外的内存池 存储结构表空间系统表空间独立表空间通用表空间undo表空间临时…

学习记录:bazel和cmake运行终端指令

Bazel和CMake都是用于构建软件项目的工具&#xff0c;但它们之间有一些重要的区别和特点&#xff1a; Bazel&#xff1a; Bazel是由Google开发的构建和测试工具&#xff0c;用于构建大规模的软件项目。它采用一种称为“基于规则”的构建系统&#xff0c;它利用构建规则和依赖关…

6、【单例模式】确保了一个类在程序运行期间只有一个实例

你好&#xff0c;我是程序员雪球 在软件设计中&#xff0c;单例模式是一种常见的设计模式。它确保了一个类在程序运行期间只有一个实例&#xff0c;并提供了全局访问该实例的方式。单例模式在许多场景中都有广泛的应用&#xff0c;例如共享资源管理、数据库连接、日志记录器等…

ES6学习(五)-- Module 语法

文章目录 Module 语法1.1 痛点介绍(1) 异步加载(2) 私密(3) 重名(4) 依赖 1.2 解决方法(1) 解决异步加载问题(2) 解决私密问题(3) 重名解决方法(4) 解决依赖问题 1.3 模块化使用案例 Module 语法 之前js 出现的某些痛点&#xff1a; 在script 中引入的变量名不可以重复&#…

国内20家公司大模型岗位面试经验汇总

面试情况&#xff1a; 投过的公司&#xff1a;淘天&#xff0c;字节&#xff0c;蚂蚁&#xff0c;商汤&#xff0c;美团&#xff0c;夸克&#xff0c;腾讯&#xff0c;minimax&#xff0c;零一万物&#xff0c;阿里控股&#xff0c;潞晨科技&#xff0c;阿里巴巴国际&#xff…

【GEE实践应用】GEE下载遥感数据以及下载后在ArcGIS中的常见显示问题处理(以下载哨兵2号数据为例)

本期内容我们使用GEE进行遥感数据的下载&#xff0c;使用的相关代码如下所示&#xff0c;其中table是我们提前导入的下载遥感数据的研究区域的矢量边界数据。 var district table;var dsize district.size(); print(dsize);var district_geometry district.geometry();Map.…

整合Mybatis(Spring学习笔记十二)

一、导入相关的包 junit 包 Mybatis包 mysql数据库包 Spring相关的包 Aop相关的包 Mybatis-Spring包&#xff08;现在就来学这个&#xff09; 提示jdk版本不一致的朋友记得 jdk8只支持spring到5.x 所以如果导入的spring(spring-we…