一 概述
當新開發一個項目或産品時,技術選型是一個不可缺少的環節,在軟體架構中有着舉足輕重的作用,可以這麼說,技術選型的好壞直接影響項目或産品的成敗優劣,是以,在進行軟體架構時,一定要想好技術選型。傳統的前後端耦合在一起的模式,基本上不能滿足目前環境下的大資料,高并發等需求,如.NET 的WebForm模式逐漸被MVC取代,MVC逐漸取代WebForm,其中有兩點重要的原因:MVC前後端徹底分離和MVC通用性比較好。從架構的架構,我們把軟體架構抽象為兩部分,即前端和後端,兩者通過接口來傳遞資料。但在本篇文章中,不談架構,隻是與大家分享幾種基于Bootsrap的比較主流的前端架構。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuQjN0IDMyQjN40yNyYjM1gzMwADOwcDM4EDMy0yMykjN2ATMvw1NwgTMwIzLcNjM5YjNwEzLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
二 目前幾種比較流行的前端架構
(一)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 <div id="EchartsBarDemo" style="width:100%;height:600px"></div>
2.初始化
1 var myChart = echarts.init(document.getElementById('EchartsBarDemo'));
3.設定option
1 var option = {
2 title: {
3 text: 'XXX高三6月學生總分統計',
4 subtext: '虛拟資料'
5 },
6 tooltip: {
7 trigger: 'axis'
8 },
9 legend: {
10 data: ['文科', '理科']
11 },
12 toolbox: {
13 show: true,
14 feature: {
15 mark: { show: true },
16 dataView: { show: true, readOnly: false },
17 magicType: { show: true, type: ['line', 'bar'] },
18 restore: { show: true },
19 saveAsImage: { show: true }
20 }
21 },
22 calculable: true,
23 xAxis: [
24 {
25 type: 'category',
26 data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']
27 }
28 ],
29 yAxis: [
30 {
31 type: 'value'
32 }
33 ],
34 series: [
35 {
36 name: '理科',
37 type: 'bar',
38 data: LiKeScores,
39 markPoint: {
40 data: [
41 { type: 'max', name: '最大值' },
42 { type: 'min', name: '最小值' }
43 ]
44 },
45 markLine: {
46 data: [
47 { type: 'average', name: '平均值' }
48 ]
49 }
50 },
51 {
52 name: '文科',
53 type: 'bar',
54 data: WenKeScores,
55 markPoint: {//标注點
56 data: [
57 { type: 'max', name: '最大值' },
58 { type: 'min', name: '最小值' }
59 ]
60 },
61 markLine: { //水準線
62 data: [
63 { type: 'average', name: '平均值' } //水準線表示平均值
64 ]
65 }
66 }
67 ]
68 }
4.将option添加給myCharts執行個體
1 myChart.setOption(option);
2 // 設定加載等待隐藏
3 myChart.hideLoading();
(三).NET
1 public class DefaultController : Controller
2 {
3 // GET: Default
4 public ActionResult BarEcharts()
5 {
6 return View();
7 }
8
9 public ContentResult GetScoresJson()
10 {
11 //這裡隻是模拟資料,正式環境需要到db中查詢
12 return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
13 }
14 }
(四)完整源碼
1.前端
1 <html>
2 <head>
3 <meta name="viewport" content="width=device-width" />
4 <script src="~/Scripts/jquery-3.3.1.js"></script>
5 <script src="~/Scripts/echarts.js"></script>
6 <title>BarEcharts</title>
7 </head>
8 <body>
9 <div id="EchartsBarDemo" style="width:100%;height:600px"></div>
10 </body>
11 </html>
12
13 <script>
14 //初始化
15 var myChart = echarts.init(document.getElementById('EchartsBarDemo'));
16 //定義全局變量
17 //var LiKeScores = [10, 20, 30, 100, 300, 80, 60];
18 //var WenKeScores = [15, 10, 30, 80, 400, 100, 60];
19 var LiKeScores = [];
20 var WenKeScores = [];
21 var jsonURL = "/Default/GetScoresJson";
22 $.ajax({
23 type: 'get',
24 url: jsonURL,
25 dataType: "text",
26 success: function (rspData) {
27 console.log(rspData);
28 var str = eval('(' + rspData + ')');
29 LiKeScores =str.LiKe;
30 WenKeScores = str.WenKe;
31 var option = {
32 title: {
33 text: 'XXX高三6月學生總分統計',
34 subtext: '虛拟資料'
35 },
36 tooltip: {
37 trigger: 'axis'
38 },
39 legend: {
40 data: ['文科', '理科']
41 },
42 toolbox: {
43 show: true,
44 feature: {
45 mark: { show: true },
46 dataView: { show: true, readOnly: false },
47 magicType: { show: true, type: ['line', 'bar'] },
48 restore: { show: true },
49 saveAsImage: { show: true }
50 }
51 },
52 calculable: true,
53 xAxis: [
54 {
55 type: 'category',
56 data: ['300以下', '300-400', '400-500', '500-550', '550-600', '600-650', '650以上']
57 }
58 ],
59 yAxis: [
60 {
61 type: 'value'
62 }
63 ],
64 series: [
65 {
66 name: '理科',
67 type: 'bar',
68 data: LiKeScores,
69 markPoint: {
70 data: [
71 { type: 'max', name: '最大值' },
72 { type: 'min', name: '最小值' }
73 ]
74 },
75 markLine: {
76 data: [
77 { type: 'average', name: '平均值' }
78 ]
79 }
80 },
81 {
82 name: '文科',
83 type: 'bar',
84 data: WenKeScores,
85 markPoint: {//标注點
86 data: [
87 { type: 'max', name: '最大值' },
88 { type: 'min', name: '最小值' }
89 ]
90 },
91 markLine: { //水準線
92 data: [
93 { type: 'average', name: '平均值' } //水準線表示平均值
94 ]
95 }
96 }
97 ]
98 }
99 myChart.setOption(option);
100 // 設定加載等待隐藏
101 myChart.hideLoading();
102 },
103 error: function (data) {
104 console.log(data);
105 LiKeScores = data.LiKe;
106 WenKeScores = data.WenKe;
107 //Loading(false);
108 }
109 });
110 </script>
View Code
2.後端
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Mvc;
6
7 namespace EchartDemo.Controllers
8 {
9 public class DefaultController : Controller
10 {
11 // GET: Default
12 public ActionResult BarEcharts()
13 {
14 return View();
15 }
16
17 public ContentResult GetScoresJson()
18 {
19 //這裡隻是模拟資料,正式環境需要到db中查詢
20 return Content("{LiKe:[10, 20, 30, 100, 300, 80, 60],WenKe:[15, 10, 30, 80, 400, 100, 60]}");
21 }
22 }
23 }
五 版權區
- 感謝您的閱讀,若有不足之處,歡迎指教,共同學習、共同進步。
- 部落客網址:http://www.cnblogs.com/wangjiming/。
- 極少部分文章利用讀書、參考、引用、抄襲、複制和粘貼等多種方式整合而成的,大部分為原創。
- 如您喜歡,麻煩推薦一下;如您有新想法,歡迎提出,郵箱:[email protected]。
- 可以轉載該部落格,但必須注名部落格來源。