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>