文字总结
<template>
<div class="com-container">
<div class="com-chart" id="trend_ref">
</div>
</div>
</template>
<script>
export default {
name: "Trend"
}
</script>
<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from 'echarts';
import {getTrendInfo} from "../http/api/trend";
let echartsInstance=null;
let allData = null;
onMounted(()=>{
// 初始化
initChart();
//获取数据
getData();
//屏幕适配
window.addEventListener('resize',screenAdapter);
//主动触发一下屏幕配置
screenAdapter();
})
//组件被销毁前
onBeforeUnmount(()=>{
window.removeEventListener('resize',screenAdapter)
})
//初始化图表
function initChart(){
echartsInstance = echarts.init(document.querySelector('#trend_ref'))
const initOption = {
}
echartsInstance.setOption(initOption)
}
//请求数据
async function getData(){
allData = await getTrendInfo();
//更新
updateChart()
}
//更新图表
function updateChart(){
const dataOption ={}
echartsInstance.setOption(dataOption)
}
//屏幕适配
function screenAdapter(){
const adapterOption = {}
echartsInstance.setOption(adapterOption);
echartsInstance.resize()
}
</script>
<style scoped>
</style>
