<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>
echarts 模板代码(通用逻辑等)
最新推荐文章于 2024-08-13 12:00:00 发布