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，在[]里面依赖注入相关模块*/