var roomPercentChart = echarts.init(document.getElementById('room_percent'));
function ajaxGetRoomPercent() {
// 基于准备好的dom,初始化echarts实例
$.ajax({
url: "ajaxGetRoomPercent",
data: {},
type: "POST",
dataType: "json",
success: function (res) {
// 指定图表的配置项和数据
var option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '房间使用量',
type: 'gauge',
detail: {formatter: '{value}%'},
data: [{value: res.data, name: '已使用'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
roomPercentChart.setOption(option,true);
}
}); } // 避免尺寸变窄
setInterval(function () {
if ($("#room_percent").width() != $("#room_percent canvas").width() && $("#room_percent canvas").width() < $("#room_percent").width()) {
// myChart.resize();
roomPercentChart.resize();
}
}, 100); ajaxGetRoomPercent();
myChart.resize();

定时检查宽度,如果不一致,并且太小的话,就resize重置一下。

ECharts 避免变窄的更多相关文章

  1. echarts数据变了不重新渲染,以及重新渲染了前后数据会重叠渲染的问题

    1.echarts数据变了但是视图不重新渲染 新建Chart.vue文件 <template>  <p :id="id" :style="style&q ...

  2. PN结加正向偏置电压 其空间电荷区为何变窄

    理论基础:导体是内部具有较多可以自由移动的电荷的物体. 绝缘体是内部没有或者有很少可以自由移动的电荷的物体. +代表空穴带正电 -代表电子带负电 两竖线之间表示无自由移动电子或空穴部分,相当于绝缘体 ...

  3. war 宽度变窄

    1.打开开始菜单-运行-输入Regedit 打开注册表编辑器 展开 HKEY_CURRENT_USER 继续展开 Software继续展开 Blizzard Entertainment 在Warcra ...

  4. [改善Java代码]警惕泛型是不能协变和逆变的

    什么叫做协变(covariance)和逆变(contravariance)? 在变成语言的类型框架中,协变和逆变是指宽类型和窄类型在某种情况下(如参数,泛型,返回值)替换或交换的特性,简单的说,协变是 ...

  5. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  6. webpack打包性能优化

    1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...

  7. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  8. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  9. 前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

随机推荐

  1. 理解JPA注解@GeneratedValue的使用方法

    https://blog.csdn.net/u012838207/article/details/80406716 一.JPA通用策略生成器 通过annotation来映射hibernate实体的,基 ...

  2. 13.go内置的rate包学习1

    package main import ( "context" "fmt" "golang.org/x/time/rate" "l ...

  3. Python I/O编程 --读写文件、StringIO/ BytesIO

    I/O编程 Input/Output  输入/输出 Stream(流)是一个很重要的概念,可以把流想象成一个水管,数据就是水管里的水 Input Stream就是数据从外面(磁盘.网络)流进内存,Ou ...

  4. 中国大学生计算机系统与程序设计竞赛 CCF-CCSP-2017 串行调度(serial)

    串行调度(serial) 除等价条件, 根据题意设置限制条件,然后求字典序最小拓扑序. 简洁版 #include<bits/stdc++.h> using namespace std; ; ...

  5. proxmox之cloud-init

    Cloud-Init支持 Cloud-Init是事实上的多分发包,它处理虚拟机实例的早期初始化.使用Cloud-Init,可以在虚拟机管理程序端配置网络设备和ssh密钥.当VM首次启动时,VM内的Cl ...

  6. 为什么 Redis 单线程能支撑高并发?

    阅读本文大概需要 4 分钟. 作者:Draveness 最近在看 UNIX 网络编程并研究了一下 Redis 的实现,感觉 Redis 的源代码十分适合阅读和分析,其中 I/O 多路复用(mutipl ...

  7. leetcode:146. LRU缓存机制

    题目描述: 运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 ( ...

  8. asp.net core 托管到windows服务,并用iis做反向代理

    使用NSSM把.Net Core部署至 Windows 服务   为什么部署至Windows Services 在很多情况下,很少会把.Net Core项目部署至Windows服务中,特别是Asp.n ...

  9. SpringBoot——配置文件加载位置及外部配置加载顺序

    声明 本文部分转自:SpringBoot配置文件加载位置与优先级 正文 1. 项目内部配置文件 spring boot 启动会扫描以下位置的application.properties或者applic ...

  10. Anaconda更新失败简单解决[CondaHTTPError: HTTP 000 CONNECTION FAILED for url]

    问题:conda无法安装更新,报错内容如下:参考链接:conda httperror http none none for url none Anaconda更新失败 conda create -n ...