DDR爱好者之家

基于Echarts图表在div动态切换时不显示的解决方式
站长资源 2024/11/24 佚名
8 1538
DDR爱好者之家 Design By 杰米

简单粗暴，先上图，大概长这样：

基于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动态切换时不显示的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米