原始代码
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
