vue和echarts同时使用问题

2018-12-10  本文已影响0人  一剑无血冯稀饭

原始代码

html部分

    <div id="app" style="height:550px;width:550px;">
      <div id="test" style="height:100%;width:100%"></div>
    </div>

js部分

var option= ... //你的配置
$(document).ready(function() {
  Vue.prototype.$ajax = $.ajax;
  common = new Vue({
    el: '#app',
    data: { 
        chart: null
    },
    mounted() {},
    created: function () {
      this.chart = echarts.init(document.getElementById('test'))
      this.chart.setOption(option)
    },
    methods: {
      getData () {
       
      },
    }
  })
})

有几率你的图出不来,修改为以下代码

js部分

var option= ... //你的配置
$(document).ready(function() {
  Vue.prototype.$ajax = $.ajax;
  common = new Vue({
    el: '#app',
    data: { 
        chart: null
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('test'))
      this.chart.setOption(option)    
   },
    created: function () {
    },
    methods: {
      getData () {
      },
    }
  })
})

原因

mounted 和 updated 的生命周期, 不太一样。
不过也是看你需求。 其实 按照道理来讲。 mounted 之后, dom 就已经在了。 不过也是看 echart 是不是有自己做什么 这个我不太清楚。
updated 生命周期是在 每次 data 里面有数据变化的时候 就要 重新 rerender 执行 updated hook。 所以你的代码可能会重复 init

上一篇下一篇

猜你喜欢

热点阅读