前言

马上就到年底了，很多公司都要汇总这一年的经营情况，如果一个系统没有自动生成年报的功能， 需要人工手工去做年报，我相信可能是一个不小的工作量，最近我通过一个星期的时间，结合系统情况自动生成年报，全部以图表的形式呈现，为公司SaaS系统增光增色不少。

实现出来效果

图表主要用的是echarts来实现的，官网地址：https://echarts.apache.org/zh/index.html

全部以图表+文字进行呈现，让公司老板随时随刻能看公司的经营情况，省去人工制作的过程 ，节省大量时间，这个年报一推出客户非常喜欢，给SaaS系统增光增色。

怎么实现漂亮的图表

  1.     <script type="text/javascript" src="~/showdata/js/jquery.js"></script>
  2.     <link href="~/YearReport/css/layout.css" type="text/css" rel="stylesheet" />
  3.     <link rel="stylesheet" href="~/YearReport/css/report.css" />
  4.     <script src="~/YearReport/js/jquery.min.js" type="text/javascript"></script>
  5.     <script type="text/javascript" src="~/YearReport/js/jquery.mousewheel.js"></script>
  6.     <script type="text/javascript" src="~/YearReport/js/echarts.min.js"></script>
  7.     <script type="text/javascript" src="~/YearReport/js/jquery.countup.min.js"></script>
  8.  
  9.     <script type="text/javascript" src="~/showdata/js/china.js"></script>
  10.     <script type="text/javascript" src="~/YearReport/js/area_echarts_year.js"></script>

引入echarts.js这个是百度的图表插件，详情https://echarts.apache.org/zh/index.html

  1.     <div class="section section-1">
  2.             <div class="title ">
  3.                 <div class="section_content">
  4.                     <em>年度经营数据总览</em>
  5.                     <div class="page1_shuju_cont">
  6.                         <div class="page1_zu">
  7.                             <div class="shuju_back">
  8.                                 <strong><span class="ledge count_up_num" id="totalqty"></span>票</strong>
  9.                                 <b>累计开单笔数</b>
  10.                             </div>
  11.  
  12.                             <div class="shuju_back">
  13.                                 <strong><span class="ledge count_up_num" id="totalfccount"></span>趟</strong>
  14.                                 <b>累计发车趟数</b>
  15.                             </div>
  16.                             <div class="shuju_back">
  17.                                 <strong><span class="ledge count_up_num" id="totalamt"></span>万元</strong>
  18.                                 <b>累计营业额</b>
  19.                             </div>
  20.  
  21.                         </div>
  22.                         <div class="page1_zu">
  23.                             <div class="shuju_back">
  24.                                 <strong><span class="ledge count_up_num" id="totalcost"></span>万元</strong>
  25.                                 <b>累计成本</b>
  26.                             </div>
  27.  
  28.                             <div class="shuju_back">
  29.                                 <strong><span class="ledge count_up_num" id="totalprofits"></span>万元</strong>
  30.                                 <b>累计净利润</b>
  31.                             </div>
  32.  
  33.                             <div class="shuju_back">
  34.                                 <strong><span class="ledge count_up_num" id="totalprofitsratio"></span>%</strong>
  35.                                 <b>累计净利润率</b>
  36.                             </div>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         </div>

以上为html 代码

  1.     //年度经营数据总览
  2.     function GetYearReportBigDataBYTotal() {
  3.         debugger;
  4.         $.ajax({
  5.             url: "/paymentWelfare/GetYearReportBigDataBYTotal",
  6.             type: "GET",
  7.             data: {
  8.                 cache: false
  9.             },
  10.             dataType: 'json',
  11.             cache: false,
  12.             success: function (result) {
  13.                 if (result.status) {
  14.                     debugger;
  15.                     var options = {
  16.                         useEasing: true, //使用缓和效果
  17.                         useGrouping: true, //使用分组效果
  18.                         separator: ',', //分离器，数据够三位，例如100,000
  19.                         decimal: '.', //小数点分割，例如：10.00
  20.                         prefix: '', //第一位默认数字
  21.                         suffix: '' //最后一位默认数字
  22.                     };
  23.                     new CountUp("totalqty", 0, result.totalqty, 0, 3, options).start();
  24.                     new CountUp("totalfccount", 0, result.totalfccount, 0, 3, options).start();
  25.                     new CountUp("totalamt", 0, result.totalamt, 2, 3, options).start();
  26.                     new CountUp("totalcost", 0, result.totalcost, 2, 3, options).start();
  27.                     new CountUp("totalprofits", 0, result.totalprofits, 2, 3, options).start();
  28.                     new CountUp("totalprofitsratio", 0, result.totalprofitsratio, 2, 3, options).start();
  29.                     $("#year").val(result.year);
  30.                 }
  31.             }
  32.         })
  33.     }

最后出来如下效果

