vue中运用echarts

首先看看echarts的官网

echarts官方事例

因为vue是虚拟dom所以在运用vue生命周期确保dom元素已经挂载

首先下载echarts

npm install echarts --save

下一步在main.js将echarts挂载在vue原型,方便后面使用调用

import echarts from 'echarts' Vue.prototype.$echarts = echarts

在展现echarts图的位置放置一个div

<div ref="mychart" style="width:100%;height:600px"></div>

然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

mounted(){ this.getEchartData() }, methods: { getEchartData() { const chart = this.$refs.chart if (chart) { const myChart = this.$echarts.init(chart) const option = {...}//opntion内容具体可以参考官网 myChart.setOption(option) window.addEventListener("resize", function() { myChart.resize() }) } this.$on('hook:destroyed',()=>{ window.removeEventListener("resize", function() { myChart.resize(); }); }) } }

echarts官方事例

~~~~~~~~~~~~~ end ~~~~~~~~~~~~~~