VUE3集成ECharts，把ECharts做成组件

目录结构

1.引入echarts核心模块及注册必须的组件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入内置组件，组件后缀都为Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    PolarComponent,
    AriaComponent,
    ParallelComponent,
    LegendComponent,
    RadarComponent,
    ToolboxComponent,
    DatasetComponent, // 数据集组件
    DataZoomComponent,
    VisualMapComponent,
    TimelineComponent,
    CalendarComponent,
    GraphicComponent,
    TransformComponent, MarkPointComponent // 数据转换器组件(filter, sort)
} from 'echarts/components';

// 引入渲染器：echarst默认使用canvas渲染，引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

import theme from '@/utils/ECharts/macarons.json';

// 引入图表类型，后缀都为Chart
import {
    BarChart,
    LineChart,
    PieChart,
    MapChart,
    RadarChart,
    PictorialBarChart
} from 'echarts/charts';

// 注册必须的组件
echarts.use([
    // 内置组件
    TitleComponent,
    TooltipComponent,
    GridComponent,
    PolarComponent,
    AriaComponent,
    ParallelComponent,
    LegendComponent,
    RadarComponent,
    ToolboxComponent,
    DatasetComponent,
    DataZoomComponent,
    VisualMapComponent,
    TimelineComponent,
    CalendarComponent,
    GraphicComponent,
    TransformComponent,
    // 渲染器
    CanvasRenderer,
    SVGRenderer,
    // 特性
    LabelLayout,
    UniversalTransition,
    // 图表
    BarChart,
    LineChart,
    PieChart,
    MapChart,
    RadarChart,
    MarkPointComponent,
    PictorialBarChart
]);

echarts.registerTheme('default', theme);

export default echarts;

2.echarts的初始配置

import {
    Ref,
    shallowRef,
    unref,
    onMounted,
    onDeactivated,
    onBeforeUnmount
} from 'vue';

import echarts from '@/utils/ECharts/ecahrtsConfig';

export type EChartsCoreOption = echarts.EChartsCoreOption;

const useEcharts = (elRef: Ref<HTMLDivElement>, options: EChartsCoreOption) => {
    const charts = shallowRef<echarts.ECharts>();
    const setOptions = (options: EChartsCoreOption) => {
        charts.value && charts.value.setOption(options);
    };
    // 初始化
    const initCharts = (themeColor?: Array<string>) => {
        const el = unref(elRef);
        if (!el || !unref(el)) {
            return;
        }
        charts.value = echarts.init(el, 'default');
        if (themeColor) {
            options.color = themeColor;
        }
        setOptions(options);
    };
    // 重新窗口变化时，重新计算
    const resize = () => {
        charts.value && charts.value.resize();
    };
    onMounted(() => {
        window.addEventListener('resize', resize);
    });
    // 页面keepAlive时，不监听页面
    onDeactivated(() => {
        window.removeEventListener('resize', resize);
    });
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resize);
    });
    return {
        initCharts,
        setOptions,
        resize
    };
};

export { useEcharts };

3.做成组件

<template>
    <div :style="customStyle" ref="echartsRef"/>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, PropType } from 'vue';
import { useEcharts, EChartsCoreOption } from '@/utils/ECharts/initEcahrts';

const props = defineProps({
    options: { type: Object as PropType<EChartsCoreOption>, required: true },
    customStyle: { type: String },
    themeColors: { type: Array as PropType<string[]>, default: () => [] }
});

const echartsRef = ref();

const { setOptions, initCharts } = useEcharts(echartsRef, props.options);

watch(
    () => props.options,
    (nVal) => {
        let targetOptions: EChartsCoreOption = { ...nVal };
        if (props.themeColors && props.themeColors.length > 0) {
            targetOptions.color = props.themeColors;
        }
        setOptions(targetOptions);
    }
);

onMounted(() => {
    initCharts();
});
</script>

4.自定义主题

下载主题，获取JSON版本，把JSON文件放到工程里echarts的同一目录下

在注册echarts组件，注册主题，echarts.registerTheme();

对echarts初始化的时候，使用想要的主题