怎么来做图表

  1.   <div class="section section-2">
  2.             <div class="title">
  3.                 <div class="section_content">
  4.                     <em>年度营业分析</em>
  5.                     <div class="page2_quxtu">
  6.                         <div id="echarts_ydzb"> </div>
  7.                         <p><span id="year1"></span>年发送货物总票数为<span class="count_up_num" id="totalpiaoshu">
  8.                             </span>票，货物总重量为<span class="count_up_num" id="totalweight">
  9.                             </span>吨，总运费为<span class="count_up_num" id="totalyunfei">
  10.                             </span>万元，代收货款为<span class="count_up_num" id="totaldaishou">
  11.                             </span>万元，占比<span class="count_up_num" id="totaldaishourstio">
  12.                             </span>%，中转费为<span class="count_up_num" id="totalzhongzhuan">
  13.                             </span>万元，占比<span class="count_up_num" id="totalzhongzhuanratio">
  14.                             </span>%，实际送货费<span class="count_up_num" id="totalsonghuo">
  15.                             </span>万元，占比<span class="count_up_num" id="totalsonghuoratio">
  16.                             </span>%。</p>
  17.                     </div>
  18.                 </div>
  19.             </div>
  20.         </div>

  1.  //年度营运分析
  2.     function GetYearReportBigDataBYUnit() {
  3.         var areaStyle = {
  4.             normal: {
  5.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  6.                     offset: 0,
  7.                     color: 'rgba(3, 194, 236, 0.3)'
  8.                 }, {
  9.                     offset: 0.8,
  10.                     color: 'rgba(3, 194, 236, 0)'
  11.                 }], false),
  12.                 shadowColor: 'rgba(0, 0, 0, 0.1)',
  13.                 shadowBlur: 10
  14.             }
  15.         }
  16.  
  17.         $.ajax({
  18.             url: "/paymentWelfare/GetYearReportBigDataBYUnit",
  19.             type: "GET",
  20.             data: { cache: false },
  21.             dataType: 'json',
  22.             cache: false,
  23.             success: function (result) {
  24.                 debugger;
  25.                 if (result.status) {
  26.                     debugger;
  27.                     if (result.data.length > 0) {
  28.  
  29.                         var month = [];
  30.                         var piaoshu = [];
  31.                         var zhongliang = [];
  32.                         var yunfei = [];
  33.                         var daishouhuokuan = [];
  34.                         var zhongzhuanfei = [];
  35.                         var shijisonghuofei = [];
  36.  
  37.                         var totalpiaoshu = 0;
  38.                         var totalweight = 0;
  39.                         var totalyunfei = 0;
  40.                         var totaldaishou = 0;
  41.                         var totalzhongzhuan = 0;
  42.                         var totalsonghuo = 0;
  43.  
  44.                         var data = JSON.parse(result.data);
  45.                         for (let i in data) {
  46.                             month.push(data[i].month);
  47.                             piaoshu.push(data[i].piaoshu);
  48.                             zhongliang.push((data[i].zhongliang).toFixed(2));
  49.                             yunfei.push((data[i].yunfei / 10000).toFixed(2));
  50.                             daishouhuokuan.push((data[i].daishouhuokuan / 10000).toFixed(2));
  51.                             zhongzhuanfei.push((data[i].zhongzhuanfei / 10000).toFixed(2));
  52.                             shijisonghuofei.push((data[i].shijisonghuofei / 10000).toFixed(2));
  53.  
  54.                             totalpiaoshu += parseInt(data[i].piaoshu);
  55.                             totalweight += parseFloat(data[i].zhongliang);
  56.                             totalyunfei += parseFloat(data[i].yunfei);
  57.                             totaldaishou += parseFloat(data[i].daishouhuokuan);
  58.                             totalzhongzhuan += parseFloat(data[i].zhongzhuanfei)
  59.                             totalsonghuo += parseFloat(data[i].shijisonghuofei);
  60.                         }
  61.  
  62.                         debugger;
  63.                         var option_ydzb = {
  64.                             tooltip: {
  65.                                 trigger: "axis",
  66.                                 axisPointer: {
  67.                                     type: "cross",
  68.                                     label: {
  69.                                         backgroundColor: '#6a7985'
  70.                                     }
  71.                                 }
  72.                             },
  73.                             legend: {
  74.                                 data: ['票数', '重量', '运费', '代收货款', '中转费', '实际送货费'],
  75.                                 //selectedMode: 'single',
  76.                                 //selected: {
  77.                                 //    "运费": false, "代收货款": false, "中转费": false, "实际送货费": false,
  78.                                 //},
  79.                                 textStyle: {
  80.                                     color: "#7c592f",
  81.                                     fontSize: 16
  82.                                 },
  83.                             },
  84.                             grid: {
  85.                                 left: '3%',
  86.                                 right: '7%',
  87.                                 bottom: '1%',
  88.                                 containLabel: true
  89.                             },
  90.                             xAxis: {
  91.                                 axisLabel: {
  92.                                     rotate: 0,
  93.                                     interval: 0,
  94.                                     textStyle: { fontSize: 16, color: '#7c592f' },
  95.                                     formatter: '{value}月',
  96.                                 },
  97.                                 //底部分类样式
  98.                                 axisLine: {
  99.                                     lineStyle: {
  100.                                         color: '#7c592f',
  101.                                     },
  102.                                     fontSize: 16
  103.                                 },
  104.                                 type: 'category',
  105.                                 boundaryGap: true,
  106.                                 data: month
  107.                             },
  108.                             //右侧数据 Y轴数据
  109.                             yAxis: [{
  110.                                 name: '票数(票)',
  111.                                 type: 'value',
  112.                                 axisLine: {
  113.                                     lineStyle: {
  114.                                         color: '#7c592f'
  115.                                     }
  116.                                 },
  117.                                 position: 'left',
  118.                             },
  119.                             {
  120.                                 name: '重量(吨)',
  121.                                 type: 'value',
  122.                                 axisLine: {
  123.                                     lineStyle: {
  124.                                         color: '#7c592f'
  125.                                     }
  126.                                 },
  127.                                 position: 'right',
  128.  
  129.                             },
  130.                             {
  131.                                 name: '金额(万元)',
  132.                                 type: 'value',
  133.                                 axisLine: {
  134.                                     lineStyle: {
  135.                                         color: '#7c592f'
  136.                                     }
  137.                                 },
  138.                                 position: 'right',
  139.                                 offset: 60,
  140.                             },
  141.                             ],
  142.                             series: [
  143.                                 {
  144.                                     name: '票数',
  145.                                     type: "line",
  146.                                     //areaStyle: { normal: {} },
  147.                                     data: piaoshu,
  148.                                     yAxisIndex: 0,
  149.                                     areaStyle: areaStyle,
  150.                                 }, {
  151.                                     name: '重量',
  152.                                     type: "line",
  153.                                     //areaStyle: { normal: {} },
  154.                                     data: zhongliang,
  155.                                     yAxisIndex: 1,
  156.                                     areaStyle: areaStyle,
  157.                                 }, {
  158.                                     name: '运费',
  159.                                     type: "line",
  160.                                     //areaStyle: { normal: {} },
  161.                                     data: yunfei,
  162.                                     yAxisIndex: 2,
  163.                                     areaStyle: areaStyle,
  164.                                 }, {
  165.                                     name: '代收货款',
  166.                                     type: "line",
  167.                                     //areaStyle: { normal: {} },
  168.                                     data: daishouhuokuan,
  169.                                     yAxisIndex: 2,
  170.                                     areaStyle: areaStyle,
  171.                                 }, {
  172.                                     name: '中转费',
  173.                                     type: "line",
  174.                                     //areaStyle: { normal: {} },
  175.                                     data: zhongzhuanfei,
  176.                                     yAxisIndex: 2,
  177.                                     areaStyle: areaStyle,
  178.                                 }, {
  179.                                     name: '实际送货费',
  180.                                     type: "line",
  181.                                     //areaStyle: { normal: {} },
  182.                                     data: shijisonghuofei,
  183.                                     yAxisIndex: 2,
  184.                                     areaStyle: areaStyle,
  185.                                 }
  186.                             ]
  187.                         };
  188.                         var echarts_ydzb = echarts.init(document.getElementById('echarts_ydzb'));
  189.                         echarts_ydzb.setOption(option_ydzb);
  190.  
  191.                         window.addEventListener("resize", function () {
  192.                             echarts_ydzb.resize();
  193.                         });
  194.  
  195.                         var year = $("#year").val();
  196.                         var options = {
  197.                             useEasing: true, //使用缓和效果
  198.                             useGrouping: true, //使用分组效果
  199.                             separator: '', //分离器，数据够三位，例如100,000
  200.                             decimal: '.', //小数点分割，例如：10.00
  201.                             prefix: '', //第一位默认数字
  202.                             suffix: '' //最后一位默认数字
  203.                         };
  204.  
  205.                         new CountUp("year1", 0, year, 0, 3, options).start();
  206.  
  207.                         var options1 = {
  208.                             useEasing: true, //使用缓和效果
  209.                             useGrouping: true, //使用分组效果
  210.                             separator: ',', //分离器，数据够三位，例如100,000
  211.                             decimal: '.', //小数点分割，例如：10.00
  212.                             prefix: '', //第一位默认数字
  213.                             suffix: '' //最后一位默认数字
  214.                         };
  215.                         new CountUp("totalpiaoshu", 0, totalpiaoshu, 0, 3, options1).start();
  216.                         new CountUp("totalweight", 0, (totalweight).toFixed(2), 2, 3, options1).start();
  217.                         new CountUp("totalyunfei", 0, (totalyunfei / 10000).toFixed(2), 2, 3, options1).start();
  218.                         new CountUp("totaldaishou", 0, (totaldaishou / 10000).toFixed(2), 2, 3, options1).start();
  219.                         new CountUp("totaldaishourstio", 0, (totaldaishou / totalyunfei).toFixed(2), 2, 3, options1).start();
  220.                         new CountUp("totalzhongzhuan", 0, (totalzhongzhuan / 10000).toFixed(2), 2, 3, options1).start();
  221.                         new CountUp("totalzhongzhuanratio", 0, (totalzhongzhuan / totalyunfei).toFixed(2), 2, 3, options1).start();
  222.                         new CountUp("totalsonghuo", 0, (totalsonghuo / 10000).toFixed(2), 2, 3, options1).start();
  223.                         new CountUp("totalsonghuoratio", 0, (totalsonghuo / totalyunfei).toFixed(2), 2, 3, options1).start();
  224.                     }
  225.                 }
  226.             },
  227.             error: function (XMLHttpRequest, textStatus, errorThrown) {
  228.                 return;
  229.             },
  230.             dataType: "json"
  231.         }).fail(function (jqXHR, textStatus) {
  232.             console.log("Ajax Error: ", textStatus);
  233.         });
  234.     }

