Echarts的使用教程

项目中需要使用图表，最初使用的.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