Angular echarts图表自适应屏幕指令

关于echarts图表自适应问题

一、引入js文件

1. 在html页面引入angular.min.js文件
2. 在html页面引入echarts.min.js文件
3. 在html页面引入app.js文件
4. 在html页面引入directive.js文件
5. 来源：http://www.bootcdn.cn
6. 引入方式举例：<script src="js/plugins/echarts/echarts.min.js"></script>
7. 备注：src="js/plugins/echarts/echarts.min.js"，其中src=""里面对应的是本地echarts.min.js文件所在目录结构；

二、html页面定义容器

 <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
     <!--图形容器-->
     <div id="previewChart" resize></div>
     </div>
 </div>

**注意**：
1. id="previewChart"属性不可缺少，后面会获取容器id，重新绘图；
2. resize 标签不可缺少，angular框架下，这是一个自定义的指令标签，会调用directive.js文件里面名字叫"resize"的指令；

三、directive.js文件添加自定义指令

• 声明指令模块，自定义resize指令（监听图形容器变化，重新绘图）

 angular.module('iManager.directive', []).directive('resize', function ($window) {
     return function (scope, element) {
         //获取标签的id属性值
         var id = element[0].id;
         var w = angular.element($window);
         scope.getWindowDimensions = function () {
             return {
                 'h': w.height(),
                 'w': w.width()
             };
         };
         scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
             //获取新窗口的宽度和高度
             scope.windowHeight = newValue.h;
             scope.windowWidth = newValue.w;
             //获取容器，重新绘图
             var ele = document.getElementById(id);
             var pieChart = echarts.init(ele);
             pieChart.resize();
         }, true);
         w.bind('resize', function () {
             //页面脏检查
             scope.$apply();
         });
     }
 })

四、模块声明和依赖注入

 /** app.js文件 **/
 var iManager=angular.module("iManager",['iManager.directive'])
 /*备注：模块声明，模块名：iManager，在[]里面依赖注入相关模块*/