1. 新建 echartsLib.js 文件,统一导入需要的组件

import * as echarts from "echarts/core";

import { SVGRenderer, CanvasRenderer } from "echarts/renderers";

import { BarChart, LineChart, PieChart } from "echarts/charts";

import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
ToolboxComponent,
DataZoomComponent,
TimelineComponent,
} from "echarts/components"; echarts.use([
BarChart,
LineChart,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
ToolboxComponent,
DataZoomComponent,
TimelineComponent,
CanvasRenderer
]); export default echarts;

2. 新建 newChart.js 文件封装用法

import { nextTick, onMounted, onUnmounted, unref } from "vue";
import echarts from "./echartsLib.js";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers"; export default function newChart(
elRef,
autoChartSize = false,
animation = false,
theme = "default"
) {
// 设置渲染模式
echarts.use(CanvasRenderer); // echart实例
let chartInstance = null; // 初始化图表
const initCharts = () => {
const el = unref(elRef);
if (!el || !unref(el)) {
return;
}
chartInstance = echarts.init(el, theme);
}; const setOption = (option) => {
nextTick(() => {
if (!chartInstance) {
initCharts();
if (!chartInstance) return;
} chartInstance.setOption(option);
hideLoading();
});
}; // 获取echart实例
function getInstance() {
if (!chartInstance) {
initCharts();
}
return chartInstance;
} function resize() {
chartInstance?.resize();
} // 监听元素大小
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,
};
}

3. 使用

<div ref="myChart"></div>

import newChart from "@/utils/newChart";
import { reactive, onMounted, ref } from "vue"; const myChart = ref(null);
const { setOption } = newChart(myChart, true, true);
let option = {} onMounted(() => {
setOption(option);
});

Vue3 + echarts 统一封装的更多相关文章

  1. 基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理

    在SqlSugar的开发框架的后端,我们基于Web API的封装了统一的返回结果,使得WebAPI的接口返回值更加简洁,而在前端,我们也需要统一对返回的结果进行解析,并获取和Web API接口对应的数 ...

  2. SpringBoot异常处理统一封装我来做-使用篇

    SpringBoot异常处理统一封装我来做-使用篇 简介 重复功能我来写.在 SpringBoot 项目里都有全局异常处理以及返回包装等,返回前端是带上succ.code.msg.data等字段.单个 ...

  3. api接口统一封装

    具体的接口api模块,例如authorization.js import axios from '../axiosWrapper' let prefix = process.env.API_ROOT ...

  4. SpringCloud异常处理统一封装我来做-使用篇

    SpringCloud异常处理统一封装我来做-使用篇 简介 重复功能我来写.在 SpringBoot 项目里都有全局异常处理以及返回包装等,返回前端是带上succ.code.msg.data等字段.单 ...

  5. SpringBoot接口 - 如何优雅的对接口返回内容统一封装?

    在以SpringBoot开发Restful接口时,统一返回方便前端进行开发和封装,以及出现时给出响应编码和信息.@pdai SpringBoot接口 - 如何优雅的对接口返回内容统一封装? RESTf ...

  6. ECharts图表——封装通用配置

    前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...

  7. vue3 专用 indexedDB 封装库,基于Promise告别回调地狱

    IndexedDB 的官网 https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 这个大概是官网吧,原始是英文的,现在陆续是出中 ...

  8. 简单方便统一封装的傻瓜式GET/POST库AliasNet正式公布~开源喽~

    在进行网页自动化时我们做得最多的工作就是不停的往某个URL GET/POST数据并得到相应的Response,通过分析Response的结果再进行下一步操作,通过网页自动化我们可以做很多工作,比如去某 ...

  9. Echarts后台封装option对象

    该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...

  10. axios统一封装

    本文代码参考了网上别人的资料,经过修改而来 /** * Created by zxf on 2017/9/6. * 封装统一的ajax请求,统一拦截请求,对不同的请求状态封装 * 通常说, ajax ...

随机推荐

  1. 调度器44—root_domain—更新路径

    1.  root_domain 的路径的赋值路径 kernel_init_freeable //内核初始化路径调用 [2] sched_init_smp //core.c 传参 cpu_active_ ...

  2. 2022-11-19学习内容-Server端代码编写-Client端代码编写

    1.Server端代码编写 1.1UserDBHelper.java package com.example.chapter07_server.database; import android.con ...

  3. Linux CentOS下搭建golang 1.17 开发环境

    1. 下载软件包并安装 cd ~ wget https://storage.googleapis.com/golang/go1.17.2.linux-amd64.tar.gz tar zxvf go1 ...

  4. C#判断窗体是否打开,并获取聚焦、未打开则新建一个子窗体

    在桌面程序开发会遇到的情况,托盘功能或者是小功能弹窗问题: 现有一个主窗体有子窗体 子窗体每个都可以新建其他窗体问题:新建子窗体时怎么判断子窗体是否打开?若子窗体打开则置顶获取焦点.若未打开则新建一个 ...

  5. Python - Numpy 学习笔记

    #python - Numpy learning import numpy as np #---Numpy学习笔记---(第四章)--- #切片,浅拷贝 a = np.arange(10) print ...

  6. qgis中的时间格式化函数

    为方便自己查询,尤其是年月日等在不同编程语言直接的差异,就从官方doc中截图放这

  7. tp项目部署到宝塔,运行nginx时无法访问首页之外的页面

    http://www.upwqy.com/details/254.html tp项目 部署到宝塔里面 运行环境nginx 直接访问首页是可以访问的.但是请求其他的接口的时候 报404 . 需要把下面这 ...

  8. 在VSCODE的终端运行Python时汉字乱码问题处理

    问题描述 在VSCODE的终端运行Python时,打印输出中文时汉字出现乱码, 文件编码都是UTF-8 解决步骤 1.打开Settings配置窗口(Ctrl+,) 2.搜索:code-runner.e ...

  9. 使用emplace_back的new initializer expression list treated as compound expression提示看聚合初始化和parameter pack

    测试代码 使用emplace_back可以避免不必要的构造和拷贝,而是直接在向量的内存位置执行construct进行构造,代码看起来也更加简洁. 但是在使用的时候,会发现有一些和直观不太对应的情况.例 ...

  10. Java 04-基础 数据类型转换 自动类型转换+强制类型转换

    1.数据类型自动转换 规则1:如果一个操作数为double型,则整个表达式提示至double型 规则2:满足自动类型转换条件,   两种类型要兼容,数值类型(整数和浮点)相互兼容   目标类型取值大于 ...