标签：
什么是echarts？这是官网：http://echarts.baidu.com/
简单的说就是百度提供的一些画图表的库，用它你可以简便的画出一些你想要的图表效果。
虽然蛮好用的，但对于不知道模块化的新手（比如说我~）感觉不是很好入门，我这里大概梳理一下我的认知吧，希望能帮助到内些想尝试echarts的人。
我们就以echarts首页的教程为例（其实人家已经写的很好了）:http://echarts.baidu.com/doc/start.html
我直接粘一段里面的代码：
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置（第一段） require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist‘ } }); // 使用（第二段） require( [ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(‘main‘)); var option = { tooltip: { show: true }, legend: { data:[‘销量‘] }, xAxis : [ { type : ‘category‘, data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : ‘value‘ } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>
大家可以看到路径配置和使用里面都有”require“，这就是模块化的东西。echarts为啥要用模块化?因为你可能在一个js里用到多个js。比如你想在一个页面上显示多个图表，柱图，饼图，折线图等等，
你需要把这些js都加载进来（每种图的js都是独立的）。而加载多个js很费时间，模块化的好处是，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。而且同一管理
js，更有调理性。
其实上面代码中的两个”require“是干啥的已经注释的很清楚了。其实就是先总体上配一下路径，然后再根据配的路径加载需要的js进行使用。
我们先来看看第一个require：
require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist‘ } });
首先看这句路径的设置，你可以理解为把那一长串路径用一个变量”echarts“代表了。设置路径有利于简化之后的加载，如果你不设置路径可能是这样的：
// 加载一堆水果 require([‘common/fruits/apple‘, ‘common/fruits/orange‘, ‘common/fruits/grape‘, ‘common/fruits/pears‘], function(Apple, Orange, Grape, Pears){ // do sth });
你设置路径之后就是这样的:
requirejs.config({ paths: { fruits: ‘common/fruits‘ } }); // 加载一堆水果 require([‘fruits/apple‘, ‘fruits/orange‘, ‘fruits/grape‘, ‘fruits/pears‘], function(Apple, Orange, Grape, Pears){ // do sth });
你还可以设置一个baseUrl来限定这些路径的先前路径（比如你这些js都放在一个叫”js“的文件夹下面）
requirejs.config({ baseUrl: ‘js‘, paths: { fruits: ‘common/fruits‘ } });
明白了路径的设置以后我们再来看第二段,我简写一下：
require( [ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载 ], function (ec){ //do sth }) ;
这段代码就是加载js，然后在回调函数中使用它们。由于我们刚才已经设置了路径，所以这里加载的两个js的路径其实是：
http://echarts.baidu.com/build/dist/echarts.js(我试了改成‘echarts/echarts‘也一样，至于为什么加载两遍我觉得是第一遍需要require相关的支持，第二遍就是回调函数里要用到）
http://echarts.baidu.com/build/dist/chart/bar.js
这里的js后缀是会帮你自动补上的，你自己加了反而会出错，它会以为你不想使用设置的路径，之后的回调函数的参数就是你加载的js模块。
回调函数中 var myChart = ec.init(document.getElementById(‘main‘)); 这句就是对echarts对象的实例化。
option你可以理解为为加载的图表设置参数，最后用 myChart.setOption(option); 将实例化的对象和设置的参数绑定。
其实echarts一些简单的使用就是一下这么个流程：
1.echarts单文件引入
2.用require.config配置路径
3.用require加载你要用的js（按需加载）
在回调函数中:
4.实例化echarts对象
5.依照自己的数据给option设置参数
6.将echarts对象和option绑定，加载数据
大功告成。但其实模块不是光有require的，require只是使用，还需要define来定义模块才行，你可以看一下echarts的那些图表库源码，都是用define包裹住的。
想要了解更多模块化可以看 requireJS官网：http://www.requirejs.cn/
还有就是要想下载echarts用的记得搭服务器，本地的请求是不安全的。
标签：
原文地址：http://www.cnblogs.com/maskmtj/p/4801928.html
