ECharts 初識（基於MVC+jQuery+Angularjs實現的Demo）

時間 2019-11-19

標籤 echarts 基於 mvc+jquery+angularjs mvc jquery angularjs 實現 demo 欄目 JQuery 简体版

原文原文鏈接

1、背景：html

咱們這行作web開發的，不少時候都須要作數據統計報表，如今我所使用的是來自百度團隊的ECharts。官方網址： http://echarts.baidu.com/

咱們知道，不少時候咱們須要一些吸引眼球的能力。先上一張稍微有一點點炫的圖給你們看看。

2、代碼栗子

1.在頁面直接使用靜態數據進行顯示

步驟：

（1）先建一個空的MVC項目，並將它命名爲EChartsDemo

（2）再建一個空的控制器HomeController，並建立一個Index視圖

 1 namespace EChartsDemo.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         /// <summary>
 6         /// 首頁--柱狀圖（使用靜態數據）
 7         /// </summary>
 8         /// <returns></returns>
 9         public ActionResult Index()
10         {
11             return View();
12         }
13     }
14 }

HomeController.cs

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height: 400px"></div>
 9 
10     <!-- ECharts單文件引入 -->
11     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
12 
13     <script>
14         // 路徑配置
15         require.config({
16             paths: {
17                 echarts: 'http://echarts.baidu.com/build/dist'
18             }
19         });
20 
21         // 使用
22         require(
23             [
24                 'echarts',
25                 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
26             ],
27             function (ec) {
28                 // 基於準備好的dom，初始化echarts圖表
29                 var myChart = ec.init(document.getElementById('main'));
30 
31                 var option = {
32                     tooltip: {
33                         show: true
34                     },
35                     legend: {
36                         data: ['銷量']
37                     },
38                     xAxis: [
39                         {
40                             type: 'category',
41                             data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]   //--①--
42                         }
43                     ],
44                     yAxis: [
45                         {
46                             type: 'value'
47                         }
48                     ],
49                     series: [
50                         {
51                             "name": "銷量",
52                             "type": "bar",
53                             "data": [5, 20, 40, 10, 10, 20] //--②--
54                         }
55                     ]
56                 };
57 
58                 // 爲echarts對象加載數據
59                 myChart.setOption(option);
60             }
61         );
62     </script>
63 </body>

Index.cshtml

　　運行後的效果圖：前端

　　　　　　咱們能夠在Index.cshtml代碼中的--①②--處本身學習加下數據。jquery

　　　　　　對於它的使用，咱們能夠簡單的總結爲：angularjs

　　　　　　　　a.準備一個Dom --> b.引入js --> c.配置路徑 --> d.動態加載圖表web

　　2.此次咱們弄個餅圖（MVC+jQuery），上次咱們引入的是網上中的js，如今咱們換成本地的js。文件須要本身到官方下載。app

　　步驟：echarts

　　　　（1）在Models文件夾添加兩個類dom

 1 namespace EChartsDemo.Models
 2 {
 3     public class PieMapViewModel
 4     {
 5         /// <summary>
 6         /// 圖例數據
 7         /// </summary>
 8         public List<string> LegendData { get; set; }
 9 
10         /// <summary>
11         /// 圖表數據
12         /// </summary>
13         public List<VisitSource> SeriesData { get; set; }
14     }
15 }

PieMapViewModel

1 namespace EChartsDemo.Models
2 {
3     public class VisitSource
4     {
5         public string value { get; set; }
6 
7         public string name { get; set; }
8     }
9 }

VisitSource

　　　　（2）在HomeController中添加兩個名爲PieMap的方法ide

 1 namespace EChartsDemo.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         /// <summary>
 6         /// 首頁--柱狀圖（使用靜態數據）
 7         /// </summary>
 8         /// <returns></returns>
 9         public ActionResult Index()
