问答

vue 切换到另一个页面,再切换回来,echarts不触发更新?

作者:admin 2021-09-20 我要评论

场景是: 1个table页面(A1),一个echarts图表页面(A2)。 初始化时,A2正常初始化图表展示。 点击切换按钮,从A1再切换回A2时,A2页面的文字数据正常加载,ec...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

场景是:

  1个table页面(A1),一个echarts图表页面(A2)。
  初始化时,A2正常初始化图表展示。
  点击切换按钮,从A1再切换回A2时,A2页面的文字数据正常加载,echarts图表触发没有初始化,想问下大佬们,怎么触发echarts图表加载?
  

代码如下:
App.vue

<template>
  <div id="app">
    <keep-alive>
<router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

A2.vue

  <div class="mode-part-two">
     <div class="chart-row-one chart-border" id="bar"></div>
     <div class="chart-row-one chart-border" id="area"></div>
     <div class="chart-row-one " id="barLevel"></div>
     <div class="chart-row-three" id="line"></div>
 </div>
  data () {
    return {
      barEcharts: null,
      areaEcharts: null,
      lineEcharts: null,
      barLevelEcharts: null
    }
  },
  activated () {
    // 基于准备好的dom,初始化echarts实例,绘制图表
      this.barEcharts.clear();
      this.areaEcharts.clear();
      this.lineEcharts.clear();
      this.barLevelEcharts.clear();
      this.barEcharts      = echarts.init(document.getElementById('bar')).setOption(barOption())
      this.areaEcharts     = echarts.init(document.getElementById('area')).setOption(areaOption())
      this.lineEcharts     = echarts.init(document.getElementById('line')).setOption(lineOption())
      this.barLevelEcharts = echarts.init(document.getElementById('barLevel')).setOption(barLevelOption())
 }     
###

在activated中手动触发resize事件试下呢

var myEvent = new Event('resize')
window.dispatchEvent(myEvent)
###

建议尝试一下activated里面的不用重新init,而是直接setOption

this.barEcharts.clear().setOption(barOption())

类似于这样,试试吧。

###

因为你用了 keep-alive,有缓存导致的,给 标签 keep-alive 设置 exclude 属性为 A2 即可

###

可以把clear 换成 dispose 试试,销毁实例再初始化

###

请问楼主最后解决吗?怎么解决的,遇到同样问题

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue  切换到另一个页面,再切换回来,e

    vue 切换到另一个页面,再切换回来,e

  • 请问node+sqlite3如何判断sql语句是否

    请问node+sqlite3如何判断sql语句是否

  • element的:span-method,怎么在我更新t

    element的:span-method,怎么在我更新t

  • 执行migrate同步数据库时报这样的错,

    执行migrate同步数据库时报这样的错,

腾讯云代理商
海外云服务器