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

Angular echarts图表自适应屏幕指令的更多相关文章

  1. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  2. echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  3. echarts 图表自适应外部盒子大小

    项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小 页面中有一个[放大.缩小]功能,及全屏展示和预览图表 窗口自适应 let m ...

  4. 一起来玩echarts系列(二)------echarts图表自适应问题

    为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...

  5. 多个echarts图自适应屏幕大小

    当一个echarts图时,可以这样做 //下面my_charts是html中echarts的ID var myChart= echarts.init(document.getElementById(& ...

  6. echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起

    <div  id="chartContainer" style="height:100%;width:100%;"></div> cha ...

  7. echarts图表自适应

    当页面上只引入一个图表 window.onresize= () =>{ myEchart.resize() } 当引入多个时,上面的方法只会影响最后一个图表 window.addEventLis ...

  8. angular2项目关于Echarts图表的处理

    在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...

  9. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

随机推荐

  1. UPX源码分析——加壳篇

    0x00 前言 UPX作为一个跨平台的著名开源压缩壳,随着Android的兴起,许多开发者和公司将其和其变种应用在.so库的加密防护中.虽然针对UPX及其变种的使用和脱壳都有教程可查,但是至少在中文网 ...

  2. Yii2框架 数据库常用操作

    通用: use yii\db\Query; $query = new Query(); 查询: Query: $rows = (new \yii\db\Query()) ->select(['c ...

  3. 在centos使用redis几个坑

    问题来源 最近公司的平台需要做一些分布式的规划,其中会话我们打算用redis来存储,因为之前也有了解过redis,但都是在windows上使用,为了发挥redis的优势,这次我们打算直接在Linux上 ...

  4. Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.

    Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.的错误,只需要执行以下三条命令. systemctl unmask docke ...

  5. python安装mysqlclient模块报fatal error: Python.h:解决方法

    在搭建Flask框架安装mysqlclient模块时候老是报fatal error: Python.h:错误,折腾老半天,百度了老半天看了不少大神帖子,就是没解决, 后来发现这不是个BUG,都是自己的 ...

  6. asp.net core中遇到需要自定义数据包解密方法的时候

    最近将公司的项目用.netcore重写, 服务的http外部接口部分收发消息是DES加解密的, 那么在asp.net core mvc的action处理之前需要加入解密这个步骤. 我第一想到的是用fi ...

  7. 阿里Java开发规范&谷歌Java开发规范&华为Java开发规范&Tab键和空格比较&Eclipse的Tab键设置 总结

    现在收集到如下有用的信息: 阿里巴巴公开的Java开发规范:https://yq.aliyun.com/articles/69327?utm_content=m_10088 google公开的Java ...

  8. Hadoop环境搭建及wordcount程序

    目的: 前期学习了一些机器学习基本算法,实际企业应用中算法是核心,运行的环境和数据处理的平台是基础. 手段: 搭建简易hadoop集群(由于机器限制在自己的笔记本上通过虚拟机搭建) 一.基础环境介绍 ...

  9. [个人项目] 使用 Vuejs 完成的音乐播放器

    Foreword 虽然音乐播放这类的项目的静态展示居多,业务逻辑并不复杂,但是对于我这种后端出身的前端萌新来说,能使用vuejs完成大部分功能, 也会有许多收获. api:我使用的是一个开源的 nod ...

  10. 全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比(图文详解)

    不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 安装Hue后的一些功能 ...