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

上一篇 下一篇

猜你喜欢

热点阅读