百度EChart3初体验

Posted —阿辉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度EChart3初体验相关的知识,希望对你有一定的参考价值。

由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK。至于说如何体现出来,官网的教程很详细。大家可以去看下。大概了解下用法就OK。

百度ECharts 3:http://echarts.baidu.com/index.html

image

其实还有很多,可以到官网中找。

下面是我进行操作的步奏,大家可以看下,做个参考。

ECharts初体验—01...

需要到官网下载最新的版本的js文件(完整版),其实只有一个,但是你要想出来一些好看的效果就应该把主题也下载好。

地址:http://echarts.baidu.com/download.html

其实只需要4步就OK。

    1:划分一块区域用来显示图形;

    2:初始化echart插件;

    3:填充option中的数据data;

    4:加载,装配数据到echart。

这样就OK了。其实最难的不是使用,而是如何将这个插件和自己的后台联系起来,比如数据应该展示那些,如何将数据json化之后传递过来。如何实现异步等……

 

ECharts初体验—02...

下面是MVC中一个简单的页面,只是为了将图表先展示出来。


1 /// <summary>
2 /// 折线图
3 /// </summary>
4 /// <returns></returns>
5 public ActionResult Index()
6 {
7     return View();
8 }

 1 <h2>Index</h2>
 2 
 3 <div id="main" style="width: 600px;height:400px;"></div>
 4 @*引人外部JS文件,下面的vintage,dark是主题。*@
 5 <script src="~/Scripts/echarts/echarts.js"></script>
 6 <script src="~/Scripts/echarts/vintage.js"></script>
 7 <script src="~/Scripts/echarts/dark.js"></script>
 8 <script>   
 9     //第一步;
