百度EChart3初体验

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

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

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

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

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,后面会从后台传递数据。下面是这个的效果。

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>


效果如下:

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

下面是一个饼状图的主要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     });




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

时间: 2024-10-11 04:10:30

百度EChart3初体验的相关文章

leaflet开源地图库源码阅读笔记(一)——简介&amp;Demo初体验(by vczero)

一.简介 电子地图已经在O2O.生活服务.出行等领域布局,传统的GIS也孕育着互联网基因.传统GIS的图商有ESRI(Arc系列).四维.高德.超图.中地等等.在web互联网领域,百度和高德较为出色.但是开放源代码都远远做的不够,相比而言国外开源较多且丰富,最近认真研读了openlayers2/3和leaflet的源码,收获颇多,不仅加强对浏览器兼容性.HTML5.CSS3等基础,还增强了GIS的基础.本人现在也在一家互联网公司做js api的研发,因此,需要不断地吸取开源代码的营养. leaf

树莓派2代B model 上手初体验,不用显示器,Python GPIO 点亮一颗LED

开题:[好东西,值得研究!] 标题:树莓派2代B model 上手初体验,不用显示器,Python GPIO 点亮一颗LED [知识普及] 1,树莓派各版本对比: 2,树莓派2代BModel 主板,图样 树莓派2 代B GPIO 图 [所需硬件] 一张TF卡,8G或者8G以上,我的是 [三星TF卡16g class10 EVO] 一根网线,让树莓派与路由器连接 一个5V 500MA 的普通USB电源,为树莓派供电 ,我试过了,5V 500ma没问题 一个树莓派2代B 一个普通路由器[如果你连路由

SSH初体验系列--Hibetnate--2--crud操作

Ok,今天比较详细的学习一下hibernate的C(create).R(read).U(update).D(delete) 相关api... 前言 Session: 是Hibernate持久化操作的基础,提供了众多的数据库操作方法,如save(),update(),delete()...etc,用于完成对象的增加,修改,删除等方法. 后面代码中使用到的HinernateUtil类:是用于构建SessionFactory(Hibernate提供的获取session的工厂类)的一个封装类,在前面的文

人工智能初体验(二):开发简单的图灵智能聊天工具

前言:这里为了有更好的个性化设置,因此我选择了图灵机器人(http://www.tuling123.com/)的接口,使用方法跟上一篇中使用百度的接口是差不多的. 注:文末有打包好的小软件和完整源代码的下载链接 一 API Key申请 申请地址:http://www.tuling123.com/ 中间的注册登录过程不说,最后把API Key值记录下来 二 核心功能开发 这个小项目的目录结构: 核心功能文件TuringRobot.java,代码很简单,一看就明白,代码如下: package act

安全初体验

最近尝试在几个高校跟各个学生来讲安全入门的一些东西,我把这个称谓安全初体验,我说是从抓肉鸡开始,但是讲完后,同学们都一脸茫然,不知道我说的是什么,可能是我的入口点没有找对,那么我现在就将网络上以及一些自己整理的安全入门的东西分享给大家,希望能够对想进入这个行业的同学一点帮助吧. 首先进入这个行业,我们需要一个背影,看着这个背影来不断的成长,给我们精神上的支持和寄托,因为这个行业的门槛相对还是比较高的,有了这个背影,我们才能够在每一个孤单寂寞的夜里,不断的坚持前行,永不放弃.我想每个在这个行业坚持

聚合类新闻客户端初体验

初体验的产品:今日头条(ios3.6).百度新闻(ios4.4.0).ZAKER(ios4.4.5).鲜果(ios3.8.7).中搜搜悦(ios4.0.1).Flipboard(ios2.3.9) 1.Flipboard 一款国外很火的app,UI以及体验都做得非常不错,很多人都评论其不接地气,在我看来,这确实是一方面,另外,大陆防火长城也有一部分原因,毕竟外来的互联网产品很难在国内扎根. 初体验: 1).首次启动加载速度太慢,用户没有那么多的耐心去使用第一次接触的产品: 2).手指上下滑动更换

wxWidgets初学者导引(3)——wxWidgets应用程序初体验

wxWidgets初学者导引全目录   PDF版及附件下载 1 前言2 下载.安装wxWidgets3 wxWidgets应用程序初体验4 wxWidgets学习资料及利用方法指导5 用wxSmith进行可视化设计附:学习材料清单 3 wxWidgets应用程序初体验 本文中所有的体验,在Code::Blocks中进行. 为了在Code::Blocks中编译运行C++写的wxWidgets程序,需要再做些设置. 首先,需要在环境变量里添加一个wxWidgets根目录环境变量.设置方法类似于2.3

聚合类新闻client初体验

初体验的产品:今日头条(ios3.6).百度新闻(ios4.4.0).ZAKER(ios4.4.5).鲜果(ios3.8.7).中搜搜悦(ios4.0.1).Flipboard(ios2.3.9) 1.Flipboard 一款国外非常火的app,UI以及体验都做得非常不错,非常多人都评论其不接地气,在我看来.这确实是一方面,另外.大陆防火长城也有一部分原因,毕竟外来的互联网产品非常难在国内扎根. 初体验: 1).首次启动载入速度太慢.用户没有那么多的耐心去使用第一次接触的产品. 2).手指上下滑

第66讲:Scala并发编程实战初体验及其在Spark源码中的应用解析

王家林亲授<DT大数据梦工厂>大数据实战视频“Scala深入浅出实战经典”视频.音频和PPT下载!第66讲:Scala并发编程实战初体验及其在Spark源码中的应用解析百度云:http://pan.baidu.com/s/1pJ5jzHx腾讯微云:http://url.cn/aSawrm360云盘:http://yunpan.cn/cctL3QYACaVNa  访问密码 c0fb 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark