一  概述

当新开发一个项目或产品时，技术选型是一个不可缺少的环节，在软件架构中有着举足轻重的作用，可以这么说，技术选型的好坏直接影响项目或产品的成败优劣，因此，在进行软件架构时，一定要想好技术选型。传统的前后端耦合在一起的模式，基本上不能满足当前环境下的大数据，高并发等需求，如.NET 的WebForm模式逐渐被MVC取代，MVC逐渐取代WebForm，其中有两点重要的原因：MVC前后端彻底分离和MVC通用性比较好。从架构的架构，我们把软件架构抽象为两部分，即前端和后端，两者通过接口来传递数据。但在本篇文章中，不谈架构，只是与大家分享几种基于Bootsrap的比较主流的前端框架。

 

二 当前几种比较流行的前端框架

（一）AdminLTE

 1.参考网址：https://adminlte.io/

 2.开源

 3.Bootstrap3框架

 4.轻量级

 5.完全响应式，支持定制化

 6.github:https://github.com/almasaeed2010/AdminLTE

（二）ACE框架

 

 1.参考网址：http://ace.jeka.by/

 2.Twitter bootstrap3开发的后台模板

 3.开源

 4.github:https://github.com/bopoda/ace

（三）clearmin

 

 1.参考网址：http://cm.paomedia.com/

 2.基于Bootstrap3框架开发的

 3.github:https://github.com/paomedia/clearmin

（四）h-ui

 

 1.参考网址：http://www.h-ui.net/H-ui.admin.shtml

 2.H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言，完全免费，简单灵活，兼容性好让您快速搭建中小型网站后台

(五)Echats

1.参考网址：http://echarts.baidu.com/

2.由百度团队开发，完全用js开发，功能强大，各种类型报表

三 Echarts架构图

如上虽然给大家推荐了五套前端框架，但笔者推荐AdminLTE+H-ui+Echarts组合模式，这也是我目前在软件架构中运用到的组合模式。

Echarts框架

 

四  用Echarts做个报表统计

（一）先看看DEMO效果图

动态效果

 1.支持多种动报表切换，如Line,Bar等；

 2.具有隐藏/显示按钮；

 3.具有数据表格功能；

 4.具有图标保存功能。

（二） 前端Code

1.定义一个div容器

  1. 1 <div id="EchartsBarDemo" style="width:100%;height:600px"></div>