10     var myChart = echarts.init(document.getElementById(\'main\'), \'dark\');  //这就样
11     //第二步;
12   var  option = {
13         title: {
14             text: \'堆叠区域图\'
15         },
16       //气泡提示框,呈现更详细的数据。
17         tooltip: {
18             trigger: \'axis\'
19         },
20       //图例,表述数据和图表的关联
21         legend: {
22             data: [\'邮件营销\']
23         },
24       //辅助工具箱,如添加标线,框选缩放.
25         toolbox: {
26             feature: {
27                 saveAsImage: {}
28             }
29         },
30       //用于定义直角系的布局。
31         grid: {
32             left: \'3%\',
33             right: \'4%\',
34             bottom: \'3%\',
35             containLabel: true
36         },
37       //坐标系中的X轴--类目录
38         xAxis: [
39             {
40                 type: \'category\',
41                 boundaryGap: false,
42                 data: ["2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-23", "2016-10-24", "2016-10-25", "2016-10-26"]
43             }
44         ],
45       //坐标系中的Y轴--数据值
46         yAxis: [
47             {
48                 type: \'value\'
49             }
50         ],
51       //数据列表,一个图表可能包含多个系列,每一个系列可能包含多个数据。格式为json的形式。
52         series: [
53             {
54                 name: \'邮件营销\',
55                 type: \'line\',
56                 stack: \'总量\',
57                 areaStyle: { normal: {} },
58                 label: {
59                     normal: {
60                         show: true,
61                         position: \'top\'
62                     }
63                 },
64                 data: [23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222]
65             }          
66         ]
67     };
68     //第三步 使用刚指定的配置项和数据显示图表。
69   myChart.setOption(option);
70 </script>

其中的每一步都有解释,每一个名词都有各自的意义,大家可以了解下。至于每一个data,都是使用静态的json,后面会从后台传递数据。下面是这个的效果。

image

 

ECharts初体验—03...

其实上面的数据都是静态的,很好的实现。但是对于我们实际的项目中都是从数据库中取到的数据,不可能是静态的,此时我们就需要将其json化,进行一定的转换。把数据从后面传递到前台,在进行操作。

dataList类


1 public class DateList
2 {
3 
4     public IList<string> datetime { get; set; }
5 
6     public IList<int> ordernumber { get; set; }
7 }

控制器Controller


 

 1 [HttpGet]
 2 public ActionResult ZhiXian()
 3 {         
 4     return View();
 5 }
 6 [HttpPost, ActionName("ZhiXian")]
 7 public ActionResult ZhiXianPost()
 8 {
 9     var listData = new List<string>();
10     var datetimes = DateTime.Now.AddDays(1);
11     for (int i = 1; i <=15; i++)
12     {
13         listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));
14     }
15     listData.Reverse();
16     var aa = new int[] { 23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222 };
17     var data = new DateList()
18     {
19         datetime = listData,
20         ordernumber = aa,
21     };
22     return Json(new{status=1,result=data});
23 } 

视图View


 1 <h2>ZhiXian</h2>
 2 <div id="main" style="width: 800px;height:400px;"></div>
 3 @*引人外部JS文件*@
 4 <script src="~/Scripts/echarts/echarts.js"></script>
 5 <script src="~/Scripts/jquery-2.1.4.js"></script>
 6 <script src="~/Scripts/echarts/vintage.js"></script>
 7 <script src="~/Scripts/echarts/roma.js"></script>
 8 <script>
 9     // 基于准备好的dom,初始化echarts实例
10     var myChart = echarts.init(document.getElementById(\'main\'), \'roma\');  //这就
11     $.post("/Home/ZhiXian", function (response) {
12         if (response.status == 1) {
13             console.log(response.result.datetime);
14             console.log(response.result.ordernumber);
15             var option = {
16                 title: {
17                     text: \'近10天订单数量分析图\'
18                 },
19                 //气泡提示框,呈现更详细的数据。
20                 tooltip: {
21                     trigger: \'axis\'
22                 },
23                 //图例,表述数据和图表的关联
24                 legend: {
25                     data: [\'订单总量\']
26                 },
27                 //辅助工具箱,如添加标线,框选缩放.
28                 toolbox: {
29                     feature: {
30                         saveAsImage: {}
31                     }
32                 },
33                 //用于定义直角系的布局。
34                 grid: {
35                     left: \'3%\',
36                     right: \'4%\',
37                     bottom: \'3%\',
38                     containLabel: true
39                 },
40                 //坐标系中的X轴--类目录
41                 xAxis: [
42                     {
43                         type: \'category\',
44                         boundaryGap: false,
45                         data: response.result.datetime
46                     }
47                 ],
48                 //坐标系中的Y轴--数据值
49                 yAxis: [
50                     {
51                         type: \'value\'
52                     }
53                 ],
54                 //数据列表,一个图表可能包含多个系列,每一个系列可能包含多个数据。格式为json的形式。
55                 series: [
56                     {
57                         name: \'订单总量\',
58                         type: \'line\',
59                         stack: \'总量\',
60                         label: {
61                             normal: {
62                                 show: true,
63                                 position: \'top\'
64                             }
65                         },
66                         areaStyle: { normal: {} },
67                         data: response.result.ordernumber
68                     }
69                 ]
70             };
71             myChart.clear();
72             myChart.hideLoading();
73             //// 使用刚指定的配置项和数据显示图表。
74             myChart.setOption(option);
75         } else {
76             alert("图表请求不成功,请重新请求。");
77         }       
78     });
79 </script>

效果如下:

image

我们可以发现颜色和第二个的不一样,这个就是我们使用了主题,这个在获取dom元素的时候标记的。如下所示。

image

image

下面是一个饼状图的主要option,其余的不变;


 1 myChart.setOption({
 2         series: [
 3             {
 4                 name: \'访问来源\',
 5                 type: \'pie\',
 6                 radius: \'55%\',
 7                 data: [
 8                     { value: 400, name: \'搜索引擎\' },
 9                     { value: 335, name: \'直接访问\' },
10                     { value: 310, name: \'邮件营销\' },
11                     { value: 274, name: \'联盟广告\' },
12                     { value: 235, name: \'视频广告\' }
13                 ]
14             }
15         ]
16     });

image


我一直相信,只要我一直走,就一定可以到达。虽然我不知道要到那里去...

以上是关于百度EChart3初体验的主要内容,如果未能解决你的问题,请参考以下文章

vs code初体验

android studio下百度地图sdk的初体验

XSS初体验

JAVA 连接 ZooKeeper之初体验

ChatGPT-CURSOR(copilot)试用初体验

聚合类新闻client初体验