This article teaches you how to correctly package ECharts

This article brings you relevant knowledge about ECharts. It mainly talks about how to encapsulate ECharts. Friends who are interested can take a look below. I hope it will be helpful to everyone.

The beginning of the article is always difficult, so I won’t say more

This article involves: TypeScript, Vue3, echarts

Because of ECharts The usage scenarios are extremely broad, and there are many customized scenarios, so we won’t encapsulate reusable components. In my opinion, each component still needs an independent option. Here we only encapsulate the echats that are better to use

Directory

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

Code

library.ts

is introduced centrally in library.ts and mounts echarts Components and functions that need to be used

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

Some types that need to be used are specified here

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

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

useECharts.ts Main file

Introduce the functional modules that need to be used. The EChartsOption type is easy to report red when used. Here we temporarily use 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 }

}

to use it in the component

a-echarts.vue. We only use it now. You need to find some options to implement different charts

This is a good website with many examplesPPChart Let’s try any one,

Copy the configuration code below and you can see the effect

<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>

Finished! If you find it helpful, please leave a like! ! !

Recommended learning: "vue.js video tutorial"

The above is the detailed content of This article teaches you how to correctly package ECharts. For more information, please follow other related articles on the PHP Chinese website!