angularjs引入echarts包_AngularJS整合Echarts做饼图

还记Angularjs指令怎样传递函数参数吗？我们将表格封装成了一个指令。如果不封装就没有传递函数参数的问题了吗？我们要重申的是，封装是必要的，封装可以复用代码。试想，如果在再加入一个图表，要求也可以按时间段下钻。如果不封装的话，下钻这块实现要写两次。而且真实场景多数是表格图表都会的。所以说还是封装成组件好。

看一下最终效果：https://codepen.io/riafan/pen/VXvdjZ。在前面我们已经将下钻功能放父作用域中，现在只用自定义图表组件，就可以通过指令中传递函数参数的方式调用父作用域中的下钻逻辑。看代码：

很简单吧？剩下的工作就是实现echarts插件的AngularJS版本。Echats是Enterprise Charts的缩写，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器。此处我们把问题简化，只封装饼图。其实就是AngularJS整合第三方库Javasctipt。

AngularJS把Javascript的context分隔成两部分，一部分是原生的Javascript的context，另一部分是AngularJS的context。只有处在AngularJS的context中的操作才能享受到Angular的data-binding、exception handling、$watch等服务，但是对于外来者(如原生的Javascript操作、自定义的事件回调、第三方的库等)Angular也不是一概不接见，可以使用AngularJS提供的$apply()函数将这些外来者包进AngularJS的context中，让Angular感知到他们产生的变化。如下面代码：

angular.module('myApp')