From 79f43426a1a14980683f67ea5182b79af87e1178 Mon Sep 17 00:00:00 2001 From: whycq <whycq> Date: 星期六, 11 十二月 2021 15:33:44 +0800 Subject: [PATCH] # --- static/js/lib/echarts.js | 233 +++++++++++++++++++++++++ static/css/main.css | 142 +++++++++++++++ static/js/lib/btnHide.js | 28 +++ static/js/lib/lunbobiao.js | 88 +++++++++ 4 files changed, 491 insertions(+), 0 deletions(-) diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..0b69fc2 --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,142 @@ +body { + font-family: sans-serif; + /*font-weight: bold;*/ + font-size: 11px; + background-color: #000; + margin: 0; +} +canvas { + display: block; +} +#btnhide { + position: absolute; + top: 37.5%; + left: 100%; + transform: translateY(50%); + width: 10%; + height: 10%; + background: rgba(255,255,255,0.3); + border: none; + color: white; + /*padding: 15px 32px;*/ + text-align: center; + text-decoration: none; + /*display: none;*/ + font-size: 16px; + border-radius: 0px 5px 5px 0px; +} +#btnhide_m{ + position: absolute; + top: 37.5%; + left: 100%; + transform: translateY(50%); + width: 10%; + height: 10%; + border-radius: 0px 5px 5px 0px; + background: rgba(143, 200, 227, 0.2); + backdrop-filter: blur(1px); +} +#groundglass { + position: absolute; + top: 50%; + left: 1%; + transform: translateY(-50%); + width: 20%; + height: 95%; + background: rgba(143, 200, 227, 0.2); + border-radius: 5px; + backdrop-filter: blur(1px); + /*display: none;*/ +} +#sidebar{ + /*瀹氫綅*/ + position: absolute; + top: 50%; + left: 1%; + transform: translateY(-50%); + width: 20%; + height: 95%; + /*鐗规晥*/ + background: rgba(255,255,255,0.3); + border-radius: 5px; + color: #ffffff; + /*display: none;*/ +} +#sidebar p1{ + height: 24px; + font-family: FZChaoCuHei-M10S; + font-weight: 900; + font-size: 24px; + text-indent: 2.5%; + letter-spacing:1px; + line-height: 25px; + margin-top: 15px; + margin-left: 2.5%; + display: block; +} +#sidebar p2{ + height: 10px; + font-size: 5px; + font-family: FZChaoCuHei-M10S; + font-weight: 400; + letter-spacing:0px; + line-height: 8px; + margin-top: 7px; + transform: scale(0.8,0.8); + padding-left: 5%; +} +#Histogram{ + width: 100%; + height: 280px; + padding-left: 3%; +} +#baobiao2 { + width: 99%; + height: 280px; + padding-left: 3%; +} +.tablebox { + height: 25%; + overflow: hidden; + position: relative; + width: 95%; + margin: 30px auto; + /*background-color: rgba(6,26,103,1);*/ +} +.tbl-header { + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 999; +} +.tbl-body { + width: 100%; + position: absolute; + top: 0; + left: 0; +} +.tablebox table { + width: 100%; +} +.tablebox table th, +.tablebox table td { + font-size: 12px; + color: #ffffff; + line-height: 15px; + text-align: center; +} +.tablebox table tr th { + background-color: rgba(136,176,226,1); + cursor: pointer; +} +.tablebox table tr td { + background-color: transparent; +} +.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td { + background-color: rgba(136, 176, 226, 0.4); +} +.tablebox table tr td span, +.tablebox table tr td span { + font-size: 24px; +} \ No newline at end of file diff --git a/static/js/lib/btnHide.js b/static/js/lib/btnHide.js new file mode 100644 index 0000000..e77f085 --- /dev/null +++ b/static/js/lib/btnHide.js @@ -0,0 +1,28 @@ +function fn1(){ + $('#sidebar').animate({ + left:'-20%' + },"fast"); + $('#groundglass').animate({ + left:'-20%' + },"fast"); +} +function fn2() { + $('#sidebar').animate({ + left:'1%' + },"fast"); + $('#groundglass').animate({ + left:'1%' + },"fast"); +} +function btnHide() { + var obj = $('#btnhide'); + var tt = obj.html(); + if (tt =='闅愯棌'){ + obj.html('灞曠ず'); + fn1(); + }else if(tt == '灞曠ず'){ + obj.html('闅愯棌'); + fn2(); + } + +} \ No newline at end of file diff --git a/static/js/lib/echarts.js b/static/js/lib/echarts.js new file mode 100644 index 0000000..5db8cb9 --- /dev/null +++ b/static/js/lib/echarts.js @@ -0,0 +1,233 @@ +var dom1 = document.getElementById("Histogram"); +var myChart1 = echarts.init(dom1); +window.addEventListener('resize',function () { + myChart1.resize(); +}) +var app1 = {}; + +var dom = document.getElementById("baobiao2"); +var myChart = echarts.init(dom); +window.addEventListener('resize',function () { + myChart.resize(); +}) +var app = {}; + + +var option1; + +option1 = { + title: { + text: '骞村害杩�/鍑鸿揣閲�', + x:'5px', + y:'15px', + textStyle:{ + color:'#ffffff', + fontWeight:400, + fontSize: 10, + }, + subtext: 'Data', + subtextStyle:{ + align:'center', + color:'#ffffff', + fontSize: 7, + }, + show: true, + + }, + tooltip: { + trigger: 'axis' + }, + textStyle:{ + color:'#f5f4f4', + }, + legend: { + show:false, + data: ['杩涜揣', '鍑鸿揣'] + }, + toolbox: { + show: false, + feature: { + dataView: { show: true, readOnly: false }, + magicType: { show: true, type: ['line', 'bar'] }, + restore: { show: true }, + saveAsImage: { show: true } + } + }, + calculable: true, + xAxis: [ + { + color:'#975a5a', + type: 'category', + axisTick:{ + show:false, + lineStyle:{ + color:'#000' + } + }, + axisLabel: { // 濡傛灉杩欎釜瀛楁涓嶈缃紝echarts浼氭牴鎹睆瀹藉強妯潗鏍囨暟鎹嚜鍔ㄧ粰鍑洪棿闅� + fontSize:9, + interval: 1, // 闂撮殧闀垮害锛屽彲鑷畾涔夛紙濡傛灉鏄椂闂存牸寮忥紝echarts浼氳嚜鍔ㄥ鐞嗭級 + rotate: 0 ,// 妯潗鏍囦笂label鐨勫�炬枩搴� + textStyle: { + color:'#fff' + } + }, + axisLine:{ + lineStyle: { + color: '#e2e1e1',// x杞村埢搴︾嚎鐨勯鑹� + }}, + data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] + } + ], + yAxis: [ + { + type: 'value', + offset: -4, + axisTick:{ + show:false, + }, + axisLabel: { + fontSize:9, + }, + splitLine:{ + lineStyle:{ + color:'#cdcdcd'// y杞村垎鍓茬嚎棰滆壊 + } + } + + } + ], + series: [ + { + color:['#88b0e2'], + name: '杩涜揣', + type: 'bar', + data: [ + 204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 + ], + }, + { + color:['#f8f7f7'], + name: '鍑鸿揣', + type: 'bar', + data: [ + 100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 + ], + } + ], + +}; + +if (option1 && typeof option1 === 'object') { + myChart1.setOption(option1); +} + +let base = +new Date(1988, 9, 3); +let oneDay = 24 * 3600 * 1000; +let data = [[base, Math.random() * 300]]; +for (let i = 1; i < 20000; i++) { + let now = new Date((base += oneDay)); + data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]); +} +option = { + tooltip: { + trigger: 'axis', + position: function (pt) { + return [pt[0], '10%']; + } + }, + title: { + x:'5px', + y:'15px', + text: '閿�鍞欢鏁�', + textStyle:{ + color:'#ffffff', + fontWeight:400, + fontSize: 10, + }, + }, + toolbox: { + show:false, + feature: { + dataZoom: { + yAxisIndex: 'none' + }, + restore: {}, + saveAsImage: {} + } + }, + textStyle:{ + color:'#f5f4f4', + }, + xAxis: { + type: 'time', + boundaryGap: false, + axisTick:{ + show:false, + }, + axisLabel: { // 濡傛灉杩欎釜瀛楁涓嶈缃紝echarts浼氭牴鎹睆瀹藉強妯潗鏍囨暟鎹嚜鍔ㄧ粰鍑洪棿闅� + fontSize:9, + interval: 1, // 闂撮殧闀垮害锛屽彲鑷畾涔夛紙濡傛灉鏄椂闂存牸寮忥紝echarts浼氳嚜鍔ㄥ鐞嗭級 + rotate: 0 ,// 妯潗鏍囦笂label鐨勫�炬枩搴� + textStyle: { + color:'#fff' + } + }, + axisLine:{ + lineStyle: { + color: '#e2e1e1',// x杞村埢搴︾嚎鐨勯鑹� + }}, + + }, + + yAxis: { + type: 'value', + boundaryGap: [0, '100%'], + axisLabel: { + fontSize:9, + }, + splitLine:{ + lineStyle:{ + color:'#cdcdcd'// y杞村垎鍓茬嚎棰滆壊 + } + } + }, + dataZoom: [ + { + type: 'inside', + start: 0, + end: 20 + }, + { + start: 0, + end: 20 + } + ], + series: [ + { + name: 'Fake Data', + type: 'line', + smooth: true, + symbol: 'none', + areaStyle: { + normal: { + color: '#88b0e2' //鏀瑰彉鍖哄煙棰滆壊 + } + }, + itemStyle : { + normal : { + color:'#dddede', //鏀瑰彉鎶樼嚎鐐圭殑棰滆壊 + lineStyle:{ + // color:'#8cd5c2' //鏀瑰彉鎶樼嚎棰滆壊 + width:0.5, + } + } + }, + data: data + } + ] +}; + +if (option && typeof option === 'object') { + myChart.setOption(option); +} \ No newline at end of file diff --git a/static/js/lib/lunbobiao.js b/static/js/lib/lunbobiao.js new file mode 100644 index 0000000..401b26b --- /dev/null +++ b/static/js/lib/lunbobiao.js @@ -0,0 +1,88 @@ +var MyMarhq = ''; +clearInterval(MyMarhq); +$('.tbl-body tbody').empty(); +$('.tbl-header tbody').empty(); +var Items = [{"Ranking":"1","City":"淇濆畾","SaleIncome":"2506734.43","An":"53.00",}, + {"Ranking":"2","City":"娌у窞","SaleIncome":"1425935.58","An":"65.00",}, + {"Ranking":"3","City":"绉︾殗宀�","SaleIncome":"1372207.38","An":"34.00",}, + {"Ranking":"4","City":"琛℃按","SaleIncome":"972451.15","An":"15.00",}, + {"Ranking":"5","City":"鐭冲搴�","SaleIncome":"939010.52","An":"-57.00",}, + {"Ranking":"6","City":"閭㈠彴","SaleIncome":"774274.70","An":"-20.00",}, + {"Ranking":"7","City":"鍞愬北","SaleIncome":"680456.79","An":"-29.00",}, + {"Ranking":"8","City":"寮犲鍙�","SaleIncome":"613319.87","An":"2.00",}, + {"Ranking":"9","City":"涓补鍗庡ゥ","SaleIncome":"596575.25","An":"35.00",}, + {"Ranking":"10","City":"鎵垮痉","SaleIncome":"589048.12","An":"30.00",}, + {"Ranking":"11","City":"寤婂潑","SaleIncome":"515448.14","An":"-48.00",}, + {"Ranking":"12","City":"鐟炲窞","SaleIncome":"399875.26","An":"128.00",}, + {"Ranking":"13","City":"鐭冲搴勪腑娌�","SaleIncome":"90543.62","An":"-24.00",}, + {"Ranking":"14","City":"杈涢泦涓补","SaleIncome":"49255.52","An":"19.00",}, + {"Ranking":"15","City":"浜曢檳涓补","SaleIncome":"29682.60","An":"-74.00",}, + {"Ranking":"16","City":"淇濆畾涓补","SaleIncome":"11887.73","An":"-64.00",}] +$.each(Items,function (i, item) { + str = '<tr>'+ + '<td>'+item.Ranking+'</td>'+ + '<td>'+item.City+'</td>'+ + '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+ + '<td>'+(+item.An).toFixed(2)+'</td>' + // '<td>'+(+item.Mom).toFixed(2)+'</td>'+ + // '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+ + // '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+ + '</tr>' + + $('.tbl-body tbody').append(str); + $('.tbl-header tbody').append(str); +}); +if(Items.length > 10){ + $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html()); + $('.tbl-body').css('top', '0'); + var tblTop = 0; + var speedhq = 50; // 鏁板�艰秺澶ц秺鎱� + var outerHeight = $('.tbl-body tbody').find("tr").outerHeight(); + function Marqueehq(){ + if(tblTop <= -outerHeight*Items.length){ + tblTop = 0; + } else { + tblTop -= 1; + } + $('.tbl-body').css('top', tblTop+'px'); + } + + MyMarhq = setInterval(Marqueehq,speedhq); + + // 榧犳爣绉讳笂鍘诲彇娑堜簨浠� + $(".tbl-header tbody").hover(function (){ + clearInterval(MyMarhq); + },function (){ + clearInterval(MyMarhq); + MyMarhq = setInterval(Marqueehq,speedhq); + }) + +} +$.each(Items,function (i, item) { + str = '<tr>'+ + '<td>'+item.Ranking+'</td>'+ + '<td>'+item.City+'</td>'+ + '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+ + '<td>'+(+item.An).toFixed(2)+'</td>'+ + '</tr>' + + $('.tbl-body tbody').append(str); + $('.tbl-header tbody').append(str); +}); +if(Items.length > 10){ + $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html()); + $('.tbl-body').css('top', '0'); + var tblTop = 0; + var speedhq = 50; // 鏁板�艰秺澶ц秺鎱� + var outerHeight = $('.tbl-body tbody').find("tr").outerHeight(); + function Marqueehq(){ + if(tblTop <= -outerHeight*Items.length){ + tblTop = 0; + } else { + tblTop -= 1; + } + $('.tbl-body').css('top', tblTop+'px'); + } + + MyMarhq = setInterval(Marqueehq,speedhq); +} -- Gitblit v1.9.1