又是一年双十一，广大单身狗们有没有很寂寞(好把，其实我也是)！但是这次的双十一，我不再孤单，因为结识了一个js的强大的图表库---ECharts。

　　最近做软件工程项目的时候，由于设计图中有柱状图和饼图的设计，第一反应用原生js写肯定很麻烦，于是我请求能否不做，但我们的PM铁了心要做，最终逼迫我找到了这个强大的图表库，哈哈，在这里感谢一下PM李佳玮。(当我发现它还兼容IE6-8时，真的炒鸡感动!)

　　 ECharts提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

　　废话不多说，马上进入ECharts的使用吧。

　　首先我们进入ECharts的官网http://echarts.baidu.com/index.html(向百度前端团队致敬)，进去以后下载ECharts。

　　下载好的目录:

　　　　

　　初学的话我们只要把目光放在build文件上，这里面包含了我们制作图表所需的相关资源文件。

　　引入ECharts包有三种方式，官方文档中有三种方式的具体介绍http://echarts.baidu.com/doc/doc.html#引入ECharts。

　　这里我采用官方推荐的模块化单文件引入,首先需要熟悉模块化开发。ECharts是一个符合AMD规范的模块加载器，AMD规范相信大家都不陌生，它是javascript客户端(就是浏览器上)的开发规范，而Node.js有CommonJs开发规范。如果不是很了解AMD规范可以参考一下文章:

　　AMD---浏览器中的开发规范http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.html

　　

　　好，接下来我会展示具体的引入写法:

<!doctype html>

<html lang="zh-cn">

<head>

	<meta charset="utf-8">

</head>

<body>

	<div id="main" style="height:300px;"></div>

	<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>

	<script type="text/javascript">

		require.config({

			paths : {

                                // 这里载入相对路径

				echarts : "echarts/build/dist"

			}

		});

		require(

			[

                                // 这里的echarts代表的是paths中的路径

				"echarts",

				"echarts/chart/bar"

			],
　　　　　　　　　　　　　　// 回调函数

			function(ex){

			}

		);

	</script>

</body>

</html>

　

　　js中require()表示要创建一个图标的请求，首先要列出所需图表库的资源，这里是要载入bar.js文件，因此需要引入模块"echarts/chart/bar"。在ECharts中还有很多种图表，比如pie(饼图)，map(地图)等等。

　　现在我们已经加载了我们需要的图类，接下来要做的事很简单---插入对应图类所需组件。

　　

<!doctype html>

<html lang="zh-cn">

<head>

	<meta charset="utf-8">

</head>

<body>

	<div id="main" style="height:300px;"></div>

	<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>

	<script type="text/javascript">

		require.config({

			paths : {

				echarts : "echarts/build/dist"

			}

		});

		require(

			[

				"echarts",

				"echarts/chart/pie"

			],

			function(ec){

				var myChart=ec.init(document.getElementById("main"));

				var option = {

					title :{

						text : "查看企业各部门报销",

						x : "center"

					},

					tooltip : {

						trigger : "item",

						formatter : "{a} <br/> {b} : {c} ({d}%)"

					},

					legend : {

						orient : "vertical",

						x : "left",

						data : ["part1","part2","part3","part4"]

					},

					toolbox : {

						show : true,

						feature : {

							//mark : {show : true},

							//dataView : {show : true,readOnly : false},

							restore : {show : true}

							//saveAsImage : {shwo :true}

						}

					},

					calculable : false,

					series : [

						{

							name : "饼图实例",

							type : "pie",

							radius : "55%",

							center : ["50%","60%"],

							data : [

								{value:100,name:"part1"},

								{value:200,name:"part2"},

								{value:300,name:"part3"},

								{value:400,name:"part4"}

							]

						}

					]

				};

				myChart.setOption(option);

			}

		);

	</script>

</body>

</html>

　　可以看到require()的第二个参数是个function(){}，这里应该是个回调函数，等待资源加载好后执行，这个函数中提供了创建图表所需要的信息:

　　首先要获取到需要被创建的对象，这里用DOM方法取到。

　　其次把数据集用类似json的形式存放到option中，最后传入到要被创建的对象中。

　　可以看到Option对象中的子对象，都携带了不同的信息，比如标题title，提示框(tooltip)等等，更多的组件信息可以在官方文档中查看

　　http://echarts.baidu.com/doc/doc.html#选项

　　最后打开浏览器就可以欣赏到一个简单的利用ECharts的图表了:

　　

　　

　　当我打开的时候还看到了很多动态的好玩的效果，都值得我们去研究。

