vue封装echarts初始模板

html文件导入

<script src="static/lib/echarts.min.js"></script>

main.js设置全局

Vue.prototype.$echarts = window.echarts

vue组件

<template>
 <div class='com-container' >
 //容器
   <div class='com-chart' ref='stock_ref'></div>
 </div>
</template>

<script>
export default {
 data () {
   return {
   	 //实例
     chartInstance: null,
     //入参数据，可以写在props，配合深度监听
     allData: null
  }
},
 mounted () {
   //初始化容器，最基本的配置
   this.initChart()
   //处理数据后，合并新的配置刷新图表
   this.getData()
   window.addEventListener ('resize', this.screenAdapter )
   //根据屏幕变动刷新图表
   this.screenAdapter()
},
 destroyed () {
   window.removeEventListener ('resize', this.screenAdapter )
},
 methods: {
   initChart () {
     this.chartInstance = this.$echarts.init(this.$refs.stock_ref)
     const initOption = {}
     this.chartInstance.setOption(initOption)
  },
   async getData () {
   // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表      
   this.updateChart()
  },
   updateChart () {
     // 处理图表需要的数据
     const dataOption = {}
     this.chartInstance.setOption(dataOption)   
   },
   screenAdapter () {
     const adapterOption = {}
     this.chartInstance.setOption(adapterOption)    
     this.chartInstance.resize()
  }
}
}
</script>