解决Echarts 显示隐藏后宽度高度变小的问题

Echarts 是现在程序员做图表用到比较多的一种技术，前段时间，我就用了一下Echarts,我原本是将饼图先隐藏，然后点击按钮让它再显示出来，但是再显示时，饼状图出现了问题，它变得特别小，根本不能用，然后，就此，我找了下原因

原因：Echarts 图表是根据你定义的div 的样式来确定图表的大小，当图表隐藏时，Echarts会找不到div的宽和高，再次显示时它会给自己一个非常小的默认宽高值，所以在隐藏显示后会发现它变得非常非常的小。

解决：将初始化放在click事件里，给一个flag 控制显示隐藏。

补充知识：echarts图表隐藏之后再展示出现变形

问题描述：使用echarts制作了仪表盘的图表，起初图标在页面中隐藏，点击某一按钮切换时，显示图表，发现图表的宽高被缩小了，异常显示，如图：

解决方法：

1.在完成绘画echarts后添加代码：$(window).resize(myChart.resize);

var dom = document.getElementById("jindu");
var myChart = echarts.init(dom);
option = {
 ......
}
myChart.setOption(option);
$(window).resize(myChart.resize);

2.在图表要显示的地方添加代码：$(window).trigger(‘resize');

if(gmFlag == 1){
   $(".allscore").show();
   $(window).trigger('resize');
}

这样来回切换的时候图表的大小就不会改变了，如图：

以上这篇解决Echarts 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

  • django+echart数据动态显示的例子

    目标:从plc采集数据到数据库,利用echart绘制实时动态曲线. 1 思路 - django定时执行任务,将数据推送到echart. - 前端定时读取后端数据,并显示到echart上. 第一种思路貌似走不通,主要考虑第二种方式. 第二种方式首先想到的是利用javascript直接读取数据库,并定时更新echart曲线. 后来了解js只是前端语言,没有访问数据库的能力,因此最后转向ajax. AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 这个正是我

  • 微信小程序Echarts覆盖正常组件问题解决

    微信小程序Echarts覆盖正常组件问题解决

    最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求. 尝试解决的思路: z-index:Echarts使用的是微信原生canvas,优先级高,z-index完全无效. cover-view:因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素,故cover-view也无法奏效. wx.canvasToTempFilePath:wx.canvasToTemp

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因 原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小. 解决:将初始化放在click事件里,给一个flag 控制显示

  • 解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

    现象: 解决方法 : 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先,以覆盖内联样式 } } 补充知识:解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示

  • TextVie获取显示字符串的宽度之Android开发

    此文通过判断textview要显示的字符串的宽度是否超过我设定的宽度,若超过则执行换行,具体代码讲解如下: 项目中的其他地方也有这样的需求,故直接使用了那一块的代码. public float getTextWidth(Context Context, String text, int textSize){ TextPaint paint = new TextPaint(); float scaledDensity = Context.getResource().getDisplayMetric

  • 解决echarts中横坐标值显示不全(自动隐藏)问题

    echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示 如果我们想显示全,则需要在xAxis 属性加上axisLabel:{interval: 0} "xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16"

  • 解决echarts图表使用v-show控制图表显示不全的问题

    最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况,就像下图: 还折腾了半天,其实就是当数据请求出来后,调用绘制ehcarts时图表的时候,用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之强制

  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    我就废话不多说说了,大家还是直接看代码吧~ var allUseDayChartTwo; function allUseDayChartTwoFun(obj,xdata,ydata,zdata){ allUseDayChartTwo = echarts.init(obj); var category = xdata; var lineData = zdata; var barData = ydata; option = { // backgroundColor:'#F00', tooltip:

  • 解决iView Table组件宽度只变大不变小的问题

    示例: <Table class="my-table"></Table> 打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小. 那么我们就可以根据这个原因才决定解决方案 1.给Table组件的table标签设置一个important的width .my-table table { width: 100% !important;

  • BootStrap中Table隐藏后显示问题的实现代码

    BootStrap中Table隐藏后显示问题的实现代码

    开始的时候先把table隐藏了,由于判断条件让它显示,结果出现错位的问题. //前台代码: <h3 id="faultanalysis-head" class="text-center" style="display:none"><strong>faultanalysis-table</strong></h3> <table id="faultanalysis-table"

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • 解决SpringBoot项目启动后网页显示Please sign in的问题

    解决SpringBoot项目启动后网页显示Please sign in的问题

    Springboot启动项目后网页显示[Please sign in] 遇到的情况解决办法解决效果根本原因(依赖导错了)根本解决办法 遇到的情况 启动SpringBoot后,访问http://127.0.0.1:8080/t02/index,确莫名其妙的进入到了Please sign in页面. 解决办法 仔细看了下idea控制台的信息,发现出现了一个security password,原来是进入到了一个安全拦截界面,我们输入idea控制台打印的密码即可,username是user. 解决效果

随机推荐