echarts适配方法

第一种方法

  window.onresize = () => {
    myChart.resize();
  }

第二种方法

  window.addEventListener("resize", () => {
    myChart.resize();
  });

第三种方法

export const resizeFn = (arr) => {
  window.onresize = () => {
    arr.forEach((item) => {
      item.resize();
    });
  };
};

第一种方法因为使用的是dom零级事件，只能绑定一个echarts图表使用，绑定多个会被覆盖掉，只会执行最后一个。所以第二种方法就解决了这个问题，dom二级事件，dom二级事件的优点是可以绑定多个元素而不会被覆盖掉。

第三种方式是封装成一个组件使用，在每次使用的时候将元素传进来在每个图表，item 改变的时候去循环改变每一个图表的大小

echarts组件封装

1.echarts组件封装 

第一种方法是单独抽离数据 

<template>
    <div id="main" ref="mycharts">
    </div>
</template>

<script setup lang="ts">

import { ref, onMounted, defineProps, shallowRef } from 'vue'
import * as echarts from 'echarts'
const { option } = defineProps(['option'])
const mycharts = shallowRef()
const charts = shallowRef({})
onMounted(() => {
    charts.value = echarts.init(mycharts.value)
    charts.value.setOption(option)
})
defineExpose({
    charts
})
</script>

<style scoped>
#main {
    width: 100%;
    height: 100%;
}
</style>

<template>
    <Mycharts class="main" ref="mycharts" :option="LineOption" :key="key"></Mycharts>
</template>

单独请求或者封装数据

2.echarts组件封装 

使用时候直接在页面中写一个盒子

封装组件

import { ref, onMounted } from "vue";

export const useInit = (fn) => {
  const tableData = ref([]); // 定义数组容器

  const init = () => {
    fn().then((res) => { // 请求数据api
      tableData.value = res.data.data;
      tableData.value.forEach(item => {
        if (item.code == 'true') { // 请求成功返回数据失败则不返回
          item.code = true
        } else {
          item.code = false
        }
      })
    });
  };

  onMounted(() => {
    init() // 在生命周期中调用数据
  })

  return {
    tableData,
    init
  };
};

在页面使用时直接初始化数据

// 初始化柱状图  形参
const init = (initDom, chartOption) => {
  const chartDom = initDom.value;
  let myChart = echarts.init(chartDom);
  myChart.setOption(chartOption);
  return myChart
}

在生命周期中调用获取数据并适配

可以同时传入多个图表

onMounted(() => {
  resizeFn([init(box, leftChart), init(boxRight, rightChart)])
});