10         {
11             return View();
12         }
13 
14 
15         /// <summary>
16         /// 餅圖（jq獲取動態數據）
17         /// </summary>
18         /// <returns></returns>
19         public ActionResult PieMap()
20         {
21             return View();
22         }
23 
24 
25         /// <summary>
26         /// 餅圖（jq獲取動態數據）
27         /// </summary>
28         /// <returns></returns>
29         [HttpPost]
30         public ActionResult PieMap(string id)
31         {
32             var pie = new PieMapViewModel()
33             {
34                 LegendData = new List<string>()
35                 {
36                     "直接訪問",
37                     "郵件營銷",
38                     "聯盟廣告",
39                     "視頻廣告",
40                     "搜索引擎"
41                 },
42                 SeriesData = new List<VisitSource>()
43                 {
44                     new VisitSource() {name = "直接訪問", value = "335"},
45                     new VisitSource() {name = "郵件營銷", value = "310"},
46                     new VisitSource() {name = "聯盟廣告", value = "234"},
47                     new VisitSource() {name = "視頻廣告", value = "135"},
48                     new VisitSource() {name = "搜索引擎", value = "1548"}
49                 }
50             };
51 
52             return Json(new { status = 1, result = pie });
53         }
54     }
55 }

HomeController.cs

　　　　（3）前端代碼post

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts</title>
 5 </head>
 6 <body>
 7     <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
 8     <div id="main" style="height: 800px"></div>
 9 
10     <!-- ECharts單文件引入 -->
11     @*<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>*@
12     <script src="~/assets/echarts/build/source/echarts.js"></script>
13 
14     <script src="~/assets/jquery-2.1.4.js"></script>
15 
16     <script>
17         $.post("/Home/PieMap", { id: '' }, function (response, status) {
18             // 路徑配置
19             require.config({
20                 paths: {
21                     echarts: '/assets/echarts/build/source'
22                 }
23             });
24 
25             // 使用
26             require(
27                 [
28                     'echarts',
29                     'echarts/chart/pie' // 使用餅狀圖就加載pie模塊，按需加載
30                 ],
31                 function (ec) {
32                     // 基於準備好的dom，初始化echarts圖表
33                     var myChart = ec.init($("#main")[0]);
34 
35                     var option = {
36                         title: {
37                             text: '某站點用戶訪問來源',
38                             subtext: '純屬虛構',
39                             x: 'center'
40                         },
41                         tooltip: {
42                             trigger: 'item',
43                             formatter: "{a} <br/>{b} : {c} ({d}%)"
44                         },
45                         legend: {
46                             orient: 'vertical',
47                             x: 'left',
48                             //data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
49                             data: response.result.LegendData
50                         },
51                         toolbox: {
52                             show: true,
53                             feature: {
54                                 mark: { show: true },
55                                 dataView: { show: true, readOnly: false },
56                                 magicType: {
57                                     show: true,
58                                     type: ['pie', 'funnel'],
59                                     option: {
60                                         funnel: {
61                                             x: '25%',
62                                             width: '50%',
63                                             funnelAlign: 'left',
64                                             max: 1548
65                                         }
66                                     }
67                                 },
68                                 restore: { show: true },
69                                 saveAsImage: { show: true }
70                             }
71                         },
72                         calculable: true,
73                         series: [
74                             {
75                                 name: '訪問來源',
76                                 type: 'pie',
77                                 radius: '55%',
78                                 center: ['50%', '60%'],
79                                 data: response.result.SeriesData
80                                 //data: [
81                                 //    { value: 335, name: '直接訪問' },
82                                 //    { value: 310, name: '郵件營銷' },
83                                 //    { value: 234, name: '聯盟廣告' },
84                                 //    { value: 135, name: '視頻廣告' },
85                                 //    { value: 1548, name: '搜索引擎' }
86                                 //]
87                             }
88                         ]
89                     };
90 
91                     // 爲echarts對象加載數據
92                     myChart.setOption(option);
93                 }
94             );
95         });
96 
97     </script>
98 </body>

PieMap.cshtml

　　運行後的效果圖：

　　3.依然是這個餅圖，只不過此次咱們將前端換成Angularjs+jQuery的形式

