这个开源的图标库来自百度EFE数据可视化团队。Highcharts 与之比起来简直不能看啊，人家做一个图表都开始往大数据方面思考了，你还在做功能，这产品差距就不是一个数量级的。 这里就不多废话：
Echarts 首页：http://echarts.baidu.com/index.html
特性：http://echarts.baidu.com/doc/feature.html
不贴地址了，想要了解的看一下特性就好了，想要入门的继续往下看。
ECharts 底层依赖于 Html5 的轻量级的Canvas类库ZRender ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，
初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：
1、AMD规范的加载器——esl.js，这是什么？
答：关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程（二）：AMD规范 简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。
2、我们先来看一下echart的大概的包：
echarts.js : 经过压缩，包含除地图外的全部图表 echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表 echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据 echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据看得出，这种分类非常有意义。
3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。
关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？
答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）
4、require.config的作用是什么？
答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。
5、解释一下require方法？
答：require方法有2个参数。
第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！
第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。
OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）
因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。
6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：
（1）、标签式单文件引入.html：
01.
<!DOCTYPE html>
02.
<head>
03.
<meta charset='utf-8'>
04.
<title>ECharts</title>
05.
</head>
06.
<body>
07.
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
08.
<div id='main' style='height:400px'></div>
09.
<!-- ECharts单文件引入 -->
10.
<script src='js/echarts-all.js'></script>
11.
<script type='text/javascript'>
12.
// 基于准备好的dom，初始化echarts图表
13.
var myChart = echarts.init(document.getElementById('main'));
14.
15.
var option = {
16.
tooltip: {
17.
show: true
18.
},
19.
legend: {
20.
data:['销量']
21.
},
22.
xAxis : [
23.
{
24.
type : 'category',
25.
data : ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
26.
}
27.
],
28.
yAxis : [
29.
{
30.
type : 'value'
31.
}
32.
],
33.
series : [
34.
{
35.
'name':'销量',
36.
'type':'bar',
37.
'data':[5, 20, 40, 10, 10, 20]
38.
}
39.
]
40.
};
41.
42.
// 为echarts对象加载数据
43.
myChart.setOption(option);
44.
</script>
45.
</body>
（2）、模块化包引入.html，这个就需要用到2个src文件。
01.
<!DOCTYPE html>
02.
<head>
03.
<meta charset='utf-8'>
04.
<title>ECharts</title>
05.
<!--从当前页面，引入模块加载器esl.js-->
06.
<script src='js/esl.js'></script>
07.
</head>
08.
<body>
09.
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
10.
<div id='main' style='height:400px'></div>
11.
<script type='text/javascript'>
12.
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
13.
require.config({
14.
packages: [
15.
{
16.
name: 'echarts',
17.
location: 'js/src',
18.
main: 'echarts'
19.
},
20.
{
21.
name: 'zrender',
22.
location: 'js/zrender/src',
23.
main: 'zrender'
24.
}
25.
]
26.
});
27.
28.
// 使用
29.
require(
30.
[
31.
],
32.
function (ec) {
33.
// 基于准备好的dom，初始化echarts图表
34.
var myChart = ec.init(document.getElementById('main'));
35.
36.
var option = {
37.
tooltip: {
38.
show: true
39.
},
40.
legend: {
41.
data:['销量']
42.
},
43.
xAxis : [
44.
{
45.
type : 'category',
46.
data : ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
47.
}
48.
],
49.
yAxis : [
50.
{
51.
type : 'value'
52.
}
53.
],
54.
series : [
55.
{
56.
'name':'销量',
57.
'type':'bar',
58.
'data':[5, 20, 40, 10, 10, 20]
59.
}
60.
]
61.
};
62.
63.
// 为echarts对象加载数据
64.
myChart.setOption(option);
65.
}
66.
);
67.
</script>
68.
</body>
（3）、模块化单文件引入.html
01.
<!DOCTYPE html>
02.
<head>
03.
<meta charset='utf-8'>
04.
<title>ECharts</title>
05.
<!--从当前页面，引入模块加载器echarts.js-->
06.
<script src='js/echarts.js'></script>
07.
</head>
08.
<body>
09.
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
10.
<div id='main' style='height:400px'></div>
11.
<script type='text/javascript'>
12.
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
13.
require.config({
14.
paths:{
15.
'echarts' : 'js/echarts',
16.
17.
}
18.
});
19.
20.
// 使用
21.
require(
22.
[
23.
'echarts',
24.
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
25.
],
26.
function (ec) {
27.
// 基于准备好的dom，初始化echarts图表
28.
var myChart = ec.init(document.getElementById('main'));
29.
30.
var option = {
31.
tooltip: {
32.
show: true
33.
},
34.
legend: {
35.
data:['销量']
36.
},
37.
xAxis : [
38.
{
39.
type : 'category',
40.
data : ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
41.
}
42.
],
43.
yAxis : [
44.
{
45.
type : 'value'
46.
}
47.
],
48.
series : [
49.
{
50.
'name':'销量',
51.
'type':'bar',
52.
'data':[5, 20, 40, 10, 10, 20]
53.
}
54.
]
55.
};
56.
57.
// 为echarts对象加载数据
58.
myChart.setOption(option);
59.
}
60.
);
61.
</script>
62.
3663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
