200字范文 > 基于Echarts实现可视化数据大屏通用大数据可视化展示平台模板

基于Echarts实现可视化数据大屏通用大数据可视化展示平台模板

时间：2023-01-07 17:08:13

前言

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

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

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

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

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

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

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

文章目录

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

一、Echart是什么

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

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

四、代码实现

1.HTML

<!doctype html><html><head><meta charset="utf-8"><title>通用大数据可视化展示平台模板</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/echarts.min.js"></script><script type="text/javascript" src="js/china.js"></script><script type="text/javascript" src="js/js.js"></script><script type="text/javascript" src="js/jquery.cxselect.min.js"></script><link rel="stylesheet" href="css/comon0.css"></head><body><div class="canvas"><iframe src="js/canvas.html" frameborder="0" style="width: 100%; height: 100%"></iframe></div><div class="loading"><div class="loadbox"><img src="images/loading.gif">页面加载中...</div></div><div style="overflow: hidden;background:rgba(0,0,40,0) ; position: relative; z-index: 2;"><div class="mainbox"><ul class="clearfix"><li><div class="boxall" style="height:350px;"><div class="alltitle">标题样式</div><div class="navboxall" id="echart1"></div></div><div class="boxall" style="height:360px;"><div class="alltitle">标题样式</div><div class="navboxall"><div class="sycm"><ul class="clearfix"><li><h2>1824</h2><span>当年销售额</span></li><li><h2>1920</h2><span>当月销售额</span></li><li><h2>19%</h2><span>利润额</span></li><li><h2>1824</h2><span>当年销售额</span></li><li><h2>1920</h2><span>当月销售额</span></li><li><h2>19%</h2><span>利润额</span></li></ul></div></div></div></li><li><div class="boxall" style="height:100px"><div class="navboxall"><h1>通用大数据可视化展示平台模板</h1></div></div><div class="boxall" style="height:610px"><div class="navboxall" style="overflow: hidden;height: 100%"><div style="width: 120%; height: 120%; position: relative; left: -10%; top: -11%;" id="echart3"></div></div></div></li><li><div class="boxall" style="height:350px"><div class="alltitle">标题样式</div><div class="navboxall"><table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><th scope="col">排名</th><th scope="col">名称</th><th scope="col">金额</th></tr><tr><td><span>1</span></td><td>腾讯科技</td><td>114万<br></td></tr><tr><td><span>2</span></td><td>百度公司</td><td>923823万</td></tr><tr><td><span>3</span></td><td>新浪</td><td>1240253万</td></tr><tr><td><span>4</span></td><td>网易</td><td>1.2亿</td></tr><tr><td><span>5</span></td><td>雅虎</td><td>13423万</td></tr><tr><td><span>6</span></td><td>雅虎</td><td>13423万</td></tr></tbody></table></div></div><div class="boxall" style="height: 360px"><div class="alltitle">标题样式</div><div class="navboxall"><table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><th scope="col">排名</th><th scope="col">名称</th><th scope="col">金额</th></tr><tr><td><span>1</span></td><td>腾讯科技</td><td>114万<br></td></tr><tr><td><span>2</span></td><td>百度公司</td><td>923823万</td></tr><tr><td><span>3</span></td><td>新浪</td><td>1240253万</td></tr><tr><td><span>4</span></td><td>网易</td><td>1.2亿</td></tr><tr><td><span>5</span></td><td>雅虎</td><td>13423万</td></tr><tr><td><span>6</span></td><td>雅虎</td><td>13423万</td></tr></tbody></table></div></div></li></ul><ul class="clearfix"><li style="width:60%"><div class="boxall" style="height:300px;"><div class="alltitle">标题样式</div><div class="navboxall " id="echart2"></div></div></li><li style="width: 40%"><div class="boxall" style="height:300px"><div class="alltitle">标题样式</div><div class="navboxall" id="echart4"></div></div></li></ul></div></div><script>$(function() {$('.wrap,.adduser').liMarquee({direction: 'up',runshort: false,scrollamount: 20});});</script></body></html>

2.CSS

