基于Echarts图表在div动态切换时不显示的解决方式


Posted in Javascript onJuly 20, 2020

简单粗暴,先上图,大概长这样:

基于Echarts图表在div动态切换时不显示的解决方式

在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子:

基于Echarts图表在div动态切换时不显示的解决方式

上代码:

<div class="test">
  <p class="title">
    <select v-model="selected" v-on:change="change">
     <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
     </option>
    </select>
  </p>

  <span>{{selected}}</span>
  <div id="timesharechart" v-show="isvisible" ></div> 
  <div id="receiveDispose" v-show="!isvisible"></div> 
</div>

<script>
  export default{
    name:"test",
    data(){
      return {
        selected: 'timeshare',
        options: [
         { text: '分时警情', value: 'timeshare' },
         { text: '接警与处置', value: 'receive' }
        ],
        isvisible:true
      }
    },


    methods:{
      change:function(){
        if(this.selected == "receive"){
          this.isvisible = false;
        }else{
          this.isvisible = true;
        }
      },
</script>

这里时我们为了确定当前显示的是哪个block,所以在data中引入了“selected”,方便其他操作,其实完全可以采用change事件和v-if指令来判断 true和false的方法来切换block。

code:

change:function(){
        if(this.isvisible == true){
          this.isvisible = false;
        }else{
          this.isvisible = true;
        }
      }

这样就变成了true, false。

那么问题来了:

以上解决了change事件对div图表容器的切换显示内容,但是问题是切换后不显示图表,控制台报错:“Can't get dom width or height”,检查了遍div容器是设置了大小的,上网一查才知道是因为echarts只能在显示的容器中渲染,解决办法:在容器切换之后再渲染图表,也就是在触发切换的事件中操作echarts初始化,我是这么解决的,在调用echart.init之前,给图形dom加上对应的宽度和高度。

drawCharts(){
   // 基于准备好的dom,初始化echarts实例,dom容器中需要在调用echart.init之前,必须给图形dom加上对应的宽度和高度,不然echarts不能渲染
   document.getElementById("container").style.display = "block";
   let myChart = this.$echarts.init(document.getElementById('container'));
        // 绘制图表
        receiveChart.setOption({});
  }

其他tab,button等切换方式如出一辙。

补充知识:echarts切换后页面空白

我遇到的问题是切换后页面空白,切换第二次页面出现了echarts图。为了解决这个问题,我再页面初始化时就调用了隐藏的echarts方法,虽然解决了第一次切换没图的问题,但同时出现了第二个问题,echarts图的大小需要在改变浏览器后才跟设置大小一致。

基于Echarts图表在div动态切换时不显示的解决方式

后面通过百度说宽高必须限制死,所以我把宽度从百分比设置为600px,暂时解决这个问题。

基于Echarts图表在div动态切换时不显示的解决方式

以上这篇基于Echarts图表在div动态切换时不显示的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 #Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 #Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 #Javascript
解决vue项目router切换太慢问题
Jul 19 #Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 #Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
You might like
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
在vue中使用jointjs的方法
2018/03/24 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python中pass语句用法实例分析
2015/04/30 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
五一劳动节慰问信
2015/02/14 职场文书
借条如何写
2015/05/26 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js