关于Vue中echarts响应式页面变化resize()的用法介绍

<div ref="myChart" style="width:100%;height:100%"></div>

import { EChartsOption } from "echarts";
const exportFuns = (): EChartsOption => {
  return {
	   xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'line'
	    }
	  ]
   }
};
export const EchartsLineConsumption = exportFuns();

<script lang="ts" setup>
import { ref, onMounted, markRaw } from "vue";
import * as echarts from "echarts";
import { EchartsLineConsumption } from "@/config/echartsLine";
const myChart = ref<any>(); // 获取元素实例
const line = ref<any>(null); // 获取echarts
onMounted(() => {
  init();
});
const init = ()=>{
  line.value = markRaw(echarts.init(myChart.value));
  line.value.setOption(EchartsLineConsumption);
}
</script>

onMounted(() => {
// 只要窗口大小发生像素变化就会触发
  window.addEventListener("resize", () => {
    line.value.resize(); // 窗口发生改变就更新echarts
  });
  init();
});

onUnmounted(() => {
  // 卸载echarts实例
  line.value.dispose();
  window.removeEventListener("resize", line.value);
});

type: "pie",
radius: ["47%", "57%"], // 让饼图中间为空心状
label: {
          show: true,
          position: "center",
          formatter: "中间圆心内容",
          fontSize: '18px',
      },

grid: {
     // 让图表占满容器
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true,
  },

tooltip: {
      position: "top",
      show: true,
      formatter: (params) => {
        //只有“直接访问”使用大标签，其他都使用小标签
        return `$标题<br/>${params.marker}`;//marker 图标
      },
      // extraCssText:'width:60px;white-space:pre-wrap'
   },

legend: {
      orient: "horizontal",
      bottom: '5px', 
      left: "left",
      icon: "circle",
      itemGap: 2,
    },