解决vue3写echarts不能根据屏幕大小缩

下载echarts

npm i echarts

引入

import * as echarts from 'echarts'
import { markRaw } from 'vue'

使用markRaw包裹起来

const getCodHotData = () => {state.Chart = markRaw(echarts.init(document.getElementById('ChargingProcessCurve')))var option = {title: {text: 'Stacked Line'},tooltip: {show: true,trigger: 'axis',},legend: {show: true,type: 'plain',icon: 'roundRect',orient: 'horizontal',bottom: '0',data: ['Email', 'Union Ads']},grid: {left: '1%',right: '1%',bottom: '6%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]}]}state.Chart.setOption(option)
}

缩放

const echareseven = ()=> {window.addEventListener('resize', () => {state.Chart.resize()})
}

使用

onMounted(() => {nextTick(() => {getCodHotData()echareseven()})
})