55 lines
8.5 KiB
Plaintext
55 lines
8.5 KiB
Plaintext
<%- partial('_partial/bg-cover') %>
|
||
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.echarts) %>"></script>
|
||
<main class="content">
|
||
<div class="container">
|
||
<div class="card">
|
||
<div class="card-content">
|
||
<div id="uv-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953900">
|
||
<div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 146px; top: 150px; pointer-events: none;">二月<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d223e7;"></span>2020年访客数: -<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3F77FE;"></span>2021年访客数: 2,225</div></div>
|
||
|
||
<div id="pv-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953901"><div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 577px; top: 315px; pointer-events: none;">九月<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#01C2F9;"></span>2020年访问量: 14,501<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#18D070;"></span>2021年访问量: 9,436</div></div>
|
||
|
||
<div id="refer-container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1609569953902"><div style="position: relative; width: 800px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="1000" height="500" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px "Microsoft YaHei"; padding: 5px; left: 538px; top: 206px; pointer-events: none;">访问来源 <br>直达: 3412 (52.67%)</div></div> </div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
var uvChart=echarts.init(document.getElementById('uv-container'),'shine');
|
||
var option={color:['#d223e7','#3F77FE','#01C2F9','#18D070'],title:{text:'站点访客数统计',subtext:'数据来源: 百度统计（自 2020/01/01 开始统计）',textStyle:{color:'#504b4d',}},tooltip:{trigger:'axis'},
|
||
legend:{data:['2020年访客数','2021年访客数'],bottom:0,left:'center',textStyle:{color:'#504b4d',}},//修改年份
|
||
toolbox:{show:true,feature:{mark:{show:true},magicType:{show:true,type:['line','bar','stack','tiled']},restore:{show:true},saveAsImage:{show:true}}},
|
||
calculable:true,xAxis:[{type:'category',boundaryGap:false,data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
|
||
axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],yAxis:[{type:'value',axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],
|
||
series:[{name:'2020年访客数',type:'line',smooth:true,itemStyle:{normal:{areaStyle:{type:'default'}}},
|
||
data:[788,2225,3145,2522,2798,2442,4028,3556,2835,2331,2423,1124],//第一个年份对应的数据顺序对应月份
|
||
axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}},},
|
||
{name:'2021年访客数',type:'line',smooth:true,itemStyle:{normal:{areaStyle:{type:'default'}}},
|
||
data:[2152,1656,2836,4606,null,null,null,null,null,null,null,null],//第二个年份对应的数据顺序对应月份
|
||
axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}},}]};
|
||
uvChart.setOption(option);var pvChart=echarts.init(document.getElementById('pv-container'));
|
||
var pv_option={color:['#01C2F9','#18D070','#d223e7','#3F77FE'],
|
||
title:{text:'站点访问量统计',subtext:'数据来源: 百度统计（自 2020/01/01 开始统计）',
|
||
textStyle:{color:'#504b4d',}},legend:{data:['2020年访问量','2021年访问量'],//修改年份
|
||
bottom:0,left:'center',textStyle:{color:'#504b4d',}},
|
||
tooltip:{trigger:'axis'},toolbox:{show:true,feature:{mark:{show:true},
|
||
magicType:{show:true,type:['line','bar','stack','tiled']},
|
||
restore:{show:true},saveAsImage:{show:true}}},calculable:true,
|
||
xAxis:[{type:'category',boundaryGap:false,data:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
|
||
axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],yAxis:[{type:'value',axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}],
|
||
series:[{name:'2020年访问量',type:'line',stack:'总量',data:[1101,2909,3784,2978,3090,2682,5207,4887,4436,3047,3262,2474],axisLabel:{formatter:'{value}',//第一个年份对应的数据顺序对应月份
|
||
textStyle:{color:'#929298'}}},{name:'2021年访问量',type:'line',stack:'总量',data:[6648,3882,5580,8817,null,null,null,null,null,null,null,null],//第二个年份对应的数据顺序对应月份
|
||
axisLabel:{formatter:'{value}',textStyle:{color:'#929298'}}}]};
|
||
pvChart.setOption(pv_option);
|
||
var referChart=echarts.init(document.getElementById('refer-container'));
|
||
var refer_option={title:{text:'站点访客来源统计',itemGap:20,subtext:'数据来源: 百度统计（最近30天的统计数据）',left:'right',textStyle:{color:'#504b4d',}},
|
||
tooltip:{trigger:'item',
|
||
formatter:'{a} <br/>{b}: {c} ({d}%)'},
|
||
legend:{orient:'vertical',left:10,data:['直达','百度','Google','Bing','其他'],//来源
|
||
textStyle:{color:'#929298',}},series:[{name:'访问来源',type:'pie',selectedMode:'single',radius:[0,'30%'],label:{position:'inner'},labelLine:{show:false},
|
||
data:[{value:4067,name:'直接访问',selected:true},{value:423,name:'外链'},{value:4327,name:'搜索'}]},//大类数据，修改value后面的值
|
||
{name:'访问来源',type:'pie',radius:['40%','55%'],
|
||
label:{formatter:'{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',backgroundColor:'#eee',borderColor:'#aaa',borderWidth:1,borderRadius:4,rich:{a:{color:'#999',lineHeight:22,align:'center'},hr:{borderColor:'#aaa',width:'100%',borderWidth:0.5,height:0},b:{fontSize:16,lineHeight:33},per:{color:'#eee',backgroundColor:'#334455',padding:[2,4],borderRadius:2}}},
|
||
data:[{value:2965,name:'直达'},{value:423,name:'外链'},{value:4072,name:'百度'},{value:187,name:'Google'},{value:35,name:'Bing'}]}]};//各个来源数据，修改value后面的值
|
||
referChart.setOption(refer_option);
|
||
</script
|
||
</main>
|