【Echarts】vue3打开echarts的正确方式

2025/3/31 21:15:13 来源：https://blog.csdn.net/m0_43599959/article/details/142213398 浏览: 次关键词：【Echarts】vue3打开echarts的正确方式

ECharts 是一个功能强大、灵活易用的数据可视化工具，适用于商业报表、数据分析、科研教育等多种场景。那么该如何优雅的使用Echarts呢? 这里以vue3为例。

安装echarts

pnpm i echarts

封装公用方法

// @ts-nocheck
import * as echarts from 'echarts';
// 我们这里借助vueUse提高可视化体验, useResizeObserver监听dom大小改变, useDebounceFn监听中添加防抖
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);// 设置图表配置chart.setOption(options);// 挂载dom宽度改变监听重新渲染图表useResizeObserver(el,useDebounceFn(() => {chart.resize();}, 50));// 定义setData方法const setData = (dataset: echarts.DatasetOption | echarts.DatasetOption[]) => {chart.setOption(Object.assign(options, { dataset }));};// 返回echarts实例,和更新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: {// 按钮的位置和配置参数的排序有关restore: {}, // 刷新按钮dataZoom: {// 缩放按钮yAxisIndex: false, // 不选取y轴的坐标（就是全选y轴）},saveAsImage: {}, // 保存为图片的按钮},},series: {// 图表类型name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},});});
</script><style lang="less" scoped>.chart {height: 300px;}
</style>