이 기사에서는 EChart를 올바르게 패키징하는 방법을 설명합니다.

이 기사에서는 ECharts를 캡슐화하는 방법에 대해 주로 설명합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

기사의 시작은 항상 어렵기 때문에 자세한 내용은 다루지 않겠습니다.

이 기사에는 TypeScript, Vue3, echarts가 포함됩니다.

ECharts의 사용 시나리오는 매우 광범위하고 맞춤형 시나리오가 많기 때문입니다. , 그래서 재사용 가능한 구성요소는 캡슐화되지 않습니다. 제 생각에는 각 구성요소에는 여전히 독립적인 옵션이 필요합니다. 여기서는 더 잘 사용되는 echats

directory

|--src
    |--components     // 组件
        |--echarts    // echats 封装目录
            |--echarts-types.ts    // 一些类型
            |--library.ts          // 为 echats 增加的一些功能
            |--useECharts.ts       // 主函数
        
        |--EChartsComponents
            |--a-echarts.vue      // 组件使用
    
|--App.vue

code

library.ts

inlibrary만 캡슐화합니다. ts echart를 마운트하는 데 필요한 구성 요소와 기능을 중앙에서 소개합니다.

import * as echarts from 'echarts/core';

import {
        BarChart,
        LineChart,
        PieChart,
        MapChart,
        PictorialBarChart,
        RadarChart,
        ScatterChart
} from 'echarts/charts';

import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        PolarComponent,
        AriaComponent,
        ParallelComponent,
        LegendComponent,
        RadarComponent,
        ToolboxComponent,
        DataZoomComponent,
        VisualMapComponent,
        TimelineComponent,
        CalendarComponent,
        GraphicComponent
} from 'echarts/components';

echarts.use([
        LegendComponent,
        TitleComponent,
        TooltipComponent,
        GridComponent,
        PolarComponent,
        AriaComponent,
        ParallelComponent,
        BarChart,
        LineChart,
        PieChart,
        MapChart,
        RadarChart,
        PictorialBarChart,
        RadarComponent,
        ToolboxComponent,
        DataZoomComponent,
        VisualMapComponent,
        TimelineComponent,
        CalendarComponent,
        GraphicComponent,
        ScatterChart
]);

export default echarts;

echarts-types.ts

사용해야 할 일부 유형은 여기에서 표준화되어 있습니다.

export enum RenderType {
        SVGRenderer = 'SVGRenderer',
        CanvasRenderer = 'SVGRenderer'
}

export enum ThemeType {
        Light = 'light',
        Default = 'default',
}

useECharts.ts 메인 파일

에 필요한 구성 요소를 소개합니다. 함수 모듈을 사용하면 EChartsOption 유형을 사용하면 쉽게 보고할 수 있습니다. 여기서는 컴포넌트

a-echarts.vue에서 임시로 any

import { onMounted, onUnmounted, Ref, unref } from "vue";
import echarts from "./library";
// import type { EChartsOption } from 'echarts'
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'
import { RenderType, ThemeType } from './echarts-types'

export function useECharts(elparams: Ref<HTMLDivElement> | HTMLDivElement, autoUpdateSize: boolean = false, render: RenderType = RenderType.SVGRenderer, theme = ThemeType.Default) {

        // 渲染模式 
        echarts.use(render === RenderType.SVGRenderer ? SVGRenderer : CanvasRenderer)

        // echats实例
        let echartsInstance: echarts.ECharts | null = null

        // 初始化 echats实例
        function initCharts() {

                const el = unref(elparams)

                if (!el) return

                echartsInstance = echarts.init(el, theme)
        }

        // 配置
        function setOption(option: any) {

                showLoading()

                if (!echartsInstance) initCharts()

                if (!echartsInstance) return

                echartsInstance.setOption(option)

                hideLoading()

        }

        // 获取 echats实例
        function getInstance() {

                if (!echartsInstance) initCharts()

                return echartsInstance
        }

        // 更新大小
        function onResize() {

                echartsInstance?.resize()

        }

        // 监听元素大小变化
        function watchEl() {

                if (animation) unref(elparams).style.transition = &#39;width 1s, height 1s&#39;

                const resizeObserve = new ResizeObserver(() => onResize())

                resizeObserve.observe(unref(elparams))

        }

        // 显示加载状态
        function showLoading() {

                if (!echartsInstance) initCharts()

                echartsInstance?.showLoading()
        }

        // 隐藏加载状态
        function hideLoading() {

                if (!echartsInstance) initCharts()

                echartsInstance?.hideLoading()
        }

        // 生命钩子——组件挂载完成
        onMounted(() => {

                window.addEventListener(&#39;resize&#39;, onResize)

                if (autoUpdateSize) watchEl()

        })

        // 生命钩子——页面销毁
        onUnmounted(() => {

                window.removeEventListener(&#39;resize&#39;, onResize)

        })

        return { setOptions, getInstance }

}

를 사용합니다. 이제 다양한 차트를 구현하기 위한 몇 가지 옵션만 찾으면 됩니다. 많은 예제가 있는 꽤 좋은 웹사이트

PPChart

그중 하나를 시도해 보겠습니다.

아래 구성 코드를 복사하면 효과를 볼 수 있습니다

<template>
        <div ref="MyEcharts"></div>
</template>

<script setup>
import { onMounted, Ref, ref } from "vue";
import echarts from "../echarts/library";

//获取echarts实例
const MyEcharts = ref<HTMLDivElement | null>(null)

const { setOption, getInstance } = useECharts(MyEcharts as Ref<HTMLDivElement>, false, true)

onMounted(() => {
        
        setOption(option);

        const echartsInstance = getInstance()

})

</script>

App.vue

<template>
  <echarts></echarts>
</template>
<script setup>

import echarts from &#39;./components/EchartsComponents/a-echarts.vue&#39;

</script>
<style scoped></style>

완료! 도움이 되셨다면 좋아요를 남겨주세요! ! !

추천 학습: "

vue.js 비디오 튜토리얼

"

위 내용은 이 기사에서는 EChart를 올바르게 패키징하는 방법을 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!