ECHART的使用方法
项目中需要使用图表，最初使用的.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序列组图表类型
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: '(X:Min 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
