快捷導航

在Vue3中如何更優(yōu)雅的使用echart圖表詳解

更新時間：2022年05月23日 09:04:43 作者：_island

ECharts是一個強大的畫圖插件,在vue項目中,我們常常可以引用Echarts來完成完成一些圖表的操作,下面這篇文章主要給大家介紹了關(guān)于在Vue3中如何更優(yōu)雅的使用echart圖表的相關(guān)資料,需要的朋友可以參考下

前言

在大屏可視化項目中，我們常常需要用到很多的圖表組件，通常你會編寫很多的option對圖表進行渲染，以及引入它們所需的一些組件并使用echart.use。

在Vue2中我們常常把可復用的組件單獨抽離出來，再通過props、emit等方法向復用組件中傳入組件所需數(shù)據(jù)，而在Vue3中我們可以將一些邏輯功能寫成hook進行抽離和復用再傳入到視圖中，這會不僅讓你的組件中的代碼更加優(yōu)雅而且閱讀性更強。

封裝思路

引入模塊

我們先創(chuàng)建lib.ts文件，用于將echart圖表中所需要用到組件全部引入進來并導出。

由于引入的模塊過多，所以我們把它引入的模塊的代碼抽離出來，增加代碼的可閱讀性

// lib.ts
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;

封裝功能

在同級目錄下創(chuàng)建一個useChart.ts文件，這是我們復用echart圖表hook文件。

封裝功能如下：

監(jiān)聽圖表元素變化及視圖，自動重新渲染圖表適應(yīng)高度
可傳入主題、渲染模式（SVG、Canvas）
loading效果

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

export default function useChart(elRef: Ref<HTMLDivElement>, autoChartSize = false, animation: boolean = false, render: RenderType = RenderType.SVGRenderer, theme: ThemeType = ThemeType.Default) {
    // 渲染模式
    echarts.use(render === RenderType.SVGRenderer ? SVGRenderer : CanvasRenderer)
    // echart實例
    let chartInstance: echarts.ECharts | null = null;

    // 初始化echart
    const initCharts = () => {
        const el = unref(elRef)
        if (!el || !unref(el)) {
            return
        }
        chartInstance = echarts.init(el, theme);
    }

    // 更新/設(shè)置配置
    const setOption = (option: EChartsOption) => {
        nextTick(() => {
            if (!chartInstance) {
                initCharts();
                if (!chartInstance) return;
            }

            chartInstance.setOption(option)
            hideLoading()
        })

    }

    // 獲取echart實例
    function getInstance(): echarts.ECharts | null {
        if (!chartInstance) {
            initCharts();
        }
        return chartInstance;
    }

    // 更新大小
    function resize() {
        chartInstance?.resize();
    }

    // 監(jiān)聽元素大小
    function watchEl() {
        // 給元素添加過渡
        if (animation) { elRef.value.style.transition = 'width 1s, height 1s' }
        const resizeObserver = new ResizeObserver((entries => resize()))
        resizeObserver.observe(elRef.value);
    }

    // 顯示加載狀
    function showLoading() {
        if (!chartInstance) {
            initCharts();
        }
        chartInstance?.showLoading()
    }
    // 顯示加載狀
    function hideLoading() {
        if (!chartInstance) {
            initCharts();
        }
        chartInstance?.hideLoading()
    }

    onMounted(() => {
        window.addEventListener('resize', resize)
        if (autoChartSize) watchEl();
    })

    onUnmounted(() => {
        window.removeEventListener('resize', resize)
    })

    return {
        setOption,
        getInstance,
        showLoading,
        hideLoading
    }
}

// types.ts
export enum RenderType {
    SVGRenderer = 'SVGRenderer',
    CanvasRenderer = 'SVGRenderer'
}
export enum ThemeType {
    Light = 'light',
    Dark = 'dark',
    Default = 'default'
}

有了以上封裝好之后的代碼，我們在組件中使用echart圖表庫時將會更加簡單而高效。

使用例子

// index.vue
<template>
    <div ref="chartEl" :style="{ width: `300px`, height: `300px` }"></div>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref, computed, nextTick } from "vue";
import type { EChartsOption } from 'echarts'
import useChart, { RenderType, ThemeType } from '../../useChart'
import axios from 'axios'

const option = computed<EChartsOption>(() => ({
   // ...chart option
}))

const chartEl = ref<HTMLDivElement | null>(null)

const {
    setOption,
    showLoading
} = useChart(chartEl as Ref<HTMLDivElement>, true, true, RenderType.SVGRenderer, ThemeType.Dark)

onMounted(() => {
    nextTick(() => {
    	// 顯示loading
        showLoading()
        // 假裝有網(wǎng)絡(luò)請求 ...
        // 渲染圖表
        setOption(option.value);
    })
})
</script>

Github倉庫地址（含例子）：github.com/QC2168/useC…