Angular echarts图表自适应屏幕指令

时间：2023-03-09 16:37:19
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，在[]里面依赖注入相关模块*/

相关文章