2.初始化

  1. 1 var myChart = echarts.init(document.getElementById(\'EchartsBarDemo\'));

3.设置option

  1.  1 var option = {
  2.  2                 title: {
  3.  3                     text: \'XXX高三6月学生总分统计\',
  4.  4                     subtext: \'虚拟数据\'
  5.  5                 },
  6.  6                 tooltip: {
  7.  7                     trigger: \'axis\'
  8.  8                 },
  9.  9                 legend: {
  10. 10                     data: [\'文科\', \'理科\']
  11. 11                 },
  12. 12                 toolbox: {
  13. 13                     show: true,
  14. 14                     feature: {
  15. 15                         mark: { show: true },
  16. 16                         dataView: { show: true, readOnly: false },
  17. 17                         magicType: { show: true, type: [\'line\', \'bar\'] },
  18. 18                         restore: { show: true },
  19. 19                         saveAsImage: { show: true }
  20. 20                     }
  21. 21                 },
  22. 22                 calculable: true,
  23. 23                 xAxis: [
  24. 24                     {
  25. 25                         type: \'category\',
  26. 26                         data: [\'300以下\', \'300-400\', \'400-500\', \'500-550\', \'550-600\', \'600-650\', \'650以上\']
  27. 27                     }
  28. 28                 ],
  29. 29                 yAxis: [
  30. 30                     {
  31. 31                         type: \'value\'
  32. 32                     }
  33. 33                 ],
  34. 34                 series: [
  35. 35                     {
  36. 36                         name: \'理科\',
  37. 37                         type: \'bar\',
  38. 38                         data: LiKeScores,
  39. 39                         markPoint: {
  40. 40                             data: [
  41. 41                                 { type: \'max\', name: \'最大值\' },
  42. 42                                 { type: \'min\', name: \'最小值\' }
  43. 43                             ]
  44. 44                         },
  45. 45                         markLine: {
  46. 46                             data: [
  47. 47                                 { type: \'average\', name: \'平均值\' }
  48. 48                             ]
  49. 49                         }
  50. 50                     },
  51. 51                     {
  52. 52                         name: \'文科\',
  53. 53                         type: \'bar\',
  54. 54                         data: WenKeScores,
  55. 55                         markPoint: {//标注点
  56. 56                             data: [
  57. 57                                 { type: \'max\', name: \'最大值\' },
  58. 58                                 { type: \'min\', name: \'最小值\' }
  59. 59                             ]
  60. 60                         },
  61. 61                         markLine: { //水平线
  62. 62                             data: [
  63. 63                                 { type: \'average\', name: \'平均值\' } //水平线表示平均值
  64. 64                             ]
  65. 65                         }
  66. 66                     }
  67. 67                 ]
  68. 68             }

4.将option添加给myCharts实例

  1. 1 myChart.setOption(option);
  2. 2 // 设置加载等待隐藏
  3. 3 myChart.hideLoading();

 

（三）.NET

  1.  1 public class DefaultController : Controller
  2.  2     {
  3.  3         // GET: Default
  4.  4         public ActionResult BarEcharts()
  5.  5         {
  6.  6             return View();
  7.  7         }
  8.  8 
  9.  9         public ContentResult GetScoresJson()
  10. 10         {
  11. 11             //这里只是模拟数据，正式环境需要到db中查询
  12. 12             return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
  13. 13         }
  14. 14     }

（四）完整源码

1.前端

  1.   1 <html>
  2.   2 <head>
  3.   3     <meta name="viewport" content="width=device-width" />
  4.   4     <script src="~/Scripts/jquery-3.3.1.js"></script>
  5.   5     <script src="~/Scripts/echarts.js"></script>
  6.   6     <title>BarEcharts</title>
  7.   7 </head>
  8.   8 <body>
  9.   9     <div id="EchartsBarDemo" style="width:100%;height:600px"></div>
  10.  10 </body>
  11.  11 </html>
  12.  12 
  13.  13 <script>
  14.  14     //初始化
  15.  15     var myChart = echarts.init(document.getElementById(\'EchartsBarDemo\'));
  16.  16     //定义全局变量
  17.  17     //var LiKeScores = [10, 20, 30, 100, 300, 80, 60];
  18.  18     //var WenKeScores = [15, 10, 30, 80, 400, 100, 60];
  19.  19     var LiKeScores = [];
  20.  20     var WenKeScores = [];
  21.  21     var jsonURL = "/Default/GetScoresJson";
  22.  22     $.ajax({
  23.  23         type: \'get\',
  24.  24         url: jsonURL,
  25.  25         dataType: "text",
  26.  26         success: function (rspData) {
  27.  27             console.log(rspData);
  28.  28             var str = eval(\'(\' + rspData + \')\');
  29.  29             LiKeScores =str.LiKe;
  30.  30             WenKeScores = str.WenKe;
  31.  31             var option = {
  32.  32                 title: {
  33.  33                     text: \'XXX高三6月学生总分统计\',
  34.  34                     subtext: \'虚拟数据\'
  35.  35                 },
  36.  36                 tooltip: {
  37.  37                     trigger: \'axis\'
  38.  38                 },
  39.  39                 legend: {
  40.  40                     data: [\'文科\', \'理科\']
  41.  41                 },
  42.  42                 toolbox: {
  43.  43                     show: true,
  44.  44                     feature: {
  45.  45                         mark: { show: true },
  46.  46                         dataView: { show: true, readOnly: false },
  47.  47                         magicType: { show: true, type: [\'line\', \'bar\'] },
  48.  48                         restore: { show: true },
  49.  49                         saveAsImage: { show: true }
  50.  50                     }
  51.  51                 },
  52.  52                 calculable: true,
  53.  53                 xAxis: [
  54.  54                     {
  55.  55                         type: \'category\',
  56.  56                         data: [\'300以下\', \'300-400\', \'400-500\', \'500-550\', \'550-600\', \'600-650\', \'650以上\']
  57.  57                     }
  58.  58                 ],
  59.  59                 yAxis: [
  60.  60                     {
  61.  61                         type: \'value\'
  62.  62                     }
  63.  63                 ],
  64.  64                 series: [
  65.  65                     {
  66.  66                         name: \'理科\',
  67.  67                         type: \'bar\',
  68.  68                         data: LiKeScores,
  69.  69                         markPoint: {
  70.  70                             data: [
  71.  71                                 { type: \'max\', name: \'最大值\' },
  72.  72                                 { type: \'min\', name: \'最小值\' }
  73.  73                             ]
  74.  74                         },
  75.  75                         markLine: {
  76.  76                             data: [
  77.  77                                 { type: \'average\', name: \'平均值\' }
  78.  78                             ]
  79.  79                         }
  80.  80                     },
  81.  81                     {
  82.  82                         name: \'文科\',
  83.  83                         type: \'bar\',
  84.  84                         data: WenKeScores,
  85.  85                         markPoint: {//标注点
  86.  86                             data: [
  87.  87                                 { type: \'max\', name: \'最大值\' },
  88.  88                                 { type: \'min\', name: \'最小值\' }
  89.  89                             ]
  90.  90                         },
  91.  91                         markLine: { //水平线
  92.  92                             data: [
  93.  93                                 { type: \'average\', name: \'平均值\' } //水平线表示平均值
  94.  94                             ]
  95.  95                         }
  96.  96                     }
  97.  97                 ]
  98.  98             }
  99.  99             myChart.setOption(option);
  100. 100             // 设置加载等待隐藏
  101. 101             myChart.hideLoading();
  102. 102         },
  103. 103         error: function (data) {
  104. 104             console.log(data);
  105. 105             LiKeScores = data.LiKe;
  106. 106             WenKeScores = data.WenKe;
  107. 107             //Loading(false);
  108. 108         }
  109. 109     });
  110. 110 </script>

View Code

2.后端

  1.  1 using System;
  2.  2 using System.Collections.Generic;
  3.  3 using System.Linq;
  4.  4 using System.Web;
  5.  5 using System.Web.Mvc;
  6.  6 
  7.  7 namespace EchartDemo.Controllers
  8.  8 {
  9.  9     public class DefaultController : Controller
  10. 10     {
  11. 11         // GET: Default
  12. 12         public ActionResult BarEcharts()
  13. 13         {
  14. 14             return View();
  15. 15         }
  16. 16 
  17. 17         public ContentResult GetScoresJson()
  18. 18         {
  19. 19             //这里只是模拟数据，正式环境需要到db中查询
  20. 20             return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
  21. 21         }
  22. 22     }
  23. 23 }

View Code

 

五   版权区

  • 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
  • 博主网址：http://www.cnblogs.com/wangjiming/。
  • 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
  • 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2098469527@qq.com。
  • 可以转载该博客，但必须注名博客来源。

 

版权声明：本文为wangjiming原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wangjiming/p/9278459.html