In diesem Artikel erfahren Sie, wie Sie ECharts richtig verpacken

Dieser Artikel vermittelt Ihnen relevantes Wissen über ECharts. Es geht hauptsächlich darum, wie man ECharts kapselt. Ich hoffe, dass es für alle hilfreich ist.

Der Anfang eines Artikels ist immer schwierig, daher werde ich nicht auf Details eingehen

Dieser Artikel umfasst: TypeScript, Vue3, Echarts

Da die Verwendungsszenarien von ECharts äußerst umfangreich sind und es viele benutzerdefinierte Szenarien gibt , daher werde ich wiederverwendbare Komponenten nicht kapseln. Meiner Meinung nach benötigt jede Komponente noch eine unabhängige Option. Hier kapseln wir nur das besser genutzte echats

directory

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

library.ts

library. ts

Führen Sie zentral die Komponenten und Funktionen ein, die zum Mounten von Echarts erforderlich sind.

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.tsEinige Typen, die verwendet werden müssen, sind hier standardisiert Wenn das Funktionsmodul verwendet wird, ist der Typ EChartsOption einfach zu melden. Hier verwenden wir vorübergehend alle Optionen in der Komponente a-echarts.vue. Jetzt müssen wir nur noch einige Optionen finden, um verschiedene Diagramme zu implementieren eine ziemlich gute Website mit vielen Beispielen

PPChart

Probieren wir eines davon aus,

Kopieren Sie den Konfigurationscode unten und Sie können den Effekt sehen

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

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

App.vue

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 }

}

fertig! Wenn Sie es hilfreich finden, hinterlassen Sie bitte ein „Gefällt mir“! ! ! Empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonIn diesem Artikel erfahren Sie, wie Sie ECharts richtig verpacken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!