echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题

在作项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，javascript

在tabs切换中有echarts的话，咱们会发现初始化的那个echarts是有宽度的，当点击tabs切换以后，切换过来的echarts只剩下100px的宽度。

这是由于渲染的时机不对，咱们须要在点击到当前切换的时候在echarts父级加载完毕以后在执行echarts，而不是在页面初始化的时候就把全部tabs里面的echarts都执行。

由于echarts会根据父级给宽度，而在初始化页面的时候其余tabs切换是display：none；没有宽度，因此会发生以上问题css

解决方法：直接将图表的宽高写死java

1.将图表放进一个div里面echarts

2.定义一个方法，并在mounted视图更新的时候执行this

mounted() {

this.setMychart();

//防止切换视图时图表被压缩变形

setMychart () {

//原生js写法

//这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return document.defaultView.getComputedStyle(obj, null)[attr];

}

//获取父元素

let echarts = document.querySelector('.chart-show-container');

//获取父元素宽高

let echartsWidth = getStyle(echarts, 'width');

let echartsHeight = getStyle(echarts, 'height');

//获取图表元素

let myChart = document.querySelector('#TotalRevenueChartContainer');

//将父元素宽高赋值给图表

myChart.style.width = echartsWidth;

myChart.style.height = echartsHeight;

}

3.样式.net

.chart-show-container {

height: 285px;

width: 355px;

}

echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题相关推荐

echart vue 图表大小_vue里echarts自适应窗口大小改变
echarts的图表提供了一个resize方法可以自适应屏幕窗口改变,而重新渲染图表大小的功能. 因此我们只要监听浏览器的窗口改变的resize事件,再结合echarts的图表,就可以实现我们想要的功 ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
echart vue 图表大小_vue之将echart封装为组件
最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用.本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为 ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
计算机怎样调整工作表位置,图表布局中调整图表大小和位置及跨工作表移动——想象力电脑应用...
通过前面四篇文章的介绍,对于Excel 2013工作簿中图表的制作应该都有了很清晰的认识和了解.对于最基本的图表元素的添加和编辑都进行了详细的介绍.但我们制作的图表没有修改过大小,且图表位置始终是在表 ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
Vue3使用组件库的tab切换echarts图表，图表出现宽度压缩变窄的问题
Vue3使用antd的tab从echarts图表A切换到图表B,再回到A的时候,A的图表宽度被压缩到100px <Tabs v-model:activeKey="activekey&q ...
1.Echarts的坑：切换tab时，echart显示默认的100px
1.切换tab时,echart显示默认的100px 切换tab时,elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度 1.2 效果 1.3 解决方法切换 ...
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
近期项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题: 说明:图中可以看到,第一个tab ...

echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题

echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题相关推荐

最新文章

热门文章