vue3-mgt-template/src/plugins/echarts.ts

import type { App } from 'vue';
import * as echarts from 'echarts/core';
import { PieChart, BarChart, LineChart, ScatterChart, GaugeChart } from 'echarts/charts';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
import {
    GridComponent,
    TitleComponent,
    PolarComponent,
    LegendComponent,
    GraphicComponent,
    ToolboxComponent,
    TooltipComponent,
    DataZoomComponent,
    VisualMapComponent,
    MarkPointComponent,
} from 'echarts/components';
import VueEcharts from 'vue-echarts';

const { use } = echarts;

use([
    GaugeChart,
    ScatterChart,
    PieChart,
    BarChart,
    LineChart,
    CanvasRenderer,
    SVGRenderer,
    GridComponent,
    TitleComponent,
    PolarComponent,
    LegendComponent,
    GraphicComponent,
    ToolboxComponent,
    TooltipComponent,
    DataZoomComponent,
    VisualMapComponent,
    MarkPointComponent,
]);

/**
 * @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
 * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
 */
export function useEcharts(app: App) {
    app.config.globalProperties.$echarts = echarts;
}

export const registerVueEcharts = (app: App) => {
    app.component('v-chart', VueEcharts);
};

export default echarts;