前言
馬上就到年底了，很多公司都要彙總這一年的經營情況，如果一個系統沒有自動生成年報的功能， 需要人工手工去做年報，我相信可能是一個不小的工作量，最近我通過一個星期的時間，結合系統情況自動生成年報，全部以圖表的形式呈現，為公司SaaS系統增光增色不少。
實現出來效果
圖表主要用的是echarts來實現的，官網地址：https://echarts.apache.org/zh/index.html
全部以圖表+文字進行呈現，讓公司老闆隨時隨刻能看公司的經營情況，省去人工製作的過程 ，節省大量時間，這個年報一推出客戶非常喜歡，給SaaS系統增光增色。
怎麼實現漂亮的圖表
<script type="text/javascript" src="~/showdata/js/jquery.js"></script> <link href="~/YearReport/css/layout.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="~/YearReport/css/report.css" /> <script src="~/YearReport/js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="~/YearReport/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="~/YearReport/js/echarts.min.js"></script> <script type="text/javascript" src="~/YearReport/js/jquery.countup.min.js"></script> <script type="text/javascript" src="~/showdata/js/china.js"></script> <script type="text/javascript" src="~/YearReport/js/area_echarts_year.js"></script>
引入echarts.js這個是百度的圖表外掛，詳情https://echarts.apache.org/zh/index.html
<div class="section section-1"> <div class="title "> <div class="section_content"> <em>年度經營資料總覽</em> <div class="page1_shuju_cont"> <div class="page1_zu"> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalqty"></span>票</strong> <b>累計開單筆數</b> </div> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalfccount"></span>趟</strong> <b>累計發車趟數</b> </div> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalamt"></span>萬元</strong> <b>累計營業額</b> </div> </div> <div class="page1_zu"> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalcost"></span>萬元</strong> <b>累計成本</b> </div> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalprofits"></span>萬元</strong> <b>累計淨利潤</b> </div> <div class="shuju_back"> <strong><span class="ledge count_up_num" id="totalprofitsratio"></span>%</strong> <b>累計淨利潤率</b> </div> </div> </div> </div> </div> </div>
以上為html 程式碼
//年度經營資料總覽 function GetYearReportBigDataBYTotal() { debugger; $.ajax({ url: "/paymentWelfare/GetYearReportBigDataBYTotal", type: "GET", data: { cache: false }, dataType: 'json', cache: false, success: function (result) { if (result.status) { debugger; var options = { useEasing: true, //使用緩和效果 useGrouping: true, //使用分組效果 separator: ',', //分離器，資料夠三位，例如100,000 decimal: '.', //小數點分割，例如：10.00 prefix: '', //第一位預設數字 suffix: '' //最後一位預設數字 }; new CountUp("totalqty", 0, result.totalqty, 0, 3, options).start(); new CountUp("totalfccount", 0, result.totalfccount, 0, 3, options).start(); new CountUp("totalamt", 0, result.totalamt, 2, 3, options).start(); new CountUp("totalcost", 0, result.totalcost, 2, 3, options).start(); new CountUp("totalprofits", 0, result.totalprofits, 2, 3, options).start(); new CountUp("totalprofitsratio", 0, result.totalprofitsratio, 2, 3, options).start(); $("#year").val(result.year); } } }) }
最後出來如下效果
怎麼來做圖表
<div class="section section-2"> <div class="title"> <div class="section_content"> <em>年度營業分析</em> <div class="page2_quxtu"> <div id="echarts_ydzb"> </div> <p><span id="year1"></span>年傳送貨物總票數為<span class="count_up_num" id="totalpiaoshu"> </span>票，貨物總重量為<span class="count_up_num" id="totalweight"> </span>噸，總運費為<span class="count_up_num" id="totalyunfei"> </span>萬元，代收貨款為<span class="count_up_num" id="totaldaishou"> </span>萬元，佔比<span class="count_up_num" id="totaldaishourstio"> </span>%，中轉費為<span class="count_up_num" id="totalzhongzhuan"> </span>萬元，佔比<span class="count_up_num" id="totalzhongzhuanratio"> </span>%，實際送貨費<span class="count_up_num" id="totalsonghuo"> </span>萬元，佔比<span class="count_up_num" id="totalsonghuoratio"> </span>%。</p> </div> </div> </div> </div>
//年度營運分析 function GetYearReportBigDataBYUnit() { var areaStyle = { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(3, 194, 236, 0.3)' }, { offset: 0.8, color: 'rgba(3, 194, 236, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } } $.ajax({ url: "/paymentWelfare/GetYearReportBigDataBYUnit", type: "GET", data: { cache: false }, dataType: 'json', cache: false, success: function (result) { debugger; if (result.status) { debugger; if (result.data.length > 0) { var month = []; var piaoshu = []; var zhongliang = []; var yunfei = []; var daishouhuokuan = []; var zhongzhuanfei = []; var shijisonghuofei = []; var totalpiaoshu = 0; var totalweight = 0; var totalyunfei = 0; var totaldaishou = 0; var totalzhongzhuan = 0; var totalsonghuo = 0; var data = JSON.parse(result.data); for (let i in data) { month.push(data[i].month); piaoshu.push(data[i].piaoshu); zhongliang.push((data[i].zhongliang).toFixed(2)); yunfei.push((data[i].yunfei / 10000).toFixed(2)); daishouhuokuan.push((data[i].daishouhuokuan / 10000).toFixed(2)); zhongzhuanfei.push((data[i].zhongzhuanfei / 10000).toFixed(2)); shijisonghuofei.push((data[i].shijisonghuofei / 10000).toFixed(2)); totalpiaoshu += parseInt(data[i].piaoshu); totalweight += parseFloat(data[i].zhongliang); totalyunfei += parseFloat(data[i].yunfei); totaldaishou += parseFloat(data[i].daishouhuokuan); totalzhongzhuan += parseFloat(data[i].zhongzhuanfei) totalsonghuo += parseFloat(data[i].shijisonghuofei); } debugger; var option_ydzb = { tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: '#6a7985' } } }, legend: { data: ['票數', '重量', '運費', '代收貨款', '中轉費', '實際送貨費'], //selectedMode: 'single', //selected: { // "運費": false, "代收貨款": false, "中轉費": false, "實際送貨費": false, //}, textStyle: { color: "#7c592f", fontSize: 16 }, }, grid: { left: '3%', right: '7%', bottom: '1%', containLabel: true }, xAxis: { axisLabel: { rotate: 0, interval: 0, textStyle: { fontSize: 16, color: '#7c592f' }, formatter: '{value}月', }, //底部分類樣式 axisLine: { lineStyle: { color: '#7c592f', }, fontSize: 16 }, type: 'category', boundaryGap: true, data: month }, //右側資料 Y軸資料 yAxis: [{ name: '票數(票)', type: 'value', axisLine: { lineStyle: { color: '#7c592f' } }, position: 'left', }, { name: '重量(噸)', type: 'value', axisLine: { lineStyle: { color: '#7c592f' } }, position: 'right', }, { name: '金額(萬元)', type: 'value', axisLine: { lineStyle: { color: '#7c592f' } }, position: 'right', offset: 60, }, ], series: [ { name: '票數', type: "line", //areaStyle: { normal: {} }, data: piaoshu, yAxisIndex: 0, areaStyle: areaStyle, }, { name: '重量', type: "line", //areaStyle: { normal: {} }, data: zhongliang, yAxisIndex: 1, areaStyle: areaStyle, }, { name: '運費', type: "line", //areaStyle: { normal: {} }, data: yunfei, yAxisIndex: 2, areaStyle: areaStyle, }, { name: '代收貨款', type: "line", //areaStyle: { normal: {} }, data: daishouhuokuan, yAxisIndex: 2, areaStyle: areaStyle, }, { name: '中轉費', type: "line", //areaStyle: { normal: {} }, data: zhongzhuanfei, yAxisIndex: 2, areaStyle: areaStyle, }, { name: '實際送貨費', type: "line", //areaStyle: { normal: {} }, data: shijisonghuofei, yAxisIndex: 2, areaStyle: areaStyle, } ] }; var echarts_ydzb = echarts.init(document.getElementById('echarts_ydzb')); echarts_ydzb.setOption(option_ydzb); window.addEventListener("resize", function () { echarts_ydzb.resize(); }); var year = $("#year").val(); var options = { useEasing: true, //使用緩和效果 useGrouping: true, //使用分組效果 separator: '', //分離器，資料夠三位，例如100,000 decimal: '.', //小數點分割，例如：10.00 prefix: '', //第一位預設數字 suffix: '' //最後一位預設數字 }; new CountUp("year1", 0, year, 0, 3, options).start(); var options1 = { useEasing: true, //使用緩和效果 useGrouping: true, //使用分組效果 separator: ',', //分離器，資料夠三位，例如100,000 decimal: '.', //小數點分割，例如：10.00 prefix: '', //第一位預設數字 suffix: '' //最後一位預設數字 }; new CountUp("totalpiaoshu", 0, totalpiaoshu, 0, 3, options1).start(); new CountUp("totalweight", 0, (totalweight).toFixed(2), 2, 3, options1).start(); new CountUp("totalyunfei", 0, (totalyunfei / 10000).toFixed(2), 2, 3, options1).start(); new CountUp("totaldaishou", 0, (totaldaishou / 10000).toFixed(2), 2, 3, options1).start(); new CountUp("totaldaishourstio", 0, (totaldaishou / totalyunfei).toFixed(2), 2, 3, options1).start(); new CountUp("totalzhongzhuan", 0, (totalzhongzhuan / 10000).toFixed(2), 2, 3, options1).start(); new CountUp("totalzhongzhuanratio", 0, (totalzhongzhuan / totalyunfei).toFixed(2), 2, 3, options1).start(); new CountUp("totalsonghuo", 0, (totalsonghuo / 10000).toFixed(2), 2, 3, options1).start(); new CountUp("totalsonghuoratio", 0, (totalsonghuo / totalyunfei).toFixed(2), 2, 3, options1).start(); } } }, error: function (XMLHttpRequest, textStatus, errorThrown) { return; }, dataType: "json" }).fail(function (jqXHR, textStatus) { console.log("Ajax Error: ", textStatus); }); }
後臺程式碼如下：
public ActionResult GetYearReportBigDataBYUnit(bool cache = false) { string fileName = "yearData.json"; if (cache == true) { string jsonData = GetData(fileName); if (string.IsNullOrEmpty(jsonData) == false) { return Json(new { status = true, data = jsonData }, JsonRequestBehavior.AllowGet); } } DataTable dt = GetYearReportBigData().Tables[2]; List<yearData> data = new List<yearData> { }; for (int i = 1; i < 13; i++) { DataRow[] dr = dt.Select(string.Format("month='{0}'", i)); if (dr.Length > 0) { data.Add(new yearData { month = dr[0]["month"].ToStr(), piaoshu = dr[0]["piaoshu"].ToInt(), zhongliang = dr[0]["zhongliang"].ToDecimal(), yunfei = dr[0]["yunfei"].ToDecimal(), daishouhuokuan = dr[0]["daishouhuokuan"].ToDecimal(), zhongzhuanfei = dr[0]["zhongzhuanfei"].ToDecimal(), shijisonghuofei = dr[0]["shijisonghuofei"].ToDecimal(), }); } else { data.Add(new yearData { month = i.ToStr(), piaoshu = 0, zhongliang = 0, yunfei = 0, daishouhuokuan = 0, zhongzhuanfei = 0, shijisonghuofei = 0, }); } } string json = data.ToJson(); SaveData(fileName, json); return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet); }
出來的效果如下：
其實要實現圖表的呈現還是非常簡單的事情，多去echarts官網去看看學習，會學到各種各樣漂亮的圖表，大家可以一起學習交流。
下面介紹下怎麼去實現漂亮的中國地圖並且呈現出資料。
<div class="section section-21"> <div class="title"> <div class="section_content"> <em>全國網點分佈圖</em> <div class="page21_quxtu"> <!--柱狀圖位置--> <div id="echarts_map"> </div> <div class="chart44444" id="chart44444"></div> </div> </div> </div> </div>
需要引入js檔案
function map() {
myMapChart = echarts.getInstanceByDom(document.getElementById('echarts_map'));
if (myMapChart == undefined) {
myMapChart = echarts.init(document.getElementById('echarts_map'));
}
myMapChart.showLoading({
text: '正在載入資料.....',
color: '#fff',
textColor: '#fff',
maskColor: '#46b3e6',
zlevel: 0
});
$.ajax({
url: "/paymentWelfare/GetSalaryBigDataBYMap",
type: "GET",
data: { cache: false },
dataType: 'json',
cache: false,
success: function (result) {
if (result.status) {
if (result.data.length > 0) {
debugger;
var data = JSON.parse(result.data);
geoCoordMap = $.extend(geoCoordMap, data);
lightProvince = data.provinceList;
$.ajax({
url: "/paymentWelfare/GetYearReportBigDataBYMapSite",
type: "GET",
data: { cache: false },
dataType: 'json',
cache: false,
success: function (result) {
if (result.status) {
if (result.data.length > 0) {
var data = JSON.parse(result.data);
geoData = data;
seriesData();
$.ajax({
url: "/paymentWelfare/GetProvinceCode",
type: "GET",
dataType: 'json',
success: function (result) {
if (result.status) {
if (result.data.length > 0) {
if (result.data == 'china') {
mapSelected = 'china';
}
else {
mapSelected = py_provinceMap[result.data];
}
loadMap(result.data);
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
},
dataType: "json"
}).fail(function (jqXHR, textStatus) {
console.log("Ajax Error: ", textStatus);
});
window.addEventListener("resize", function () {
myMapChart.resize();
});
var setProvinceCode = function (provinceCode) {
$.ajax({
url: "/paymentWelfare/SetProvinceCode",
type: "GET",
data: { provinceCode: provinceCode },
dataType: 'json',
cache: false,
success: function (result) {
return;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
},
dataType: "json"
}).fail(function (jqXHR, textStatus) {
console.log("Ajax Error: ", textStatus);
});
};
myMapChart.on('click', function (ev) {
if (isProvince(ev.name)) {
mapSelected = ev.name
console.log(mapSelected)
loadMap(provinceMap[ev.name]);
}
else if (isCity(ev.name)) {
mapSelected = ev.name;
loadMap(cityMap[ev.name]);
}
else {
mapSelected = 'china'
loadMap(mapSelected)
}
});
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
},
dataType: "json"
}).fail(function (jqXHR, textStatus) {
console.log("Ajax Error: ", textStatus);
});
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
},
dataType: "json"
}).fail(function (jqXHR, status) {
console.log("Ajax Error: ", status);
});
}
地圖的實現，echarts官網有非常多的介紹，可以多去官網看看。
多個頁面在一個頁面展現出來， 實現的是翻頁的效果。
<ul class="section-btn"> <li class="cur"><a>01</a></li> <li class=""><a>02</a></li> <li class=""><a>03</a></li> <li class=""><a>04</a></li> <li class=""><a>05</a></li> <li class=""><a>06</a></li> <li class=""><a>07</a></li> <li class=""><a>08</a></li> <li class=""><a>09</a></li> <li class=""><a>10</a></li> <li class=""><a>11</a></li> <li class=""><a>12</a></li> <li class=""><a>13</a></li> <li class=""><a>14</a></li> <li class=""><a>15</a></li> <li class=""><a>16</a></li> <li class=""><a>17</a></li> <li class=""><a>18</a></li> <li class=""><a>19</a></li> <li class=""><a>20</a></li> <li class=""><a>21</a></li> <li class=""><a>22</a></li> <li class=""><a>23</a></li> </ul> <div class="go-btn">«</div>
/*===reset===*/ body{ color:#281767; -webkit-text-size-adjust:none; background:#0094ff; } body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe { margin:0; padding:0; } h1,h2,h3,h4,h5,h6 { font-size:100%; } body, button, input, select, textarea { font-family: Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self; font-size: 62.5%; line-height: 1.5; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight: normal; } fieldset,img { border:0; display:inline-block; } address, caption, cite, dfn, em, th, var { font-style: normal; font-weight: normal; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { display: block; margin: 0; padding: 0; } code, kbd, pre, samp { font-family: courier new,courier,monospace } ol,ul{ list-style:none; } a{ text-decoration:none; color:#222; } a:hover{ color:#000; text-decoration: none;zoom:1} a:active{ color:#666; } sup{ vertical-align:text-top; } sub{ vertical-align:text-bottom; } input,select,button{ vertical-align: baseline; *vertical-align:middle; font-family: tahoma, \5b8b\4f53, arial; font-size: 100%; } input[type=checkbox],input[type=radio]{ vertical-align:middle; margin:0 5px; } input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; } textarea { resize: none; } textarea { overflow: auto; font: 100% tahoma,\5b8b\4f53,arial; } table { border-collapse: collapse; border-spacing: 0; } /*===reset end===*/ html,body{ width:100%; height:100%; overflow:hidden; } .section-wrap { width: 100%; height: 100%; overflow: visible; transition: transform 1s cubic-bezier(0.86,0,0.03,1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.86,0,0.03,1); -ms-transition: -ms-transform 1s cubic-bezier(0.86,0,0.03,1); -moz-transition: -moz-transform 1s cubic-bezier(0.86,0,0.03,1); -o-transition: -o-transform 1s cubic-bezier(0.86,0,0.03,1); } .section-wrap .section { position: relative; width: 100%; height: 100vh; background-position: center bottom; background-repeat: no-repeat; } .section-wrap .section .title { font-size: 40px; font-family: "Microsoft YaHei"; } .put-section-0 { transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); } .put-section-1 { transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); } .put-section-2 { transform: translateY(-200%); -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); } .put-section-3 { transform: translateY(-300%); -webkit-transform: translateY(-300%); -ms-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); } .put-section-4 { transform: translateY(-400%); -webkit-transform: translateY(-400%); -ms-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); } .put-section-5 { transform: translateY(-500%); -webkit-transform: translateY(-500%); -ms-transform: translateY(-500%); -moz-transform: translateY(-500%); -o-transform: translateY(-500%); } .put-section-6 { transform: translateY(-600%); -webkit-transform: translateY(-600%); -ms-transform: translateY(-600%); -moz-transform: translateY(-600%); -o-transform: translateY(-600%); } .put-section-7 { transform: translateY(-700%); -webkit-transform: translateY(-700%); -ms-transform: translateY(-700%); -moz-transform: translateY(-700%); -o-transform: translateY(-700%); } .put-section-8 { transform: translateY(-800%); -webkit-transform: translateY(-800%); -ms-transform: translateY(-800%); -moz-transform: translateY(-800%); -o-transform: translateY(-800%); } .put-section-9 { transform: translateY(-900%); -webkit-transform: translateY(-900%); -ms-transform: translateY(-900%); -moz-transform: translateY(-900%); -o-transform: translateY(-900%); } .put-section-10 { transform: translateY(-1000%); -webkit-transform: translateY(-1000%); -ms-transform: translateY(-1000%); -moz-transform: translateY(-1000%); -o-transform: translateY(-1000%); } .put-section-11 { transform: translateY(-1100%); -webkit-transform: translateY(-1100%); -ms-transform: translateY(-1100%); -moz-transform: translateY(-1100%); -o-transform: translateY(-1100%); } .put-section-12 { transform: translateY(-1200%); -webkit-transform: translateY(-1200%); -ms-transform: translateY(-1200%); -moz-transform: translateY(-1200%); -o-transform: translateY(-1200%); } .put-section-13 { transform: translateY(-1300%); -webkit-transform: translateY(-1300%); -ms-transform: translateY(-1300%); -moz-transform: translateY(-1300%); -o-transform: translateY(-1300%); } .put-section-14 { transform: translateY(-1400%); -webkit-transform: translateY(-1400%); -ms-transform: translateY(-1400%); -moz-transform: translateY(-1400%); -o-transform: translateY(-1400%); } .put-section-15 { transform: translateY(-1500%); -webkit-transform: translateY(-1500%); -ms-transform: translateY(-1500%); -moz-transform: translateY(-1500%); -o-transform: translateY(-1500%); } .put-section-16 { transform: translateY(-1600%); -webkit-transform: translateY(-1600%); -ms-transform: translateY(-1600%); -moz-transform: translateY(-1600%); -o-transform: translateY(-1600%); } .put-section-17 { transform: translateY(-1700%); -webkit-transform: translateY(-1700%); -ms-transform: translateY(-1700%); -moz-transform: translateY(-1700%); -o-transform: translateY(-1700%); } .put-section-18 { transform: translateY(-1800%); -webkit-transform: translateY(-1800%); -ms-transform: translateY(-1800%); -moz-transform: translateY(-1800%); -o-transform: translateY(-1800%); } .put-section-19 { transform: translateY(-1900%); -webkit-transform: translateY(-1900%); -ms-transform: translateY(-1900%); -moz-transform: translateY(-1900%); -o-transform: translateY(-1900%); } .put-section-20 { transform: translateY(-2000%); -webkit-transform: translateY(-2000%); -ms-transform: translateY(-2000%); -moz-transform: translateY(-2000%); -o-transform: translateY(-2000%); } .put-section-21 { transform: translateY(-2100%); -webkit-transform: translateY(-2100%); -ms-transform: translateY(-2100%); -moz-transform: translateY(-2100%); -o-transform: translateY(-2100%); } .put-section-22 { transform: translateY(-2200%); -webkit-transform: translateY(-2200%); -ms-transform: translateY(-2200%); -moz-transform: translateY(-2200%); -o-transform: translateY(-2200%); } .put-section-23 { transform: translateY(-2300%); -webkit-transform: translateY(-2300%); -ms-transform: translateY(-2300%); -moz-transform: translateY(-2300%); -o-transform: translateY(-2300%); } .put-section-24 { transform: translateY(-2400%); -webkit-transform: translateY(-2400%); -ms-transform: translateY(-2400%); -moz-transform: translateY(-2400%); -o-transform: translateY(-2400%); } /*點*/ /*.section-btn { position: fixed; right: 35px; top: 5%; width: 14px; } .section-btn li { margin-bottom: 12px; background: rgba(255,255,255,0.4); text-align: center; width: 18px; height: 18px; color: #fff; cursor: pointer; border-radius: 50%; } .section-btn li.cur { background: #ffffff; }*/ .section-btn{height: 600px;overflow: hidden;position: fixed;right:6px;top:40%;margin-top: -204px;font-size:12px;} .section-btn li{color: #fff;background:url("../images/page1.png") no-repeat;background-size:100% 100%;width: 23px;height: 23px;text-align: center;margin-bottom: 2px;line-height: 23px;} .section-btn li a{color: #fff;font-family: "Arial";} .section-btn .cur{background:url("../images/page2.png") no-repeat;background-size:100% 100%;} .section-btn .cur a{color:#00024d;} .section-btn li:hover{background:url("../images/page2.png") no-repeat;background-size:100% 100%;} .section-btn li:hover a{color:#00024d;} /*底部箭頭*/ .go-btn { opacity: 1; webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite; -webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite; -ms-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite; -moz-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite; -o-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); position: absolute; bottom: 10px; left: 48%; width: 40px; height: 40px; border-radius: 100%; line-height: 40px; text-align: center; font-size: 20px; color: #e8a728; border: 1px solid #e8a728; cursor: pointer; overflow: hidden } .go-btn:hover { animation-play-state: paused; -webkit-animation-play-state: paused; -ms-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; } @keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } } @-webkit-keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } } @-ms-keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } } @-moz-keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } } @-o-keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } } @-o-keyframes go-btn { %0,%100 { bottom: 10px; opacity: 1; } 50% { bottom: 50px; opacity: .5 } }
結束語
以上簡單介紹了用到的技術和實現方式，供大家學習交流，我相信很多系統還是需要年報的功能，這樣能給系統帶來非常多的亮點，讓系統有更大的賣點。