后台代码如下：

  1.  public ActionResult GetYearReportBigDataBYUnit(bool cache = false)
  2.         {
  3.             string fileName = "yearData.json";
  4.  
  5.             if (cache == true)
  6.             {
  7.                 string jsonData = GetData(fileName);
  8.                 if (string.IsNullOrEmpty(jsonData) == false)
  9.                 {
  10.                     return Json(new { status = true, data = jsonData }, JsonRequestBehavior.AllowGet);
  11.                 }
  12.             }
  13.  
  14.             DataTable dt = GetYearReportBigData().Tables[2];
  15.  
  16.             List<yearData> data = new List<yearData> { };
  17.             for (int i = 1; i < 13; i++)
  18.             {
  19.                 DataRow[] dr = dt.Select(string.Format("month='{0}'", i));
  20.  
  21.                 if (dr.Length > 0)
  22.                 {
  23.                     data.Add(new yearData
  24.                     {
  25.                         month = dr[0]["month"].ToStr(),
  26.                         piaoshu = dr[0]["piaoshu"].ToInt(),
  27.                         zhongliang = dr[0]["zhongliang"].ToDecimal(),
  28.                         yunfei = dr[0]["yunfei"].ToDecimal(),
  29.                         daishouhuokuan = dr[0]["daishouhuokuan"].ToDecimal(),
  30.                         zhongzhuanfei = dr[0]["zhongzhuanfei"].ToDecimal(),
  31.                         shijisonghuofei = dr[0]["shijisonghuofei"].ToDecimal(),
  32.                     });
  33.                 }
  34.                 else
  35.                 {
  36.                     data.Add(new yearData
  37.                     {
  38.                         month = i.ToStr(),
  39.                         piaoshu = 0,
  40.                         zhongliang = 0,
  41.                         yunfei = 0,
  42.                         daishouhuokuan = 0,
  43.                         zhongzhuanfei = 0,
  44.                         shijisonghuofei = 0,
  45.                     });
  46.                 }
  47.             }
  48.             string json = data.ToJson();
  49.             SaveData(fileName, json);
  50.  
  51.             return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);
  52.         }