　　　　（1）在HomeController內添加方法PieMapS【由於手機升級版經常在尾端加上S】

 1 namespace EChartsDemo.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         /// <summary>
 6         /// 首頁--柱狀圖（使用靜態數據）
 7         /// </summary>
 8         /// <returns></returns>
 9         public ActionResult Index()
10         {
11             return View();
12         }
13 
14 
15         /// <summary>
16         /// 餅圖（jq獲取動態數據）
17         /// </summary>
18         /// <returns></returns>
19         public ActionResult PieMap()
20         {
21             return View();
22         }
23 
24 
25         /// <summary>
26         /// 餅圖（jq獲取動態數據）
27         /// </summary>
28         /// <returns></returns>
29         [HttpPost]
30         public ActionResult PieMap(string id)
31         {
32             var pie = new PieMapViewModel()
33             {
34                 LegendData = new List<string>()
35                 {
36                     "直接訪問",
37                     "郵件營銷",
38                     "聯盟廣告",
39                     "視頻廣告",
40                     "搜索引擎"
41                 },
42                 SeriesData = new List<VisitSource>()
43                 {
44                     new VisitSource() {name = "直接訪問", value = "335"},
45                     new VisitSource() {name = "郵件營銷", value = "310"},
46                     new VisitSource() {name = "聯盟廣告", value = "234"},
47                     new VisitSource() {name = "視頻廣告", value = "135"},
48                     new VisitSource() {name = "搜索引擎", value = "1548"}
49                 }
50             };
51 
52             return Json(new { status = 1, result = pie });
53         }
54 
55         /// <summary>
56         /// 餅圖（angularjs）
57         /// </summary>
58         /// <returns></returns>
59         public ActionResult PieMapS()
60         {
61             return View();
62         }
63 
64     }
65 }

HomeController.cs

　　　　（2）準備好視圖和js文件（pieMapS.js爲自定義的腳本）

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" ng-app="myApp" ng-controller="myCtrl" style="height: 400px">

    </div>

    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/assets/scripts/pieMapS.js"></script>

</body>

PieMapS.cshtml

 1 var app = angular.module("myApp", []);
 2 
 3 app.controller("myCtrl", function ($scope, $http) {
 4     $http
 5         .post("/Home/PieMap")
 6         .success(function (response) {
 7             // 路徑配置
 8             require.config({
 9                 paths: {
10                     echarts: "/assets/echarts/build/source"
11                 }
12             });
13 
14             // 使用
15             require(
16                 [
17                     "echarts",
18                     "echarts/chart/pie" // 使用餅狀圖就加載pie模塊，按需加載
19                 ],
20                 function (ec) {
21                     // 基於準備好的dom，初始化echarts圖表
22                     var myChart = ec.init($("#main")[0]);
23 
24                     var option = getOption(response);
25 
26                     // 爲echarts對象加載數據
27                     myChart.setOption(option);
28                 }
29             );
30         })
31         .error(function () {
32             alert("系統發生異常");
33         });
34 });
35 
36 function getOption(response) {
37     return {
38         title: {
39             text: '某站點用戶訪問來源',
40             subtext: '純屬虛構',
41             x: 'center'
42         },
43         tooltip: {
44             trigger: 'item',
45             formatter: "{a} <br/>{b} : {c} ({d}%)"
46         },
47         legend: {
48             orient: 'vertical',
49             x: 'left',
50             data: response.result.LegendData
51         },
52         toolbox: {
53             show: true,
54             feature: {
55                 mark: { show: true },
56                 dataView: { show: true, readOnly: false },
57                 magicType: {
58                     show: true,
59                     type: ['pie', 'funnel'],
60                     option: {
61                         funnel: {
62                             x: '25%',
63                             width: '50%',
64                             funnelAlign: 'left',
65                             max: 1548
66                         }
67                     }
68                 },
69                 restore: { show: true },
70                 saveAsImage: { show: true }
71             }
72         },
73         calculable: true,
74         series: [
75             {
76                 name: '訪問來源',
77                 type: 'pie',
78                 radius: '55%',
79                 center: ['50%', '60%'],
80                 data: response.result.SeriesData
81             }
82         ]
83     };
84 }