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

巴特西

Echarts的使用教程

最新文章

热门文章