echarts 显示隐藏后宽度高度变小问题

实况解析

见下图，此图中，数据总统计下有两个大的分类：

表格数据（table形式）
echarts（数据可视化形式）

我可以点击按钮，切换两个视图（通过控制display）产生的问题是：

如果默认显示 echarts，如下图，是没有问题的，但如果优先显示表格，再切换到 echarts界面，就会出现高度和宽度不对的情况。

1. 正常情况下

什么称之为正常情况 => echarts的外部容器宽高都够，且初始状态为display：block

2. 非正常情况

非正常情况 => echarts的外部容器宽高不明确，因为其初始状态为display：none。此时echarts会默认设置最小宽度与高度，如上图所示。

3. 处理方案及思路

原因上面已经简述了，这时候应该思考的是：

它是什么时候绘制的？
找到绘制方法
等echarts的父元素设置为display：block再去渲染
不能重复渲染，只渲染一次，除非数据更新了（考虑到性能问题）

4. 解决方案

本解决方案是将echarts封装成子组件的形式（很方便，建议使用）:

默认的渲染方式是（echarts.vue）：

   drawLine() {// 基于准备好的dom，初始化echarts实例// console.log(this.id);let myChart = echarts.init(document.getElementById(this.id));// 绘制图表myChart.setOption({title: {text: "",},tooltip: {trigger: "axis",},legend: {data: ["新增用户", "充值", "返利", "UV日活", "PV访问量", "发贴数"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,data: [],},yAxis: {type: "value",},series: [// 数据],});},

以上是绘制的方法，默认的调用是在此组件的挂载阶段：

  mounted() {this.drawLine();}

由于我们是在父组件调用，当容器为display：block的时候调用，所以此处调用注释掉！

父组件：

    // 切换div显示隐藏的方法changeTable(type) {if (type) {this.isTable = true;} else {this.isTable = false;if (!this.isInit) {this.$nextTick(() => {// hd为echarts组件上的ref值this.$refs.hd.drawLine();});// isInit 为节流阀 防止多次绘制this.isInit = true;}}},

搞定，收工！如果对你有帮助的话，点赞收藏一波，感激不尽~

echarts 显示隐藏后宽度高度变小问题相关推荐

vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题
MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题参考文章: (1)MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题 (2)https://www.cnblogs.com/phil ...
GX works2 三菱PLC 显示注释后代码行变宽的解决方法
GX works2 三菱PLC 显示注释后代码行变宽的解决方法解决前没显示注释前 --------------------------------------------------------- ...
计算 webView 显示内容后实际高度
两种方法,方法1可以得到内容的实际高度,方法2得到了将内容显示完整后的 webView 的尺寸(包含 UIEdgeInsets) - (void)webViewDidFinishLoad:(UIWeb ...
为什么ffmpeg 切割视频后体积会变小
一.背景使用手机录制了1080 * 1920的视频,体积大小是345 MB, 时长为3分50s. 直接copy到 mac 上使用ffmpeg (重新编码) 切除最后5 s ,得到一个3分 45秒的视 ...
android 输入法确定按钮,Android项目:输入法软键盘显示/隐藏的监听和控制,InputMethodManager用法研究...
在项目开发中,用到编辑框的地方经常涉及到要监听或者控制软键盘的显示/隐藏状态.本以为这是很容易解决的一个小问题,没想到当初碰到这个问题才明白还得花点小心思才能整好.现将针对软键盘的显示/隐藏状态的监听 ...
word的公式后加编码后自动变小
如图所示,在公式后面加编码后公式也变小了: 加编码前: 加编码后: 采用样式分隔符(Ctrl+alt+enter)即可解决,输完公式后,按enter转行,输入你要的东西(编号什么的),然后再在公式后面 ...
linux u盘空间越小写入越慢,解决U盘容量变小问题
今天又想重新给电脑刷刷kali linux新版本了貌似N久没更,直接重新刷系统吧...然后发现USB容量变小,这就尴尬了,接着总结了个小方法. 解决方法: 1.先把u盘插好,运行cmd, 2.输入di ...
sketchup边线设置_SketchUp中隐藏后边线的操作教程
使用SketchUp的用户很多,一些新用户不清楚隐藏后边线,今天小编给大家带来在SketchUp中隐藏后边线的操作教程,希望可以帮到大家. SketchUp中隐藏后边线的操作教程我们先打开草图大师( ...

echarts 显示隐藏后宽度高度变小问题

echarts 显示隐藏后宽度高度变小问题相关推荐

最新文章

热门文章