vue3按需引入vue-echarts

Vue3中按需引入`vue-echarts`是为了减少打包体积，只加载实际使用的图表组件。首先，你需要安装`@vueuse/prop-types`库来帮助处理自定义配置：

npm install @vueuse/prop-types

然后，在你的项目里，安装`vue-echarts`模块：

npm install vue-echarts echarts --save

接下来，在`main.js`或其他全局入口文件中引入`vue-echarts`，并使用`defineComponent`或Composition API来按需引入：

import { defineComponent } from 'vue';
import ECharts from 'vue-echarts';

// 使用 Composition API
const MyChart = () => {
  const props = useProps();
  return <ECharts :options={props.options} />;
};

export default defineComponent({
  components: {
    MyChart,
  },
});

或者使用传统的方式：

import Vue from 'vue';
import ECharts from 'vue-echarts';

Vue.component('my-chart', ECharts);

当你在某个组件中需要使用图表时，只需导入并传入配置：

<template>
  <my-chart :options="chartOptions" />
</template>

<script>
export default {
  props: {
    options: {
      type: Object as PropType<ECharts.Options>,
      required: true,
    },
  },
};
</script>

这样，只有在该组件中使用到`echarts`功能时，才会将`vue-echarts`相关的代码打包进应用。