直接上代码：
<template>
<div class="hello">
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "HelloWorld",
data() {
return {
charts: "",
opinion: ["iphone", "小米", "一加", "三星", "华为", "oppo"],
opinionData: [100, 60, 36, 10, 70, 75]
};
},
methods: {
drawPie(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: "echarts demo"
},
tooltip: {},
xAxis: {
data: this.opinion
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: this.opinionData
}
]
});
}
},
mounted() {
this.$nextTick(function() {
this.drawPie("main");
});
}
};
</script>
顺带谈下nextTick：
例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
应用场景：
- 在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，比如在created()中请求了数据然后渲染到页面上；
- 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进
Vue.nextTick(callback)/this.$nextTick(callback)的回调函数中。
<template>
<div>
<span id="msg">{{ message }}</span>
<button @click="updateMessage">去更新</button>
</div>
</template>
<script>
export default {
data: function() {
return {
message: "未更新"
};
},
methods: {
updateMessage: function() {
this.message = "已更新";
console.log(this.$el.querySelector("#msg").textContent); // => '未更新'
this.$nextTick(function() {
console.log(this.$el.querySelector("#msg").textContent); // => '已更新'
});
}
}
};
</script>
参考：Echarts Documentation： webpack中使用echarts
有梦想的风筝： Vue+echart的使用
Vue.js： 深入响应式原理-异步更新队列
