前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.JavaScript 五、更多干货一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html><!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--><!--[if !IE]><!--><html lang="en"><!--<![endif]--><head><meta charset="utf-8"><title>Home</title><meta name="description" content=""><meta name="author" content=""><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/jquery/bootstrap-3.3.4.css"><link rel="stylesheet" href="/jquery/font-awesome.4.6.0.css"><link href="css/animations.css" rel="stylesheet"><link href="css/content1.0.css" rel="stylesheet"><script src="/jquery/jquery-1.10.2.js"></script><script type="text/javascript" src="js/times.js"></script></head><body ng-app="myApp" ng-controller="customersCtrl"><div class="banner-caption clearfix"><div id="title"><div class="caption-title clearfix"><i class="title-left"><img src="images/title-left.png"></i><p class="title-left-title-font">XXX科技业务数据统计</p><i class="title-left"><img src="images/title-right.png"></i></div><div class="title-date" style="height: 40px;"><p id="DateTime" style="height: 40px;text-align: center;">实时数据</p></div></div><div id="main"><div class="col-md-12"><div class="row"><div id="title01" class="col-xs-12 col-sm-12 col-md-3"><div class="data-box1 clearfix" id="box01"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>今日数据分析</span><b class="data-title-right">]</b></div><div class="total-mn" id="total-mn1"><span>日均额</span></div><div id="box1_top"><div id="box2" class="box-echart box-bottom"></div></div><div class="total-mn" id="total-mn2"><span>资产在贷余额</span></div><div id="box1_bottom"><div id="box4" class="box-echart"></div></div><ul class="live-box" id="live-box"><li style="margin-right: 2%;"><p>年业务成交额</p><p class="live-box-font1"><span style="font-size: 2rem;">549462</span> 万元</p></li><li><p>年完成率</p><p class="live-box-font1"><span style="font-size: 2rem;">80%</span></p></li></ul></div><div class="data-box1" id="box8-box" style="margin-top: 30px;"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>所贷金额用途</span><b class="data-title-right">]</b></div><div id="box8" class="box-echart"></div></div></div><div id="title02" class="col-xs-12 col-sm-12 col-md-6 panel-top panel-bottom"><div class="data-box1 box1-back" id="box02"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title"><b class="data-title-left">[</b><span>业务数据分布</span><b class="data-title-right">]</b></div><ul class="data-box1-data clearfix"><p class="data-box1-font1">当日业务成交额</p><li class="data-box1-panel">746214q3464257495678098</li><li class="data-box1-font1" style="padding-top: 1rem;">万元</li></ul><div class="total-mn"><span>本周业务累计额</span><span class="live-box-font1"><span style="font-size: 2.2rem;">5149462</span> 万元</span></div><div id="box1" class="box-echart-china"></div></div><div class="data-box1" id="box9-box" style="margin-top: 30px;"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title" style="width: 227px"><b class="data-title-left">[</b><span>资产数据分析-列表</span><b class="data-title-right">]</b></div><div id="box9" class="box9-1"><table class="panel-table"><thead><tr><th ng-repeat="x in listHead">{{ x.categories }}</th></tr></thead><tbody><tr ng-repeat="y in listContent"><td>{{ y.categories }}</td><td>{{ y.data1 }}</td><td>{{ y.data2 }}</td><td>{{ y.data3 }}</td><td>{{ y.data4 }}</td><td>{{ y.data5 }}</td><td>{{ y.data6 }}</td></tr></tbody></table></div><div class="box9-2"><table class="panel-table"><thead><tr><th width="50%">资产端</th><td>前隆</td></tr></thead><tbody><tr ng-repeat="z in listData1"><th>{{ z.categories }}</th><td>{{ z.data1 }}</td></tr></tbody></table><table class="panel-table"><thead><tr><th width="50%">资产端</th><td>用钱宝</td></tr></thead><tbody><tr ng-repeat="q in listData1"><th>{{ q.categories }}</th><td>{{ q.data2 }}</td></tr></tbody></table><table class="panel-table"><thead><tr><th width="50%">资产端</th><td>闪银奇异</td></tr></thead><tbody><tr ng-repeat="w in listData1"><th>{{ w.categories }}</th><td>{{ w.data3 }}</td></tr></tbody></table><table class="panel-table"><thead><tr><th width="50%">资产端</th><td>借贷宝</td></tr></thead><tbody><tr ng-repeat="e in listData1"><th>{{ e.categories }}</th><td>{{ e.data4 }}</td></tr></tbody></table><table class="panel-table"><thead><tr><th width="50%">资产端</th><td>蚂蚁借呗</td></tr></thead><tbody><tr ng-repeat="t in listData1"><th>{{ t.categories }}</th><td>{{ t.data5 }}</td></tr></tbody></table></div></div></div><div id="title03" class="col-xs-12 col-sm-12 col-md-3"><div class="data-box1" id="box03"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title" style="width: 238px"><b class="data-title-left">[</b><span>资金占比和资产占比</span><b class="data-title-right">]</b></div><ul class="ym-menu clearfix" id="ym-menu"><li class="ym-active"><a href="">本年</a></li><li class="taba"><a href="">本月</a></li></ul><div id="box3" class="box-echart tabcontent"></div><div id="boxes3" class="box-echart tabcontent" style="display: none;"></div></div><div class="data-box1" id="box04" style="margin-top: 30px;"><i class="topL"></i><i class="topR"></i><i class="bottomL"></i><i class="bottomR"></i><div class="data-title" style="width: 238px"><b class="data-title-left">[</b><span>计划放款与累计放款</span><b class="data-title-right">]</b></div><div id="box5" class="box-echart"></div></div></div></div></div></div></div></div><script src="/jquery/bootstrap-3.3.4.js"></script><script src="/jquery/echarts-4.2.1.min.js"></script><script type="text/javascript" src="js/china.js"></script><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="js/mycharts.js"></script><script>$(document).ready(function () {$('.ym-menu li').click(function () {var index = $(this).index();$(this).attr('class', "ym-active").siblings('li').attr('class', 'taba');$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();});var t = 0;var timer = setInterval(function () {if (t == $('.ym-menu li').length) t = 0;$('.ym-menu li:eq(' + t + ')').click();t++;}, 3000)})</script></body></html>
2.CSS
html,body {margin: 0;height: 100%}html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%}body {font-size: 62.5%;line-height: 1.5;color: #333;background-color: #000c3b;position: relative;font-family: 微软雅黑}.clearfix:before,.clearfix:after {content: "";display: table}.clearfix:after {clear: both;overflow: hidden}.clearfix {*zoom: 1}.banner-caption {}.title-left img {width: 100%}@media(max-width:767px) {.title-left {float: left;display: none}.title-left-title-font {text-align: center;margin: 0 10px;background: -webkit-linear-gradient(top, #fff, #65c4f1);-webkit-background-clip: text;-webkit-text-fill-color: transparent}.panel-bottom {margin-bottom: 30px}.box9-1 {display: none}.box9-2 {display: block}}@media(min-width:768px) and (max-width:991px) {.title-left {float: left;display: none}.title-left-title-font {text-align: center;margin: 0 10px;background: -webkit-linear-gradient(top, #fff, #65c4f1);-webkit-background-clip: text;-webkit-text-fill-color: transparent}.panel-bottom {margin-bottom: 30px}.box9-1 {display: none}.box9-2 {display: block}}@media(min-width:992px) and (max-width:1199px) {.title-left {float: left;display: none}.title-left-title-font {float: left;margin: 0 10px;background: -webkit-linear-gradient(top, #fff, #65c4f1);-webkit-background-clip: text;-webkit-text-fill-color: transparent}.panel-bottom {margin-bottom: 0}.box9-1 {display: block}.box9-2 {display: none}}@media(min-width:1200px) {.title-left {float: left;display: block}.title-left-title-font {float: left;margin: 0 10px;background: -webkit-linear-gradient(top, #fff, #65c4f1);-webkit-background-clip: text;-webkit-text-fill-color: transparent}.panel-bottom {margin-bottom: 0}.box9-1 {display: block}.box9-2 {display: none}}.caption-title {font-size: 3rem;font-weight: 900;line-height: 65px;max-width: 980px;margin: 0 auto}.data-box1 {border: 2px solid #032d60;-webkit-box-shadow: #07417a 0 0 10px;-moz-box-shadow: #07417a 0 0 10px;box-shadow: inset 0 0 30px #07417a;position: relative}.data-title-left,.data-title-right {color: #105eda;font-family: 微软雅黑;font-size: 20px}.data-title {background-color: #000c3b;width: 178px;margin: -18px auto 0;color: #83c7e3;font-size: 20px}.data-title span {margin: 0 15px}.box-bottom {border-bottom-width: 2px;border-bottom-color: #032d60;border-bottom-style: solid}.topL {width: 20px;height: 20px;border-top-width: 2px;border-top-color: #26c6f0;border-top-style: solid;border-left-width: 2px;border-left-color: #26c6f0;border-left-style: solid;position: absolute;top: -2px;left: -2px}.topR {width: 20px;height: 20px;border-top-width: 2px;border-top-color: #26c6f0;border-top-style: solid;border-right-width: 2px;border-right-color: #26c6f0;border-right-style: solid;position: absolute;top: -2px;right: -2px}.bottomL {width: 20px;height: 20px;border-bottom-width: 2px;border-bottom-color: #26c6f0;border-bottom-style: solid;border-left-width: 2px;border-left-color: #26c6f0;border-left-style: solid;position: absolute;bottom: -2px;left: -2px}.bottomR {width: 20px;height: 20px;border-bottom-width: 2px;border-bottom-color: #26c6f0;border-bottom-style: solid;border-right-width: 2px;border-right-color: #26c6f0;border-right-style: solid;position: absolute;bottom: -2px;right: -2px}.panel-top {margin-top: 30px}.box-echart {width: 100%;height: 200px;margin: 10px auto}.box-echart-china {width: 92%;margin: 10px auto;height: 500px;position: absolute;top: 11%;left: 5%}.box1-back {height: 600px;background-image: -webkit-radial-gradient(250px 250px at 50% 50%, hsla(209, 99%, 32%, 28), hsla(228, 100%, 0%, 0));background-image: radial-gradient(250px 250px at 50% 50%, hsla(209, 99%, 32%, 28), hsla(228, 100%, 0%, 0))}.panel-table {text-align: center;color: #ccc;margin: 0 auto !important;width: 96%;margin-top: 20px !important;padding: .5rem 0 !important;font-size: 1.5rem}.panel-table tr {height: 3rem;line-height: 2rem}.panel-table th {text-align: center !important}.panel-table thead tr {border-bottom: solid 1px #a8b4be;border-top: solid 2px #a8b4be}.data-box1-data {padding: 0;margin: 0 5%}.data-box1-data li {float: left;list-style-type: none;margin-right: 10px}.data-box1-font1 {color: #83c7e3;font-size: 2rem}.data-box1-panel {background-color: #214398;color: #fff;font-size: 2.4rem;padding: 0 2%;letter-spacing: 5px}@media(max-width:767px) {.title-date {margin-bottom: 20px}}@media(min-width:768px) and (max-width:991px) {.title-date {margin-bottom: 20px}}.title-date>p {color: #5b8bb6;box-shadow: inset 0 0 30px #07417a;border: solid 2px #032d60;border-radius: 10px;font-family: 微软雅黑;font-size: 2rem;line-height: 35px;line-height: 38px;max-width: 355px;margin: 5px auto}.live-box {padding: 0;width: 90%;margin: 0 auto}.live-box li {float: left;list-style-type: none;margin-bottom: 4%;font-size: 1.6rem;line-height: 1.4rem;width: 49%;background-color: #214398;color: #fff;padding: 2% 2% 0}.live-box-font1 {color: #f4e925}.total-mn {font-size: 1.6rem;color: #fff;padding-left: 5%}.ym-menu {padding: 0;width: 50%;margin: 5% auto 0;border: 2px solid #032d60}.ym-menu li {font-size: 1.6rem;color: #fff;width: 50%;text-align: center;list-style-type: none;float: left}.ym-active {background-color: #214398}.ym-active a {list-style-type: none;color: #fff}
3.JavaScript
var slidint;function newTimer() {stopit();var today;today = new Date();var str = today.toLocaleDateString();str += " " + week();str += " " + today.toLocaleTimeString();var o = document.getElementById("DateTime");o.innerHTML = str;slidint = setTimeout(newTimer, 1000);}function stopit() {clearTimeout(slidint);}function week() {var d, day, x, s = " ";var x = new Array("星期日", "星期一", "星期二");var x = x.concat("星期三", "星期四", "星期五");var x = x.concat("星期六");d = new Date();day = d.getDay();return (s += x[day]);}window.onload = function() {newTimer();}
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
