<template>
<div class="com-container">
地区销售排行图表
<div class="com-chart" ref="rank_ref"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
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.rank_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>
<style lang="less" scoped>
</style>
标签:screenAdapter,Echart,updateChart,setOption,component,可视化,const,chartInstance,res
From: https://www.cnblogs.com/openmind-ink/p/17023842.html