基于html+css+JavaScript网页设计大作业-游戏可视化大数据用户案例+源代码+演示地址资源-CSDN文库

共18个文件

js：7个

png：5个

gif：3个

版权申诉

html

javascript

94 浏览量 2024-06-19 02:24:42 上传评论收藏 1.68MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

065 游戏可视化大数据用户案例.zip （18个子文件）

065 游戏可视化大数据用户案例

游戏可视化大数据用户案例.png 757KB

jquery.countup.min.js 1KB

jquery.waypoints.min.js 9KB

js.js 303B

china.js 117KB

echarts.min.js 2.3MB

jquery.js 82KB

jquery.liMarquee.js 35KB

css

comon0.css 6KB

index.html 18KB

images

logo1.png 14KB

loading.gif 701B

logo.png 507KB

hm.gif 43B

clock.png 551B

linebg.png 708B

bg.jpg 93KB

animate.gif 48KB

<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" href="css/comon0.css"> </head> <body> <div class="loading"> <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div> </div> <div class="mainbox"> <ul class="clearfix"> <li> <div class="logo1"><img src="images/logo1.png"><span><a href="https://gitee.com/iGaoWei/big-data-view">可视化大数据用户案例</a></span></div> <div class="boxall" style="height: 2.2rem"> <div class="alltitle">今日实时充值总额<span>real-time</span></div> <div class="boxnav"> <p> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> <i> 元</i> </p> </div> <div class="boxfoot"></div> </div> <div class="boxall" style="height: 3.3rem"> <div class="alltitle">当日收入<span>income</span></div> <div id="echarts1" class="chartbox"></div> <div class="boxfoot"></div> </div> <div class="boxall" style="height: 3.4rem"> <p class="pth"> <span>序号</span> <span>地区</span> <span>充值金额</span> <span>时间</span> </p> <div class="wrap"> <ul> <li> <p> <span><i>1</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>2</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>3</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>4</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>5</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>6</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>7</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>8</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>9</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> <li> <p> <span><i>10</i></span> <span>多伦多</span> <span>199.8</span> <span>2017-08-01 15:23:12</span> </p> </li> </ul> </div> <div class="boxfoot"></div> </div> </li> <li> <div class="logo2"><img src="images/logo.png" style="opacity: 0"></div>  </li> <li> <div class="logo3"> <div class="time pulll_left"><img src="images/clock.png"><span>2021-07-28 02:40:03</span></div> </div> <div class="boxall" style="height:2.2rem"> <div class="alltitle">转化率<span>real-time</span></div> <div class="boxfoot"></div> <div class="zhl clearfix"> <div class="zhlbg" style="width: 65%"></div> <div class="zhltip">65%</div> </div> </div> <div class="boxall" style="height:3.3rem"> <div class="alltitle">实时在线<span>real-time</span></div> <div class="boxfoot"></div> <div class="chartbox" id="echarts3"></div> </div> <div class="boxall" style="height:3.4rem"> <div class="alltitle">新增用户<span>new user</span></div> <div class="boxfoot"></div> <div class="chartbox" id="echarts2"></div> </div> </li> </ul> <div class="copyright"><a href="https://gitee.com/iGaoWei/big-data-view">更多模板：关注公众号【DreamCoders】沪ICP备1234567890-1</a></div> </div> <div class="back"></div> <script language="JavaScript" src="js/js.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script src="js/jquery.liMarquee.js"></script> <script> $(function(){ $('.wrap').liMarquee({ direction: 'up',//身上滚动 runshort: false,//内容不足时不滚动 scrollamount: 20//速度 }); }); </script> <script type="text/javascript"> $(document).ready(function(){ myChart1.resize(); 　 myChart2.resize(); myChart3.resize(); myChart.resize(); }) window.addEventListener("resize", function () { myChart1.resize(); 　 myChart2.resize(); myChart3.resize(); myChart.resize(); }); </script> <script type="text/javascript"> var myChart1 = echarts.init(document.getElementById('echarts1')); option1 = { // backgroundColor: '#00265f', tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['昨日', '今日'], align: 'right', right: '40%', bottom:'3%', textStyle: { color: "#fff" }, itemWidth: 10, itemHeight: 10, itemGap: 35 }, grid: { left: '0%', top: '0%', right: '0%', bottom: '15%', containLabel: true }, xAxis: [{ type: 'category', data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ], axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" }, }, axisTick: { show: false, }, axisLabel: { interval: 0, // rotate:50, show: true, splitNumber: 15, textStyle: { fontFamily: "微软雅黑", color: "rgba(255,255,255,.6)", fontSize: '120%', }, }, }], yAxis: [{ type: 'value', axisLabel: { //formatter: '{value} %' show:false, }, axisTick: { show: false, }, axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1 )", width: 1, type: "solid" }, }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)", } } }], series: [{ name: '昨日', type: 'bar', data: [20, 22, 25, 36, 35, 21, 19, 26, 27, 26, 28, 30, 38, 44, 48, 59, 64, 69, 68, 72, 80, 70, 49, 32], barWidth:'25%', //柱子宽度 // barGap: 1, //柱子之间间距 itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3ca1ff' }, { offset: 1, color: '#0a73d5' }]), opacity: 1, barBorderRadius: 50, } } }, { name: '今日', type: 'bar', data: [23, 26, 21, 32, 31, 26, 29, 20, 22, 29, 30, 34, 40, 48, 42, 53, 61, 62, 64, 71, 72, 73, 41, 30], barWidth:'25%', // barGap: 1, itemStyle: { normal: {

评论收藏

内容反馈

版权申诉