出来的效果如下：

其实要实现图表的呈现还是非常简单的事情，多去echarts官网去看看学习，会学到各种各样漂亮的图表，大家可以一起学习交流。

下面介绍下怎么去实现漂亮的中国地图并且呈现出数据。

  1.        <div class="section section-21">
  2.             <div class="title">
  3.                 <div class="section_content">
  4.                     <em>全国网点分布图</em>
  5.                     <div class="page21_quxtu">
  6.                         <!--柱状图位置-->
  7.                         <div id="echarts_map">  
  8.  
  9.                         </div>
  10.                         <div class="chart44444" id="chart44444"></div>
  11.                     </div>
  12.                 </div>
  13.             </div>
  14.         </div>

需要引入js文件

  1. function map() {
  2.     myMapChart = echarts.getInstanceByDom(document.getElementById('echarts_map'));
  3.     if (myMapChart == undefined) {
  4.         myMapChart = echarts.init(document.getElementById('echarts_map'));
  5.     }
  6.  
  7.     myMapChart.showLoading({
  8.         text: '正在加载数据.....',
  9.         color: '#fff',
  10.         textColor: '#fff',
  11.         maskColor: '#46b3e6',
  12.         zlevel: 0
  13.     });
  14.  
  15.     $.ajax({
  16.         url: "/paymentWelfare/GetSalaryBigDataBYMap",
  17.         type: "GET",
  18.         data: { cache: false },
  19.         dataType: 'json',
  20.         cache: false,
  21.         success: function (result) {
  22.             if (result.status) {
  23.                 if (result.data.length > 0) {
  24.                     debugger;
  25.                     var data = JSON.parse(result.data);
  26.                     geoCoordMap = $.extend(geoCoordMap, data);
  27.                     lightProvince = data.provinceList;
  28.  
  29.                     $.ajax({
  30.                         url: "/paymentWelfare/GetYearReportBigDataBYMapSite",
  31.                         type: "GET",
  32.                         data: { cache: false },
  33.                         dataType: 'json',
  34.                         cache: false,
  35.                         success: function (result) {
  36.                             if (result.status) {
  37.                                 if (result.data.length > 0) {
  38.  
  39.                                     var data = JSON.parse(result.data);
  40.                                     geoData = data;
  41.  
  42.                                     seriesData();
  43.  
  44.                                     $.ajax({
  45.                                         url: "/paymentWelfare/GetProvinceCode",
  46.                                         type: "GET",
  47.                                         dataType: 'json',
  48.                                         success: function (result) {
  49.                                             if (result.status) {
  50.                                                 if (result.data.length > 0) {
  51.                                                     if (result.data == 'china') {
  52.                                                         mapSelected = 'china';
  53.                                                     }
  54.                                                     else {
  55.                                                         mapSelected = py_provinceMap[result.data];
  56.                                                     }
  57.                                                     loadMap(result.data);
  58.                                                 }
  59.                                             }
  60.                                         },
  61.                                         error: function (XMLHttpRequest, textStatus, errorThrown) {
  62.                                             return;
  63.                                         },
  64.                                         dataType: "json"
  65.                                     }).fail(function (jqXHR, textStatus) {
  66.                                         console.log("Ajax Error: ", textStatus);
  67.                                     });
  68.  
  69.                                     window.addEventListener("resize", function () {
  70.                                         myMapChart.resize();
  71.                                     });
  72.  
  73.                                     var setProvinceCode = function (provinceCode) {
  74.                                         $.ajax({
  75.                                             url: "/paymentWelfare/SetProvinceCode",
  76.                                             type: "GET",
  77.                                             data: { provinceCode: provinceCode },
  78.                                             dataType: 'json',
  79.                                             cache: false,
  80.                                             success: function (result) {
  81.                                                 return;
  82.                                             },
  83.                                             error: function (XMLHttpRequest, textStatus, errorThrown) {
  84.                                                 return;
  85.                                             },
  86.                                             dataType: "json"
  87.                                         }).fail(function (jqXHR, textStatus) {
  88.                                             console.log("Ajax Error: ", textStatus);
  89.                                         });
  90.                                     };
  91.  
  92.                                     myMapChart.on('click', function (ev) {
  93.                                         if (isProvince(ev.name)) {
  94.                                             mapSelected = ev.name
  95.                                             console.log(mapSelected)
  96.                                             loadMap(provinceMap[ev.name]);
  97.                                         }
  98.                                         else if (isCity(ev.name)) {
  99.                                             mapSelected = ev.name;
  100.                                             loadMap(cityMap[ev.name]);
  101.                                         }
  102.                                         else {
  103.                                             mapSelected = 'china'
  104.                                             loadMap(mapSelected)
  105.                                         }
  106.                                     });
  107.                                 }
  108.                             }
  109.                         },
  110.                         error: function (XMLHttpRequest, textStatus, errorThrown) {
  111.                             return;
  112.                         },
  113.                         dataType: "json"
  114.                     }).fail(function (jqXHR, textStatus) {
  115.                         console.log("Ajax Error: ", textStatus);
  116.                         });
  117.                 }
  118.             }
  119.         },
  120.         error: function (XMLHttpRequest, textStatus, errorThrown) {
  121.             return;
  122.         },
  123.         dataType: "json"
  124.     }).fail(function (jqXHR, status) {
  125.         console.log("Ajax Error: ", status);
  126.     });
  127. }