　　不过框架毕竟是框架，希望大家在学习框架前一定要学好原生js~这样用起这些框架起来才会得心应手！

　　　

　　

　　

　　

双11不再孤单，结识ECharts---强大的常用图表库的更多相关文章

  1. ECharts插件介绍（图表库）

    ECharts是一个非常好用的插件,用于进行 树状图,折线图,饼图,地图等等,系列视图的绘制.(详情看官网) 了解: AMD:模块化开发方式: 引入文件后:console.log(echarts) / ...

  2. ECharts一个强大的商业产品图表库

    Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...

  3. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  4. ECharts（Enterprise Charts 商业产品图表库）初识

    一.简介 大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了. ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript ...

  5. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

  6. 双11遇上ZBrushCore，如此优惠还等什么！

    对不起!让大家久等了,ZBrush简体中文版ZBrushCore这次是真的来了,恰逢双11,老板说了,钱不是问题,你们开心就好,特别是热爱3D的单身狗们!你们那么热爱这个行业,1099元/套终身授权使 ...

  7. 订单峰值激增 230%，Serverless 如何为世纪联华降本超 40%？｜双11 云原生实践

    作者 | 朱鹏 导读:2020 年 双11,世纪联华基于阿里云函数计算 (FC) 弹性扩容,应用于大促会场 SSR.线上商品秒杀.优惠券定点发放.行业导购.数据中台计算等多个场景,业务峰值 QPS 较 ...

  8. 我们知道CDN护航了双11十年，却不知道背后有那么多故事……

    情不知如何而起,竟一往情深.恰如我们.十年前,因为相信,所以看见.十年后,就在眼前,看见一切. 当2018天猫双11成交额2135亿元的大屏上,打出这么一段字的时候,参与双11护航的阿里云CDN技术掌 ...

  9. 深入探访支付宝双11十年路，技术凿穿焦虑与想象极限 | CYZONE特写

    小蚂蚁说: 双11十年间,交易规模的指数级增长不断挑战人们的想象力,而对蚂蚁技术团队来说,这不仅是一场消费盛宴,而是无数次濒临压力和焦虑极限的体验,更是技术的练兵场.如今双11对蚂蚁金服而言,已经绝不 ...

随机推荐

  1. WisDom.Net 框架设计(五) 权限设计

    WisDom.Net --权限设计 1.需求分析     基本在所有的管理系统中都离不开权限管理.可以这么说,权限管理是管理系统的核心所在. 权限管理说白一些就是每个人能够做什么,不能够做什么.可以说 ...

  2. [访问系统] C#计算机信息类ComputerInfo （转载）

    下载整个包,只下载现有类是不起作用的 http://www.sufeinet.com/thread-303-1-1.html 点击此处下载 using System; using System.Man ...

  3. StarUML启动时候出现"System Error. Code:1722. RPC服务器不可用."错误的解决办法

    StarUML是用得很顺手的UML工具,但是启动时候每次都会出现"System Error. Code:1722. RPC服务器不可用."错误. 一般来说这个应该是某个Window ...

  4. while loading persisted sessions 异常解决方法

    一直用tomcat一段时间都正常无事,最近一次启动tomcat就发生以下异常: 严重: IOException while loading persisted sessions: java.io.EO ...

  5. C++Primer学习笔记(二、基础)

    1.两种初始化方式,直接初始化语法更灵活,且效率更高. ); // 直接初始化 direct-initialization ; // 赋值初始化 copy-initialization 2.const ...

  6. Js浏览器对象

    Js浏览器对象——window对象 1.window对象: (1)window对象是BOM的核心,window对象指当前的浏览器窗口. (2)所有的JavaScript全局对象.函数以及变量均自动成为 ...

  7. ACM Sdut 2158 Hello World!(数学题,排序) (山东省ACM第一届省赛C题)

    题目描述 We know thatIvan gives Saya three problems to solve (Problem F), and this is the firstproblem. ...

  8. ACM hdu 1019 Least Common Multiple

    Problem Description The least common multiple (LCM) of a set of positive integers is the smallest po ...

  9. umask默认权限分配

    umask默认权限分配的命令 当我们登录系统之后创建一个文件总是有一个默认权限的,那么这个权限是怎么来的呢?这就是umask干的事情.umask设置了用户创建文件的默认 权限,它与chmod的效果刚好 ...

  10. 我的Hibernate入门

    今天忙了一整天,终于搭建好了我的第一个Hibernate程序,中间关于hibernate.cfg.xml的问题搞了半天,不过最后还是搞明白了,下面来讲一讲过程. 首先在你的eclipse中安装Hibe ...