vue 3 中使用 echarts

echarts 功能很强大，但是要在vue3 项目中使用，配置却有点麻烦，记录一下在vue3中使用，以后可以直接复制代码！

echarts 在v5之后，为了适配 各种前端框架，减少打包体积，开始采用组件化的思路组织代码，对熟悉了之前整体一个包，引入包就能用的模式，在新模式下有点无从下手，现在开始使用：

引入依赖

pnpm add echarts vue-echarts

echarts 是 本体，vue-echarts 定义了一个Vue组件，方便在vue 代码中使用echarts。

使用前初始化

echarts 组件化后，使用前需要初始化，加载需要的功能组件，这样就只引入项目使用的组件，不会整体加载，减少了构建包的体积。 一般在项目中可以单独用一个文件来初始化加载本项目要用到的 echarts 组件、图表， 因为vue 有插件机制，可以把初始化放到一个插件中：

// echarts-init.ts

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, LinesChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  DatasetComponent,
} from "echarts/components";
import { THEME_KEY } from "vue-echarts";
import { type App, type Plugin } from "vue";
import VChart from "vue-echarts";

export const echartsInitPlugin: Plugin = (app: App, ...options: any[]) => {
  use([
    CanvasRenderer,
    DatasetComponent,
    PieChart,
    LinesChart,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent,
  ]);

  app.provide(THEME_KEY, "");
  // 把echart 组成到
  app.component("v-chart", VChart);
};

在程序入口使用初始化插件

//main.ts

import { useEchartsInit } from "./common/charts-init";

// 初始化echarts
app.use(echartsInitPlugin);

图表组件

效果如下：

最后

echarts 的配置
echarts 示例
echarts 文档