地图的实现，echarts官网有非常多的介绍，可以多去官网看看。

多个页面在一个页面展现出来， 实现的是翻页的效果。

  1.   <ul class="section-btn">
  2.         <li class="cur"><a>01</a></li>
  3.         <li class=""><a>02</a></li>
  4.         <li class=""><a>03</a></li>
  5.         <li class=""><a>04</a></li>
  6.         <li class=""><a>05</a></li>
  7.         <li class=""><a>06</a></li>
  8.         <li class=""><a>07</a></li>
  9.         <li class=""><a>08</a></li>
  10.         <li class=""><a>09</a></li>
  11.         <li class=""><a>10</a></li>
  12.         <li class=""><a>11</a></li>
  13.         <li class=""><a>12</a></li>
  14.         <li class=""><a>13</a></li>
  15.         <li class=""><a>14</a></li>
  16.         <li class=""><a>15</a></li>
  17.         <li class=""><a>16</a></li>
  18.         <li class=""><a>17</a></li>
  19.         <li class=""><a>18</a></li>
  20.         <li class=""><a>19</a></li>
  21.         <li class=""><a>20</a></li>
  22.         <li class=""><a>21</a></li>
  23.         <li class=""><a>22</a></li>
  24.         <li class=""><a>23</a></li>
  25.     </ul>
  26.     <div class="go-btn">&laquo;</div>
  1. /*===reset===*/
  2. body{
  3.     color:#281767;
  4.     -webkit-text-size-adjust:none;
  5.     background:#0094ff;
  6.  
  7. }
  8. 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
  9. {
  10.     margin:0;
  11.     padding:0;
  12.  
  13. }
  14. h1,h2,h3,h4,h5,h6
  15. {
  16.     font-size:100%;
  17. }
  18. body, button, input, select, textarea
  19. {
  20.     font-family: Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
  21.     font-size: 62.5%;
  22.     line-height: 1.5;
  23. }
  24. h1,h2,h3,h4,h5,h6
  25. {
  26.     font-size:100%;
  27.     font-weight: normal;
  28. }
  29. fieldset,img
  30. {
  31.     border:0;
  32.     display:inline-block;
  33. }
  34. address, caption, cite, dfn, em, th, var {
  35.     font-style: normal;
  36.     font-weight: normal;
  37. }
  38. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  39.     display: block;
  40.     margin: 0;
  41.     padding: 0;
  42. }
  43. code, kbd, pre, samp {
  44.     font-family: courier new,courier,monospace
  45. }
  46. ol,ul{
  47.     list-style:none;
  48. }
  49. a{
  50.     text-decoration:none;
  51.     color:#222;
  52. }
  53. a:hover{
  54.     color:#000;
  55.     text-decoration: none;zoom:1}
  56. a:active{
  57.     color:#666;
  58. }
  59. sup{
  60.     vertical-align:text-top;
  61. }
  62. sub{
  63.     vertical-align:text-bottom;
  64. }
  65. input,select,button{
  66.     vertical-align: baseline;
  67.     *vertical-align:middle;
  68.     font-family: tahoma, \5b8b\4f53, arial;
  69.     font-size: 100%;
  70. }
  71. input[type=checkbox],input[type=radio]{
  72.     vertical-align:middle;
  73.     margin:0 5px;
  74. }
  75.     input[type="text"], input[type="password"], textarea {
  76.         outline-style: none;
  77.         -webkit-appearance: none;
  78.     }
  79. textarea {
  80.     resize: none;
  81. }
  82. textarea {
  83.     overflow: auto;
  84.     font: 100% tahoma,\5b8b\4f53,arial;
  85. }
  86. table {
  87.     border-collapse: collapse;
  88.     border-spacing: 0;
  89. }
  90. /*===reset end===*/
  91.  
  92. html,body{
  93.     width:100%;
  94.     height:100%;
  95.     overflow:hidden;
  96. }
  97. .section-wrap {
  98.     width: 100%;
  99.     height: 100%;
  100.     overflow: visible;
  101.     transition: transform 1s cubic-bezier(0.86,0,0.03,1);
  102.     -webkit-transition: -webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
  103.     -ms-transition: -ms-transform 1s cubic-bezier(0.86,0,0.03,1);
  104.     -moz-transition: -moz-transform 1s cubic-bezier(0.86,0,0.03,1);
  105.     -o-transition: -o-transform 1s cubic-bezier(0.86,0,0.03,1);
  106. }
  107.  
  108.     .section-wrap .section {
  109.         position: relative;
  110.         width: 100%;
  111.         height: 100vh;
  112.         background-position: center bottom;
  113.         background-repeat: no-repeat;
  114.     }
  115.         .section-wrap .section .title {
  116.             font-size: 40px;
  117.             font-family: "Microsoft YaHei";
  118.         }
  119.  
  120. .put-section-0 {
  121.     transform: translateY(0);
  122.     -webkit-transform: translateY(0);
  123.     -ms-transform: translateY(0);
  124.     -moz-transform: translateY(0);
  125.     -o-transform: translateY(0);
  126. }
  127. .put-section-1 {
  128.     transform: translateY(-100%);
  129.     -webkit-transform: translateY(-100%);
  130.     -ms-transform: translateY(-100%);
  131.     -moz-transform: translateY(-100%);
  132.     -o-transform: translateY(-100%);
  133. }
  134. .put-section-2 {
  135.     transform: translateY(-200%);
  136.     -webkit-transform: translateY(-200%);
  137.     -ms-transform: translateY(-200%);
  138.     -moz-transform: translateY(-200%);
  139.     -o-transform: translateY(-200%);
  140. }
  141. .put-section-3 {
  142.     transform: translateY(-300%);
  143.     -webkit-transform: translateY(-300%);
  144.     -ms-transform: translateY(-300%);
  145.     -moz-transform: translateY(-300%);
  146.     -o-transform: translateY(-300%);
  147. }
  148. .put-section-4 {
  149.     transform: translateY(-400%);
  150.     -webkit-transform: translateY(-400%);
  151.     -ms-transform: translateY(-400%);
  152.     -moz-transform: translateY(-400%);
  153.     -o-transform: translateY(-400%);
  154. }
  155. .put-section-5 {
  156.     transform: translateY(-500%);
  157.     -webkit-transform: translateY(-500%);
  158.     -ms-transform: translateY(-500%);
  159.     -moz-transform: translateY(-500%);
  160.     -o-transform: translateY(-500%);
  161. }
  162. .put-section-6 {
  163.     transform: translateY(-600%);
  164.     -webkit-transform: translateY(-600%);
  165.     -ms-transform: translateY(-600%);
  166.     -moz-transform: translateY(-600%);
  167.     -o-transform: translateY(-600%);
  168. }
  169. .put-section-7 {
  170.     transform: translateY(-700%);
  171.     -webkit-transform: translateY(-700%);
  172.     -ms-transform: translateY(-700%);
  173.     -moz-transform: translateY(-700%);
  174.     -o-transform: translateY(-700%);
  175. }
  176. .put-section-8 {
  177.     transform: translateY(-800%);
  178.     -webkit-transform: translateY(-800%);
  179.     -ms-transform: translateY(-800%);
  180.     -moz-transform: translateY(-800%);
  181.     -o-transform: translateY(-800%);
  182. }
  183. .put-section-9 {
  184.     transform: translateY(-900%);
  185.     -webkit-transform: translateY(-900%);
  186.     -ms-transform: translateY(-900%);
  187.     -moz-transform: translateY(-900%);
  188.     -o-transform: translateY(-900%);
  189. }
  190. .put-section-10 {
  191.     transform: translateY(-1000%);
  192.     -webkit-transform: translateY(-1000%);
  193.     -ms-transform: translateY(-1000%);
  194.     -moz-transform: translateY(-1000%);
  195.     -o-transform: translateY(-1000%);
  196. }
  197. .put-section-11 {
  198.     transform: translateY(-1100%);
  199.     -webkit-transform: translateY(-1100%);
  200.     -ms-transform: translateY(-1100%);
  201.     -moz-transform: translateY(-1100%);
  202.     -o-transform: translateY(-1100%);
  203. }
  204. .put-section-12 {
  205.     transform: translateY(-1200%);
  206.     -webkit-transform: translateY(-1200%);
  207.     -ms-transform: translateY(-1200%);
  208.     -moz-transform: translateY(-1200%);
  209.     -o-transform: translateY(-1200%);
  210. }
  211. .put-section-13 {
  212.     transform: translateY(-1300%);
  213.     -webkit-transform: translateY(-1300%);
  214.     -ms-transform: translateY(-1300%);
  215.     -moz-transform: translateY(-1300%);
  216.     -o-transform: translateY(-1300%);
  217. }
  218. .put-section-14 {
  219.     transform: translateY(-1400%);
  220.     -webkit-transform: translateY(-1400%);
  221.     -ms-transform: translateY(-1400%);
  222.     -moz-transform: translateY(-1400%);
  223.     -o-transform: translateY(-1400%);
  224. }
  225. .put-section-15 {
  226.     transform: translateY(-1500%);
  227.     -webkit-transform: translateY(-1500%);
  228.     -ms-transform: translateY(-1500%);
  229.     -moz-transform: translateY(-1500%);
  230.     -o-transform: translateY(-1500%);
  231. }
  232. .put-section-16 {
  233.     transform: translateY(-1600%);
  234.     -webkit-transform: translateY(-1600%);
  235.     -ms-transform: translateY(-1600%);
  236.     -moz-transform: translateY(-1600%);
  237.     -o-transform: translateY(-1600%);
  238. }
  239. .put-section-17 {
  240.     transform: translateY(-1700%);
  241.     -webkit-transform: translateY(-1700%);
  242.     -ms-transform: translateY(-1700%);
  243.     -moz-transform: translateY(-1700%);
  244.     -o-transform: translateY(-1700%);
  245. }
  246. .put-section-18 {
  247.     transform: translateY(-1800%);
  248.     -webkit-transform: translateY(-1800%);
  249.     -ms-transform: translateY(-1800%);
  250.     -moz-transform: translateY(-1800%);
  251.     -o-transform: translateY(-1800%);
  252. }
  253.  
  254. .put-section-19 {
  255.     transform: translateY(-1900%);
  256.     -webkit-transform: translateY(-1900%);
  257.     -ms-transform: translateY(-1900%);
  258.     -moz-transform: translateY(-1900%);
  259.     -o-transform: translateY(-1900%);
  260. }
  261.  
  262. .put-section-20 {
  263.     transform: translateY(-2000%);
  264.     -webkit-transform: translateY(-2000%);
  265.     -ms-transform: translateY(-2000%);
  266.     -moz-transform: translateY(-2000%);
  267.     -o-transform: translateY(-2000%);
  268. }
  269.  
  270. .put-section-21 {
  271.     transform: translateY(-2100%);
  272.     -webkit-transform: translateY(-2100%);
  273.     -ms-transform: translateY(-2100%);
  274.     -moz-transform: translateY(-2100%);
  275.     -o-transform: translateY(-2100%);
  276. }
  277.  
  278. .put-section-22 {
  279.     transform: translateY(-2200%);
  280.     -webkit-transform: translateY(-2200%);
  281.     -ms-transform: translateY(-2200%);
  282.     -moz-transform: translateY(-2200%);
  283.     -o-transform: translateY(-2200%);
  284. }
  285.  
  286. .put-section-23 {
  287.     transform: translateY(-2300%);
  288.     -webkit-transform: translateY(-2300%);
  289.     -ms-transform: translateY(-2300%);
  290.     -moz-transform: translateY(-2300%);
  291.     -o-transform: translateY(-2300%);
  292. }
  293.  
  294. .put-section-24 {
  295.     transform: translateY(-2400%);
  296.     -webkit-transform: translateY(-2400%);
  297.     -ms-transform: translateY(-2400%);
  298.     -moz-transform: translateY(-2400%);
  299.     -o-transform: translateY(-2400%);
  300. }
  301.  
  302. /*点*/
  303. /*.section-btn {
  304.     position: fixed;
  305.     right: 35px;
  306.     top: 5%;
  307.     width: 14px;
  308. }
  309.     .section-btn li {
  310.         margin-bottom: 12px;
  311.         background: rgba(255,255,255,0.4);
  312.         text-align: center;
  313.         width: 18px;
  314.         height: 18px;
  315.         color: #fff;
  316.         cursor: pointer;
  317.         border-radius: 50%;
  318.     }
  319.     .section-btn li.cur {
  320.         background: #ffffff;
  321.     }*/
  322.  
  323.     .section-btn{height: 600px;overflow: hidden;position: fixed;right:6px;top:40%;margin-top: -204px;font-size:12px;}
  324. .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;}
  325. .section-btn li a{color: #fff;font-family: "Arial";}
  326. .section-btn .cur{background:url("../images/page2.png") no-repeat;background-size:100% 100%;}
  327. .section-btn .cur a{color:#00024d;}
  328. .section-btn li:hover{background:url("../images/page2.png") no-repeat;background-size:100% 100%;}
  329. .section-btn li:hover a{color:#00024d;}
  330.  
  331. /*底部箭头*/
  332. .go-btn {
  333.     opacity: 1;
  334.     webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
  335.     -webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
  336.     -ms-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
  337.     -moz-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
  338.     -o-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
  339.     transform: rotate(-90deg);
  340.     -webkit-transform: rotate(-90deg);
  341.     -ms-transform: rotate(-90deg);
  342.     -moz-transform: rotate(-90deg);
  343.     -o-transform: rotate(-90deg);
  344.     position: absolute;
  345.     bottom: 10px;
  346.     left: 48%;
  347.     width: 40px;
  348.     height: 40px;
  349.     border-radius: 100%;
  350.     line-height: 40px;
  351.     text-align: center;
  352.     font-size: 20px;
  353.     color: #e8a728;
  354.     border: 1px solid #e8a728;
  355.     cursor: pointer;
  356.     overflow: hidden
  357. }
  358.     .go-btn:hover {
  359.         animation-play-state: paused;
  360.         -webkit-animation-play-state: paused;
  361.         -ms-animation-play-state: paused;
  362.         -moz-animation-play-state: paused;
  363.         -o-animation-play-state: paused;
  364.     }
  365. @keyframes go-btn {
  366.     %0,%100 {
  367.         bottom: 10px;
  368.         opacity: 1;
  369.     }
  370.  
  371.     50% {
  372.         bottom: 50px;
  373.         opacity: .5
  374.     }
  375. }
  376. @-webkit-keyframes go-btn {
  377.     %0,%100 {
  378.         bottom: 10px;
  379.         opacity: 1;
  380.     }
  381.  
  382.     50% {
  383.         bottom: 50px;
  384.         opacity: .5
  385.     }
  386. }
  387. @-ms-keyframes go-btn {
  388.     %0,%100 {
  389.         bottom: 10px;
  390.         opacity: 1;
  391.     }
  392.  
  393.     50% {
  394.         bottom: 50px;
  395.         opacity: .5
  396.     }
  397. }
  398. @-moz-keyframes go-btn {
  399.     %0,%100 {
  400.         bottom: 10px;
  401.         opacity: 1;
  402.     }
  403.  
  404.     50% {
  405.         bottom: 50px;
  406.         opacity: .5
  407.     }
  408. }
  409. @-o-keyframes go-btn {
  410.     %0,%100 {
  411.         bottom: 10px;
  412.         opacity: 1;
  413.     }
  414.  
  415.     50% {
  416.         bottom: 50px;
  417.         opacity: .5
  418.     }
  419. }
  420. @-o-keyframes go-btn {
  421.     %0,%100 {
  422.         bottom: 10px;
  423.         opacity: 1;
  424.     }
  425.  
  426.     50% {
  427.         bottom: 50px;
  428.         opacity: .5
  429.     }
  430. }

结束语

以上简单介绍了用到的技术和实现方式，供大家学习交流，我相信很多系统还是需要年报的功能，这样能给系统带来非常多的亮点，让系统有更大的卖点。

SaaS系统怎么做物流行业年度经营报告，MVC+js+echarts实现的更多相关文章

  1. 护航者，腾讯云： 2017年度游戏行业DDoS态势报告—回溯与前瞻

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云 前言 自14年开始,全球DDoS攻击持续爆发,攻击峰值不断创记录.2017年,这种依靠超大流量不断冲击服务器和带宽造成业务 ...

  2. SaaS系列介绍之十三: SaaS系统体系架构

    1 系统体系架构设计 软件开发中系统体系架构决定了一个系统稳定性.健壮性.可扩展性.兼容性和可用性,它是系统的灵魂.体系架构是架构师所关注的核心.良好的体系架构是系统成功的开端,否则,再好的代码与设计 ...

  3. saas系统架构经验总结

    2B Saas系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk Saas系统.很多Saas创业公司也拿了大额风投.毕竟Saas相对传统软件的优势非常明显. ...

  4. 王磊：AI 时代物流行业的 OCR 应用

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ OCR 是人工智能里面非常重要的基础能力之一.腾讯云人工智能产品总监王磊,结合物流场景解读了OCR技术."OCR文本识别能够优化 ...

  5. SaaS 系统架构设计经验总结

    2B SaaS系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk SaaS系统.很多SaaS创业公司也拿了大额风投.毕竟SaaS相对传统软件的优势非常明显. ...

  6. SaaS 系统架构，Spring Boot 动态数据源实现！

    这段时候在准备从零开始做一套SaaS系统,之前的经验都是开发单数据库系统并没有接触过SaaS系统,所以接到这个任务的时候也有也些头疼,不过办法部比困难多,难得的机会. 在网上找了很多关于SaaS的资料 ...

  7. ZOHO荣登“2020中国ToB行业年度企业影响力”榜单

    近日,3WToB行业头条正式揭晓<2020中国ToB行业年度榜单 · 企业影响力榜>. 此次评选,ToB行业头条联合3W集团.50+知名投资机构.60+权威媒体及资深行业人士,进行深度调研 ...

  8. Saas系统架构的思考，多租户Saas架构设计分析

    ToB Saas系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk Saas系统.很多Saas创业公司也拿了大额风投.毕竟Saas相对传统软件的优势非常明显. ...

  9. 制造企业信息化时代，SaaS系统下沉，移动端上升

    这个时代,我们是不是有很多岗位一定是要在电脑前面完成?如果我们让部分岗位的办公室人员离开电脑,让他们通过移动端来完成工作,这又会产生出一个什么样的变化?是否意味着可以有更多的时间在一线生产制造现场,从 ...

随机推荐

  1. Golang的Context介绍及其源码分析

    简介 在Go服务中,对于每个请求,都会起一个协程去处理.在处理协程中,也会起很多协程去访问资源,比如数据库,比如RPC,这些协程还需要访问请求维度的一些信息比如说请求方的身份,授权信息等等.当一个请求 ...

  2. Eclipse安装AmaterasUML插件问题

    为了画UML图,我想在Eclipse(版本Version: Oxygen Release (4.7.0))安装AmaterasUML,第一步,安装GEF - http://download.eclip ...

  3. 你没有看错，爬网页数据，C# 也可以像 Jquery 那样

    一:背景 1. 讲故事 前段时间搞了一个地方性民生资讯号,资讯嘛,都是我抄你的,你抄官媒的,小市民都喜欢奇闻异事,所以就存在一个需求,如何去定向抓取奇闻异事的地方号上的新闻,其实做起来很简单,用逻辑回 ...

  4. 刷题[GWCTF 2019]你的名字

    解题思路 打开发现需要输入名字,猜测会有sql注入漏洞,测试一下发现单引号被过滤了,再fuzs下看看过滤了哪些 长度为1518和1519的都有过滤,测试一下,感觉不是sql注入了.那还有什么呢,考虑了 ...

  5. 实现select下拉框的无限加载（懒加载）

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  6. SON Web Tokens 工具类 [ JwtUtil ]

    pom.xml <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt< ...

  7. mysql笔记--基础知识

    SQL基础 SQL语句的分类: DQL: 数据库查询语句,基本的就是select查询命令,用于查询数据 DML: 数据操纵语句,用于插入,更新,删除数据,即INSERT, UPDATE,DELETE ...

  8. Python其他数据结构collection模块-namtuple defaultdict deque Queue Counter OrderDict arrary

    nametuple 是tuple扩展子类,命名元组,其实本质上简单类对象 from collections import namedtuple info = namedtuple("Info ...

  9. Python练习题 041：Project Euler 013：求和、取前10位数值

    本题来自 Project Euler 第13题:https://projecteuler.net/problem=13 # Project Euler: Problem 13: Large sum # ...

  10. jQuery中使用$.each()遍历数组时要注意的地方

    使用jQuery中 $.each()遍历数组,要遍历的数组不能为空(arry!="") 例如:           $.each(arry, function (i, item)  ...