通过npm引入的echart目录_EChart 2升级EChart 3注意事项

本文是根据自己的实践进行总结过来的，是不完全的所有升级注意事项。

如果想直接看结果，请移步到第4部分内容

1.背景

EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总结如下：

1) 支持了直角坐标系(catesian，同 grid)、极坐标系(polar)、地理坐标系(geo)

2) 移动端的优化,说明白就是将源码体积减小

3) 新增更多图表类型，增加了一些动态效果

4) 更丰富的交互模式

5) EChart 2推荐使用模块化单文件引入，EChart 3可以选择独立文件或者在webpack中使用模块化(在第2部分说明)

6) 异步数据加载与更新(在第3部分说明)。

2 模块/非模块

2.1 EChart 2模块化引入

EChart 2自带有模块化机制，不用使用其它AMD/CMD库就可以require进来echarts提供的模块

EChart 2 引入进来的目录结构：

示例代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

ECharts

// 路径配置

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