echarts 模板代码(通用逻辑等)

<template>
   <div class='s-c'>
     <div class='s-chart' ref='map'>
       
     </div>
   </div>
</template>

<script>


export default {
  name:'trender',
  data(){
    return{
      myMap:null,
      data:[]
    }
  },
  mounted()
  {
      this._initChart();
      this._getData();
      window.onresize=this._resize;
      //第一次适配调用
      this._resize();
  },
  destroyed()
  {
      window.removeEventListener('resize',this._resize);
  },
  methods:{
  	  //第一次配置样式
      _initChart()
      {
          this.myMap=this.$echarts.init(this.$refs.map);
          const option={

          };
          this.myMap.setOption(option);
      },
      //获取数据
      async _getData()
      {

          this._updateChart();
      },
      //第二次配置数据
      _updateChart()
      {
          const option={

          };
          this.myMap.setOption(option);
      },
      //适配监听
      _resize()
      {
          let container = this.$refs.map.offsetWidth;
          
          const option={

          };

          this.myMap.setOption(option);
          this.myMap.resize();
      }
  }

}
</script>

<style lang='less' scoped>
.s-c{
    width: 100%;
    height:100%;
    .s-chart{
      width: 100%;
      height:100%;
    }
}
</style>