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. strings命令(转)

    以前我用strings命令的频率不高, 现在越用越顺手, 而且已经是离不开strings命令了.虽然以前说过strings命令, 但今天还是要说. 主要是两大用途, 下面来说明一下: 一. 确认代码编 ...

  2. JavaScript 中 call()、apply()、bind() 的用法

    "use strict"; ; var obj = { name:'小李', age:, getInfo(from, to) { console.log(arguments) co ...

  3. 洛谷p2370yyy2015c01的U盘题解

    没什么特殊的想法 就是看自己很久没有更新关于题解类的文章了而已 (其实这是我好久之前做的, 只是把它从洛谷博客搬到了这里而已) 题目 首先分析题目要二分 他长成这个亚子太二分了 所以就要二分 最好是先 ...

  4. 第01组 Alpha冲刺(1/6)

    队名:007 组长博客: https://www.cnblogs.com/Linrrui/p/11845138.html 作业博客: https://edu.cnblogs.com/campus/fz ...

  5. Fluent的summary功能

    在Fluent计算当中,出现错误,大家经常在求助的时候问得很笼统和宽泛,这里介绍一下Fluent的summary功能,大家可以在求助的时候附上生成的文件,这样更加便于别人帮助你发现问题 然后在算例目录 ...

  6. 使用MeadCo's ScriptX控件做WEB打印

    官方网址:http://www.meadroid.com/scriptx/index.asp MeadCo's ScriptX控件有两种使用方式,一种是做为免费版本使用,一种是做为收费版本使用,免费版 ...

  7. mvel语法指南[翻译]

    mvel受到了java语法的启发,但是存在一些根本性的差异,mvel旨在使其成为更有效的表达式语言.比如直接支持集合.数组和字符串匹配,正则表达式的运算操作等. mvel2.x有以下几个部分组成:  ...

  8. 使用ES6删除对象中某些属性

    const form = { id: '011', name: '测试一', description: '测试demo' } // 目标: 取到删除description属性的对象, 即下文的data ...

  9. hive分区与实际分区文件不匹配导致spark读文件出错的问题解决

    先解释下,由于历史原因导致hive中的看到分区比hdfs中的文件夹不匹配,存在hive中分区数有,实际hdfs中无此文件夹. spark中通过sparkSQL读取hive中的该表时,将会出现异常. 解 ...

  10. SSL证书原理讲解

    一直以来都对数字证书的签发,以及信任等事情一知半解.总算有个闲适的周末来总结和深入一下相关的知识. CA: CA(Certificate Authority)是证书的签发机构,它是负责管理和签发证书的 ...