解决Echarts图表在div动态切换时不显示的问题
来源:互联网 发布:垓下歌与大风歌 知乎 编辑:程序博客网 时间:2024/05/19 14:51
简单粗暴,先上图,大概长这样:
在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子:
上代码:
<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等切换方式如出一辙。
阅读全文
0 0
- 解决Echarts图表在div动态切换时不显示的问题
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
- 2017_12_05 echarts动态赋值问题,tab切换时,图表显示错乱
- echarts插件——关于echarts在默认隐藏的div中不显示的问题
- 解决echart在IE中使用时,在div中添加postion后图表不显示问题
- echarts图表显示问题
- ECharts动态生成图表的一些问题
- 解决ECHARTS切换图表获取不到width跟height的问题
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
- echarts图表数据为空的时候不显示气泡
- 百度echart在ie下图表不显示的问题
- echarts 画的图表在ie9以下不能正常显示
- Echarts图表数据动态单位显示
- Echarts图表中动态数据显示
- 解决fragment多层嵌套来回切换不显示的问题
- 解决IE8下div 不显示背景图片的问题
- 解决jpgraph在php7.0版本下时,无法显示例子图表的问题
- Idea 配置并破解jrebel
- 三极管原理
- Python shell清屏
- 支付宝的公钥和私钥
- 多图详解Spring框架的设计理念与设计模式
- 解决Echarts图表在div动态切换时不显示的问题
- <!DOCTYPE html> 设置百分比高度的问题
- angularJs $ocLazyLoad controller not function undefine
- spring的注解
- 使用JQuery的前端验证
- 新手安装laravel框架
- linux命令: chown
- nodejs访问sqlite3
- ArrayList、Vector、LinkedList的异同点