Vue 3 如何按需引入 ECharts（高性能图表组件）

在Vue 3中按需引入ECharts，你可以使用unplugin-vue-components插件来自动按需引入ECharts组件，或者手动引入所需的图表。

首先，确保你已经安装了ECharts：

npm install echarts --save

然后，你可以在Vue组件中这样使用：

// 手动按需引入
import * as echarts from 'echarts/core';
import {
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
 
// 注册必需的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
]);
 
export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.chart.setOption({
      // ... ECharts 配置项
    });
  },
  // 如果需要在组件销毁时清理资源
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};

<!-- 在模板中定义图表容器 -->
<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

如果你想使用自动按需引入的方式，可以使用unplugin-vue-components插件，首先安装它：

npm install unplugin-vue-components --save-dev

然后，在Vue项目的Vite配置文件中配置插件：

// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

之后，你可以直接在组件中使用ECharts组件，插件会自动引入所需的图表和组件：

// Vue 组件
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
 
export default {
  setup() {
    const chartRef = ref(null);
    const chartInstance = ref(null);
 
    onMounted(() => {
      chartInstance.value = echarts.init(chartRef.value);
      // ... 设置图表选项
    });
 
    onBeforeUnmount(() => {
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
    });
 
    return {
      chartRef
    };
  }
};

<!-- 模板 -->
<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>

请注意，这些代码示例是基于假设你正在使用Vite作为构建工具。如果你使用的是Webpack，你可能需要相应地调整配置。