專案中需要使用圖表，最初使用的.NET自帶的MSChart控制元件，做出來的效果不太好，所以又使用了Echarts控制元件。
MSChart原始碼放在最後，可自行下載檢視。
Echarts是一個基於 JavaScript 的開源視覺化圖表庫，在此是在.NET MVC中的使用，其他專案也應該是如出一轍。
Echarts官網：http://echarts.apache.org
Echarts下載：https://echarts.apache.org/zh/download.html
使用說明：
1、引入ECharts
<script src="~/Content/echarts/echarts.min.js"></script>
2、為ECharts準備一個具備大小（寬高）的Dom
<div id="chart_rentalreturn" style="width: 700px;height:300px;"></div>
3、建立關於圖表屬性的物件
1 public class normal
2 {
3 /// <summary>
4 /// color
5 /// </summary>
6 public string color
7 {
8 get;
9 set;
10
11 }
12
13 }
14 public class itemStyle
15 {
16 /// <summary>
17 /// normal
18 /// </summary>
19 public object normal
20 {
21 get;
22 set;
23 }
24 }
25 public class data
26 {
27 public string name
28 {
29 get;
30 set;
31 }
32 public int value
33 {
34 get;
35 set;
36 }
37 public object itemStyle
38 {
39 get;
40 set;
41 }
42 }
43
44 public class Series
45 {
46 /// <summary>
47 /// sereis序列組id
48 /// </summary>
49 public int id
50 {
51 get;
52 set;
53 }
54 /// <summary>
55 /// series序列組名稱
56 /// </summary>
57 public string name
58 {
59 get;
60 set;
61 }
62 /// <summary>
63 /// series序列組呈現圖表型別(line、column、bar等)
64 /// </summary>
65 public string type
66 {
67 get;
68 set;
69 }
70 /// <summary>
71 /// series序列組的itemstyle
72 /// </summary>
73 public object itemStyle
74 {
75 get;
76 set;
77 }
78 /// <summary>
79 /// series序列組的資料為資料型別陣列
80 /// </summary>
81 public List<object> data
82 {
83 get;
84 set;
85 }
86 }
4、控制器中建立方法
1 public JsonResult GetEchartsRentalReturn()
2 {
3 //圖表的category陣列
4 List<string> categoryList = new List<string>();
5 //圖表的series陣列
6 List<Series> seriesList = new List<Series>();
7 //設定legend內的data陣列為series的name集合
8 List<string> legendList = new List<string>();
9 legendList.Add("Rental"); //這裡的名稱必須和series的每一組series的name保持一致
10 legendList.Add("Return");
11
12 Series rentalSeries = new Series();
13 rentalSeries.id = 0;
14 rentalSeries.name = "Rental";
15 rentalSeries.type = "line"; //線性圖
16 rentalSeries.data = new List<object>();
17 rentalSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
18
19 Series returnSeries = new Series();
20 returnSeries.id = 1;
21 returnSeries.name = "Return";
22 returnSeries.type = "line";
23 returnSeries.data = new List<object>();
24 returnSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
25 Random rd = new Random();
26 for (int i = 6; i <= 23; i++)
27 {
28 categoryList.Add(i.ToString());
29 rentalSeries.data.Add(rd.Next(0, 801));
30 returnSeries.data.Add(rd.Next(0, 801));
31 }
32
33 //將sereis物件加入sereis陣列列表內
34 seriesList.Add(rentalSeries);
35 seriesList.Add(returnSeries);
36 var newObj = new
37 {
38 category = categoryList,
39 series = seriesList,
40 legend = legendList
41 };
42
43 return Json(newObj, JsonRequestBehavior.AllowGet);
44 }
5、建立圖表
1 <script type="text/javascript">
2 $(document).ready(function () {
3 func_echarts_pie_rentalreturn();
4 });
5
6 function func_echarts_pie_rentalreturn() {
7 // 基於準備好的dom，初始化echarts例項
8 var myChart = echarts.init(document.getElementById('chart_rentalreturn'));
9
10 // 指定圖表的配置項和資料
11 var option = {
12 title: {
13 text: 'Rental/Return Frequency (Unit X:Hour Y:Times)',
14 bottom: '92%'
15 },
16 tooltip: {
17 trigger: 'axis'
18 },
19 legend: {
20 data: ['Rental', 'Return'],
21 bottom: '87%'
22 },
23 grid: {
24 left: '3%',
25 right: '4%',
26 bottom: '3%',
27 containLabel: true
28 },
29 toolbox: {
30 feature: {
31 saveAsImage: {}
32 }
33 },
34 xAxis: {
35 type: 'category',
36 boundaryGap: false
37 },
38 yAxis: {
39 type: 'value'
40 },
41 series: []
42 };
43
44 $.ajax({
45 type: "post",
46 url: "/Home/GetEchartsRentalReturn",
47 data:
48 {
49 async: false,
50 operate: "myChart"
51 },
52 dataType: "json", //返回資料形式為json
53 success: function (result) {
54 for (var i = 0; i < result.length; i++) {
55 result[i].name;
56 }
57 option.xAxis.data = result.category;
58 option.series = result.series;
59 option.legend.data = result.legend;
60 myChart.setOption(option);
61 },
62 error: function (errorMsg) {
63 //請求失敗時執行該函式
64 alert("圖表請求資料失敗!");
65 }
66 });
67 }
68 </script>
6、圖表效果顯示
結語：使用ECharts之後，覺得功能很強大，可以滿足任何圖表的需求，需要的功能都可以在官網的示例中找到。這裡只寫了一個簡單的使用，其餘的可根據官網示例自行摸索。
MSChart原始碼下載：
連結：https://pan.baidu.com/s/1RF0mYfssp6cmRAEJV2Bv8g
提取碼：lju8