700字范文 > 基于Echarts实现大屏数据可视化物虚拟数据统计

基于Echarts实现大屏数据可视化物虚拟数据统计

时间：2024-02-03 18:50:15

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码】

文章目录

前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.JavaScript4.Echarts5.自适应五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

四、代码实现

1.HTML

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="css/index.css" /></head><body><header><h1>数据可视化-ECharts 虚拟数据</h1><div class="showTime">当前时间：8月<span></span></div></header><section class="mainbox"><div class="column"><div class="panel bar"><h2>柱状图-各行业程序员数量 <a href="javascript:;"></a><a href="javacript:;"> </a></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="/jquery/echarts-4.2.1.min.js"></script><script src="js/index.js"></script><script src="js/china.js"></script><script src="js/myMap.js"></script><script>(function (fn) {fn();setInterval(fn, 1000);})(function () {var dt = new Date();document.querySelector(".showTime span").innerHTML =dt.getDate() + "日-" +dt.getHours() + "时" +dt.getMinutes() + "分" +dt.getSeconds() + "秒";});</script></body></html>

2.CSS

* {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;background-repeat: no-repeat;background-color: #06164a;background-size: cover;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: .475rem;color: #fff;text-align: center;line-height: 1rem}header .showTime {position: absolute;top: 0;right: .375rem;line-height: .9375rem;font-size: .25rem;color: rgba(255, 255, 255, .7)}.mainbox {min-width: 1024px;max-width: 1920px;padding: .125rem .125rem 0;display: flex}.mainbox .column {flex: 3}.mainbox .column:nth-child(2) {flex: 5;margin: 0 .125rem .1875rem;overflow: hidden}.panel {position: relative;height: 3.875rem;border: 1px solid rgba(25, 186, 139, .17);background: rgba(255, 255, 255, .04) url(../images/line\(1\).png);padding: 0 .1875rem .5rem;margin-bottom: .1875rem}.panel::before {position: absolute;top: 0;left: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;border-radius: 20%}.panel::after {position: absolute;top: 0;right: 0;content: "";width: 10px;height: 10px;border-top: 2px solid #02a6b5;border-right: 2px solid #02a6b5;border-radius: 20%}.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;border-radius: 20%}.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;border-radius: 20%}.panel h2 {height: .6rem;line-height: .6rem;text-align: center;color: #fff;font-size: .25rem;font-weight: 400}.panel h2 a {margin: 0 .1875rem;color: #fff;text-decoration: underline}.panel .chart {height: 3rem}.no {background: rgba(101, 132, 226, .1);padding: .1875rem}.no .no-hd {position: relative;border: 1px solid rgba(25, 186, 139, .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: .875rem;color: #ffeb7b;padding: .05rem 0;font-family: electronicFont;font-weight: 700}.no .no-hd ul li:first-child::after {content: "";position: absolute;height: 50%;width: 1px;background: rgba(255, 255, 255, .2);right: 0;top: 25%}.no .no-bd ul {display: flex}.no .no-bd ul li {flex: 1;height: .5rem;line-height: .5rem;text-align: center;font-size: .225rem;color: rgba(255, 255, 255, .7);padding-top: .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: .3}.map .map2 {width: 8.0375rem;height: 8.0375rem;background-image: url(../images/lbx.png);opacity: .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}}

3.JavaScript

4.Echarts

5.自适应

(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;function setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();function setRemUnit() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();window.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function (e) {if (e.persisted) {setRemUnit();}});if (dpr >= 2) {var fakeBody = document.createElement("body");var testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}})(window, document);

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。