Vue3封装eharts 组件

好的，关于Vue3封装ECharts组件的方法，我可以给你一些提示。

首先，我们需要安装ECharts。在Vue项目中，可以使用npm或yarn来安装ECharts。

npm install echarts --save
# 或者
yarn add echarts

现在，我们就可以在Vue3项目中使用ECharts了。

接下来，我们需要创建一个封装ECharts的Vue组件。我们可以使用Vue3中的`<script setup>`语法来创建组件。

<template>
  <div ref="chart" :style="{ width: width, height: height }"></div>
</template>

<script setup>
import * as echarts from 'echarts';

const props = defineProps({
  option: {
    type: Object,
    required: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '400px',
  },
});

const chart = ref(null);

onMounted(() => {
  const echartsInstance = echarts.init(chart.value);
  echartsInstance.setOption(props.option);
  window.addEventListener('resize', () => {
    echartsInstance.resize();
  });
});

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

</script>

在这个组件中，我们使用了`<div>`元素来包含ECharts图表，并使用`ref`属性来获取DOM元素。我们还通过`props`定义了一些参数，包括ECharts的配置参数（`option`）、组件的宽度（`width`）和高度（`height`）。

在组件的`onMounted`生命周期钩子函数中，我们使用ECharts的`init`方法来创建一个ECharts实例，并将图表的配置参数传递给`setOption`方法。我们还添加了一个`resize`事件监听器，以便在窗口大小变化时自动调整图表的大小。

最后，在组件的`onUnmounted`生命周期钩子函数中，我们移除了`resize`事件监听器，以避免出现内存泄漏。

这就是一个简单的Vue3封装ECharts组件的示例。你可以在父组件中使用这个组件，并通过`option`属性传递ECharts的配置参数。

<template>
  <ECharts :option="chartOption" />
</template>

<script>
import ECharts from './ECharts.vue';

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chartOption: {
        // ECharts配置参数
      },
    };
  },
};
</script>

希望这些提示能够帮到你！