echarts的屏幕自适应

1. 使用window.onresize来实现

       

// myChart为echarts初始化的结果,chartDom为装图表的div容器
// 如: myChart = echarts.init(document.getElementById('chartDom'));
// 这个方法不论是写在onMounnted里面还是外面都可以

window.addEventListener("resize", () => {
    myChart.resize();
});
//或
window.onresize = function () {
    myChart.resize();
};

2. 通过ResizeObserver的实例对象来实现(推荐)

// myChart这个参数是echarts的实例

function chartResize(myChart: any) {
        let chartObserver = new ResizeObserver(() => {
            myChart.resize();
        });
        chartObserver.observe(myChart.getDom());
    }
chartResize(myChart)

如果有多个页面的图表都需要使用这个函数, 则可将它放在vuex或者pinia中

// pinia中
export const ChartAdaptive = defineStore('chart',()=>{
  const chartResize = (myChart:any)=>{
    const chartObserver = new ResizeObserver(()=>{
      myChart.resize()
    });
    chartObserver.observe(myChart.getDom())
  }
  return{
    chartResize
  }
})

// 要用的vue文件中
import { ChartAdaptive } from '@/stores'
let s_chartAdaptive = ChartAdaptive();

onMounted(()=>{
    myChart = echarts.init(document.getElementById('chartDom'));
    s_chartAdaptive.chartResize(myChart);
    ......
})