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页面定义容器

1 <div class="row">
2     <div class="col-md-12 col-sm-12 col-xs-12">
3     <!--图形容器-->
4     <div id="previewChart" resize></div>
5     </div>
6 </div>

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

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

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

 1 angular.module('iManager.directive', []).directive('resize', function ($window) {
 2     return function (scope, element) {
 3         //获取标签的id属性值
 4         var id = element[0].id;
 5         var w = angular.element($window);
 6         scope.getWindowDimensions = function () {
 7             return {
 8                 'h': w.height(),
 9                 'w': w.width()
10             };
11         };
12         scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
13             //获取新窗口的宽度和高度
14             scope.windowHeight = newValue.h;
15             scope.windowWidth = newValue.w;
16             //获取容器，重新绘图
17             var ele = document.getElementById(id);
18             var pieChart = echarts.init(ele);
19             pieChart.resize();
20         }, true);
21         w.bind('resize', function () {
22             //页面脏检查
23             scope.$apply();
24         });
25     }
26 })

 

四、模块声明和依赖注入

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

 

 

 

 

转载于:https://www.cnblogs.com/mycnblogs-guoguo/p/9704932.html