ECharts 是一個(gè)功能強(qiáng)大、靈活易用的數(shù)據(jù)可視化工具，適用于商業(yè)報(bào)表、數(shù)據(jù)分析、科研教育等多種場景。那么該如何優(yōu)雅的使用Echarts呢? 這里以vue3為例。

安裝echarts

pnpm i echarts

封裝公用方法

// @ts-nocheck
import * as echarts from 'echarts';
// 我們這里借助vueUse提高可視化體驗(yàn), useResizeObserver監(jiān)聽dom大小改變, useDebounceFn監(jiān)聽中添加防抖
import { useResizeObserver, useDebounceFn } from '@vueuse/core';
// 引入地圖json 按需,不是地圖則不需要
// import china from './china.json';
// echarts.registerMap('china', china);/*** @param el 圖表掛在dom* @param options 圖表配置*/
export function useECharts(el: HTMLElement, options: echarts.EChartsOption) {let chart: any;// 圖表初始化chart = echarts.init(el);// 設(shè)置圖表配置chart.setOption(options);// 掛載dom寬度改變監(jiān)聽重新渲染圖表useResizeObserver(el,useDebounceFn(() => {chart.resize();}, 50));// 定義setData方法const setData = (dataset: echarts.DatasetOption | echarts.DatasetOption[]) => {chart.setOption(Object.assign(options, { dataset }));};// 返回echarts實(shí)例,和更新data方法,方便更新圖表return [chart, { setData }];
}

圖表使用

<template><div ref="helloChartRef" class="chart"></div>
</template>
<script setup lang="ts">import { onMounted, ref } from 'vue';import { useECharts } from '@/utils';import type { EChartsType } from 'echarts';let chart: EChartsType;const helloChartRef = ref();const theme = ref('dark');onMounted(() => {// todo 為了vue模板看起來干凈,可以吧options抽離到外部js中去chart = useECharts(helloChartRef.value, {xAxis: {// x軸data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'],},yAxis: {// y軸},toolbox: {// 工具箱 官方文檔：http://echarts.apache.org/zh/option.html#toolboxfeature: {// 按鈕的位置和配置參數(shù)的排序有關(guān)restore: {}, // 刷新按鈕dataZoom: {// 縮放按鈕yAxisIndex: false, // 不選取y軸的坐標(biāo)（就是全選y軸）},saveAsImage: {}, // 保存為圖片的按鈕},},series: {// 圖表類型name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},});});
</script><style lang="less" scoped>.chart {height: 300px;}
</style>

效果

是不是很容易就上手了呢,也可以到我自己部署的案例網(wǎng)站看實(shí)際效果呢,還可以邊看效果邊看源碼。

相關(guān)網(wǎng)站

• echarts官方文檔
• 博客demo

摸魚博客就寫到這啦,聽我說謝謝你,因?yàn)橛心?我的博客瀏覽+1.