@charset "utf-8";/* CSS Document 更多精品模板请访问：*/* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}*,body {padding: 0px;margin: 0px;color: #222;font-family: "微软雅黑";}body {color: #666;font-size: 16px;}li {list-style-type: none;}table {}i {margin: 0px;padding: 0px;text-indent: 0px;}img {border: none;max-width: 100%;}a {text-decoration: none;color: #399bff;}a.active,a:focus {outline: none !important;text-decoration: none;}ol,ul,p,h1,h2,h3,h4,h5,h6 {padding: 0;margin: 0}a:hover {color: #06c;text-decoration: none !important}.clearfix:after,.clearfix:before {display: table;content: " "}.clearfix:after {clear: both}.pulll_left {float: left;}.pulll_right {float: right;}.canvas {position: fixed;width: 100%;left: 0;top: 0;height: 100%;z-index: 1;}.loading {position: fixed;left: 0;top: 0;font-size: 16px;z-index: 100000000;width: 100%;height: 100%;background: #1a1a1c;text-align: center;}.loadbox {position: absolute;width: 160px;height: 150px;color: rgba(255, 255, 255, .6);left: 50%;top: 50%;margin-top: -100px;margin-left: -75px;}.loadbox img {margin: 10px auto;display: block;width: 40px;}.head {height: 105px;background: url(../images/head_bg.png) no-repeat center center;position: relative}h1 {color: #fff;text-align: left;font-size: 40px;line-height: 64px;text-align: center;}.weather {position: absolute;right: 20px;top: 0;line-height: 70px;}.weather span {color: rgba(255, 255, 255, .7) !important;font-size: 18px;}.mainbox {padding: 20px 20px 0px 20px;}.mainbox>ul {margin-left: -.4rem;margin-right: -.4rem;}.mainbox>ul>li {float: left;padding: 0 .4rem}.mainbox>ul>li {width: 24%}.mainbox>ul>li:nth-child(2) {width: 52%}.boxall {padding: 15px;background: rgba(0, 0, 0, .2);position: relative;margin-bottom: 15px;;z-index: 10;}.alltitle {font-size: 18px;color: #fff;position: relative;margin-bottom: 10px;}.alltitle:before {width: 90%;height: 1px;top: 12px;position: absolute;content: "";border-bottom: dashed #fff 1px;right: 0;opacity: .2;}.alltitle:after {width: 8px;height: 10px;top: 8px;position: absolute;content: "";border-radius: 20px;right: 0;background: #0c51f9;}.navboxall {height: calc(100% - 30px);}.num,.zhibiao {height: 100%;width: 50%;}.zb1,.zb2,.zb3 {float: left;width: 33.3333%;height: 100%;}#zb1,#zb2,#zb3 {height: calc(100% - 30px);}.zhibiao span {padding-top: 20px;display: block;text-align: center;color: #fff;font-size: 16px;}.num {padding-right: 20px;}.numbt {font-size: 24px;color: #fff;padding-top: 14px;}.numbt span {font-size: 18px;padding-left: 10px;color: #fff;}.numtxt {color: #fef000;font-size: 80px;font-family: arial;border-top: 1px solid rgba(255, 255, 255, .1);border-bottom: 1px solid rgba(255, 255, 255, .1);padding: 10px 0;margin: 18px 0;font-weight: bold;letter-spacing: 2px;}.table1 th {border-bottom: 1px solid rgba(255, 255, 255, .2);font-size: 16px;color: rgba(255, 255, 255, .6);font-weight: normal;padding: 10px 0 10px 0;}.table1 td {font-size: 16px;color: rgba(255, 255, 255, .4);padding: 15px 0 0 0;}.table1 span {width: 24px;height: 24px;border-radius: 53px;display: block;background: #878787;color: #fff;line-height: 24px;text-align: center;}.table1 tr:nth-child(2) span {background: #ed405d}.table1 tr:nth-child(3) span {background: #f78c44}.table1 tr:nth-child(4) span {background: #49bcf7}/*Plugin CSS*/.sycm ul {}.sycm li {text-align: center;padding: 10px 0;position: relative;float: left;width: 50%;padding: 20px 0;}.sycm ul li:nth-child(odd):before {position: absolute;content: "";height: 30%;width: 1px;background: rgba(255, 255, 255, .2);right: 0;top: 30%;}.sycm li h2 {font-size: 24px;color: #c5ccff;}.sycm li span {font-size: 18px;color: #fff;opacity: .5;}.sycm p {border: 1px solid rgba(255, 255, 255, .3);color: rgba(255, 255, 255, .6);text-align: center;margin: 10px;border-radius: 5px;padding: 8px;position: relative;}.sycm p:before {content: "";position: absolute;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid rgba(255, 255, 255, .3);bottom: -8px;left: 49%}

五、更多干货

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

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

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

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

网友评论

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