基于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 相关文章推荐
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
js模拟实现烟花特效
Mar 10 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
在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等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python hmac模块使用实例解析
2019/12/24 Python
PyQt5实现画布小程序
2020/05/30 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
python自动生成证件号的方法示例
2021/01/14 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
校园之声广播稿
2014/01/31 职场文书
银行优秀员工事迹
2014/02/06 职场文书
迟到检讨书300字
2014/02/14 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
杜甫草堂导游词
2015/02/03 职场文书
党支部书记岗位职责
2015/02/15 职场文书
党员评议自我评价
2015/03/03 职场文书
Python源码解析之List
2021/05/21 Python