Vue3中echarts组件化以及使用hook实现resize的方法

在Vue 3项目开发中，使用echarts进行数据可视化是常见需求。将echarts组件化，能够提高代码的复用性与可维护性，而利用hook实现resize功能，能让图表在页面尺寸变化时自适应展示。

首先来看看echarts的组件化。在Vue 3中创建一个echarts组件，我们可以先安装echarts依赖。然后在组件中引入echarts，通过ref来创建一个DOM元素用于挂载图表。在mounted生命周期钩子函数中初始化echarts实例，并设置图表的配置项。例如：

<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  const option = {
    title: {
      text: '示例图表'
    },
    xAxis: {
      data: ['A', 'B', 'C']
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [10, 20, 30]
      }
    ]
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

接下来实现使用hook进行resize功能。创建一个名为useEchartsResize的hook函数，在这个函数中我们通过window.addEventListener('resize', callback)来监听窗口大小变化事件。当窗口大小改变时，调用echarts实例的resize方法。示例代码如下：

import { ref, onMounted, onUnmounted } from 'vue';

export const useEchartsResize = (chartInstance) => {
  const resize = () => {
    if (chartInstance) {
      chartInstance.resize();
    }
  };

  onMounted(() => {
    window.addEventListener('resize', resize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', resize);
  });

  return {
    resize
  };
};

在组件中使用这个hook也很简单，只需将之前创建的echarts实例传入即可：

<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { useEchartsResize } from './useEchartsResize';

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  const option = {
    // 配置项
  };
  chartInstance.setOption(option);

  const { resize } = useEchartsResize(chartInstance);
  resize();
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

通过上述步骤，我们在Vue 3中实现了echarts的组件化以及利用hook实现了图表的自适应resize功能，为项目的数据可视化提供了更高效、灵活的解决方案。