思路就是通过echarts官方的方法resize方法。不过vue3你需要一个时机去调用这个方法
<template>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div style="height: 200px" ref="homeLaboratoryRef"></div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{
{
"List item " + o }}
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{
{
"List item " + o }}
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{
{
"List item " + o }}
</div>
</el-card>
</el-col>
</el-row>
</template>
<script lang="ts">
import * as echarts from 'echarts'
import {
toRefs,
reactive,
onMounted,
nextTick,
computed,
getCurrentInstance,
watch,
onActivated
} from 'vue'
export default {
setup () {
const {
proxy } = getCurrentInstance() as any
const state = reactive({
myCharts: []
})
const initHomeLaboratory = () => {
const myChart = echarts.init(proxy.$refs.homeLaboratoryRef)
const option = {
grid: {
top: 50,
right: 20,
bottom: 30,
left: 30
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['预购队列', '最新成交价'],
right: 13
},
color: [
'#63caff',
'#49beff',
'#03387a',
'#03387a',
'#03387a',
'#6c93ee',
'#a9abff',
'#f7a23f',
'#27bae7',
'#ff6d9d',
'#cb79ff',
'#f95b5a',
'#ccaf27',
'#38b99c',
'#93d0ff',
'#bd74e0',
'#fd77da',
'#dea700'
],
xAxis: {
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
]
},
yAxis: [
{
type: 'value',
name: '价格'
}
],
series: [
{
name: '预购队列',
type: 'bar',
data: [200, 85, 112, 275, 305, 415, 441, 405, 275, 305, 415, 441],
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#0b9eff'
},
{
offset: 1,
color: '#63caff'
}
]
}
}
},
{
name: '最新成交价',
type: 'line',
data: [50, 85, 22, 155, 170, 25, 224, 245, 285, 300, 415, 641],
itemStyle: {
color: '#febb50'
}
}
]
}
myChart.setOption(option)
state.myCharts.push(myChart)
}
const initEchartsResizeFun = () => {
nextTick(() => {
for (let i = 0; i < state.myCharts.length; i++) {
state.myCharts[i].resize()
}
})
}
const initEchartsResize = () => {
window.addEventListener('resize', initEchartsResizeFun)
}
onMounted(() => {
initHomeLaboratory()
initEchartsResize()
})
onActivated(() => {
initEchartsResizeFun()
})
return {
...toRefs(state)
}
}
}
</script>
<style lang="less" scoped></style>