Vue中使用Echarts封装为公用组件(简单复制粘贴)

Vue中封装Echarts组件

  • 前提
  • 直奔主题

1
本文以Vue3代码演示 Vue2同理

前提

中文官网: https://echarts.apache.org/zh/index.html

npm安装Echarts

npm install echarts
or
pnpm install echarts
or
yarn add echarts

直奔主题

  1. 创建Echarts.vue文件,代码如下👇

    <template><div :id="id" :style="{ height, width }" />
    </template>
    <script setup>
    import * as echarts from "echarts";let myChart = ref(null);const props = defineProps({// 区分chartid: {type: String,default: 'e-chart',required: true},// echarts 画布宽高width: {type: String,default: '100%',},height: {type: String,default: '300px',},// echarts loadingloading: {type: Boolean,default: true,},// echarts需要得 options以及其他配置fullOptions: {type: Object,default: () => ({}),required: true},})//重绘图表函数
    const resizeHandler = () => {myChart.value.resize();
    }
    //设置防抖,保证无论拖动窗口大小,只执行一次获取浏览器宽高的方法
    const debounce = (fun, delay) => {let timer;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fun();}, delay);}
    };
    const cancalDebounce = debounce(resizeHandler, 50);//监听图表数据时候变化,重新渲染图表
    watch(() => [props.fullOptions.options, props.loading], () => {if (!props.loading) {myChart.value.hideLoading();myChart.value.setOption(props.fullOptions.options, true);nextTick(() => {cancalDebounce()})}
    }, { deep: true })//页面成功渲染,开始绘制图表
    onMounted(() => {//配置为 svg 形式,预防页面缩放而出现模糊问题;图表过于复杂时建议使用 CanvasmyChart.value = echarts.init(document.getElementById(props.id), { renderer: 'svg' })//加载图标myChart.value.showLoading({text: '',color: '#409eff',textColor: '#000',maskColor: 'rgba(255, 255, 255, .95)',zlevel: 0,lineWidth: 2,});if (!props.loading) {myChart.value.hideLoading();myChart.value.setOption(props.fullOptions.options, true);}//自适应不同屏幕时改变图表尺寸window.addEventListener('resize', cancalDebounce);
    })
    //页面销毁前,销毁事件和实例
    onBeforeUnmount(() => {window.removeEventListener('resize', cancalDebounce)myChart.value.dispose()
    })</script>
    
  2. 添加echarts得options配置文件optionsConfig.js,代码如下👇

    export const chartOptions = {// 推荐以setXXXOption方式命名setDemoOption(data) {let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']let echartData = [{name: '安全帽佩戴报警',value: '13'},{name: '非法闯入报警',value: '33'},{name: 'C类',value: '13'},{name: 'D类',value: '13'}]let formatNumber = function (num) {let reg = /(?=(\B)(\d{3})+$)/greturn num.toString().replace(reg, ',')}const option = {color: color,// tooltip: {//     trigger: 'item'// },legend: {orient: 'vertical',icon: 'rect',x: '5%',y: 'center',itemWidth: 12,itemHeight: 12,align: 'left',textStyle: {rich: {name: {fontSize: 12,color: 'rgba(255, 255, 255, 0.7)'},value: {fontSize: 16,padding: [0, 5, 0, 5],color: 'rgba(255, 255, 255, 0.7)'},unit: {fontSize: 12}}},formatter: function (name) {let res = echartData.filter((v) => v.name === name)res = res[0] || {}let unit = res.unit || ''// return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'return '{name|' + name + '} '},data: echartData},series: [{type: 'pie',radius: ['20%', '40%'],center: ['65%', '60%'],color,data: echartData.map((item, index) => {return {label: {color: color[index]},...item}}),hoverAnimation: false,itemStyle: {borderWidth: 2},labelLine: {show: true,length: 30,length2: 60,lineStyle: {color: '#0080ff'}},label: {show: true,formatter: (params) => {return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}'},padding: [0, -80, 25, -100],rich: {icon: {fontSize: 16},name: {fontSize: 12,padding: [0, 10, 0, 4]},value: {fontSize: 12,fontWeight: 'bold'}}}}]}return option},}
    
  3. 在Vue视图中引入Echarts组件使用,代码示例如下👇

    <ECharts id="demoEcharts" width="500px" height="500px" :full-options="echartsOptions" :loading="loading"></ECharts>
    
    //引入echarts的options配置文件optionsConfig.js
    import { chartOptions } from '@/components/ECharts/optionsConfig.js'//定义loading、echarts配置项
    const loading = ref(true)
    const echartsOptions = reactive({options:{}
    })// 模拟异步
    setTimeout(() => {loading.value = falseechartsOptions.options = chartOptions.setDemoOption();
    },500)
    






到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111


相关文章👇
图表集
在Vue2项目中使用echarts

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/100454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Solidity 合约漏洞,价值 38BNB 漏洞分析

Solidity 合约漏洞&#xff0c;价值 38BNB 漏洞分析 1. 漏洞简介 https://twitter.com/NumenAlert/status/1626447469361102850 https://twitter.com/bbbb/status/1626392605264351235 2. 相关地址或交易 攻击交易&#xff1a; https://bscscan.com/tx/0x146586f05a451313…

Unity官方文档中关于内存管理的翻译(2021.3)

原文:Memory in Unity - Unity 手册 Unity内存管理 为了确保您的应用程序运行时没有性能问题&#xff0c;了解Unity如何使用和分配内存非常重要。本文档的这一部分解释了Unity中内存是如何工作的&#xff0c;适用于希望了解如何提高应用程序内存性能的读者。 Unity使用三个内…

视频答题猜歌闯关娱乐微信小程序源码支持看视频答题闯关听歌猜歌答题流量主模式(团队奖励等)

功能强大UI美观的视频答题猜歌闯关娱乐微信小程序源码下载 后台管理资源本地化带数据和视频教程&#xff0c;这是一款拥有后端的闯关娱乐小程序。 支持个人小程序和企业小程序上线运营 功能强大齐全,带数据本地化 (数据在自己服务器自己管理无需担心第三方失效的问题) 支持看视…

【重拾C语言】七、指针(二)指针与数组(用指针标识数组、多维数组与指针、数组指针与指针数组)

目录 前言 七、指针 7.1~3 指针与变量、指针操作、指向指针的指针 7.4 指针与数组 7.4.1 用指针标识数组 7.4.2 应注意的问题 a. 数组名是指针常量 b. 指针变量的当前值 c. 数组超界 7.4.3 多维数组与指针 7.4.4 指针数组 a. 指针数组 b. 数组指针 c. 对比总结 前…

Reactor网络模式

文章目录 1. 关于Reactor模式的了解2. 基于Reactor模式实现epoll ET服务器2.1 EventItem类的实现2.2 Reactor类的实现Dispatcher函数AddEvent函数DelEvent函数EnableReadWrite函数 2.3 四个回调函数的实现acceptor回调函数recver回调函数sender回调函数errorer回调函数 3. epol…

突破封锁|华为芯片10年进化史:从K3V1到麒麟9000S

华为海思麒麟芯片过去10年研发历程回顾如下&#xff1a; 2009年&#xff1a;华为推出第一款手机芯片K3V1&#xff0c;采用65nm工艺制程&#xff0c;基于ARM11架构&#xff0c;主频600MHz&#xff0c;支持WCDMA/GSM双模网络。这款芯片搭载在华为U8800手机上&#xff0c;标志着华…

在SOLIDWORKS搭建一个简易的履带式机器人

文章目录 前言一、构建模型基本单元二、搭建车体模块三.插入轮子4.构建履带 前言 趁着十一假期&#xff0c;在solidworks中搭建了一个履带式机器人小车&#xff0c;计划将其应用在gazebo中完成多机器人编队的仿真。 一、构建模型基本单元 构建底板&#xff08;a面&#xff09…

面试总结-Redis篇章(十二)——Redis是单线程的,为什么还那么快

Redis是单线程的&#xff0c;为什么还那么快 Redis是单线程的&#xff0c;为什么还那么快什么是IO多路复用 阻塞IO非阻塞IOIO多路复用 Redis是单线程的&#xff0c;为什么还那么快 Redis是纯内存操作&#xff0c;执行速度非常快采用单线程&#xff0c;避免不必要的上下文切换可…

Python中套接字实现服务端和客户端3-3

3 创建客户端的步骤 创建客户端的步骤如图5所示。 图5 创建客户端的步骤 从图5可以看出&#xff0c;对于客户端来说&#xff0c;首先创建套接字&#xff0c;之后通过创建的套接字去连接服务端&#xff0c;如果连接成功&#xff0c;则继续通过该套接字向服务端发送数据&#x…

【Mybatis源码】IDEA中Mybatis源码环境搭建

一、Mybatis源码源 在github中找到Mybatis源码地址&#xff1a;https://github.com/mybatis/mybatis-3 找到Mybatis git地址 二、IDEA导入Mybatis源码 点击Clone下载Mybatis源码 三、选择Mybatis分支 选择Mybatis分支&#xff0c;这里我选择的是3.4.x分支

【ChatGPT】无需代理使用ChatGPT

推荐一个无需代理、可以直接使用的、免费的、无需客户端的、稳定的ChatGPT终端 支持GPT-3.5和CPT-4 无需境外手机号 该工具比较稳定&#xff0c;断流情况很少 GPTDOS 注册地址&#xff1a;GPTDOS &#xff08;使用我的邀请链接进行注册&#xff0c;双方都可以得到50000个toke…

Vue3 编译原理

文章目录 一、编译流程1. 解读入口文件 packgages/vue/index.ts2. compile函数的运行流程 二、AST 解析器1. ast 的生成2. 创建ast的根节点3. 解析子节点 parseChildren&#xff08;关键&#xff09;4. 解析模版元素 Element模版元素解析-举例分析 一、编译流程 1. 解读入口文…

嵌入式养成计划-33--数据库-sqlite3

七十一、 数据库 71.1 数据库基本概念 数据&#xff08;Data&#xff09; 能够输入计算机并能被计算机程序识别和处理的信息集合数据库 &#xff08;Database&#xff09;数据库是在数据库管理系统管理和控制之下&#xff0c;存放在存储介质上的数据集合 常用的数据库 大型数…

第二证券:5.5G时代将至 算力基建迎政策助力

昨日&#xff0c;A股全线低开&#xff0c;三大股指盘中均跌超1%&#xff0c;盘中冲高回落&#xff0c;午后逐渐止跌。到收盘&#xff0c;沪指跌0.44%报3096.92点&#xff0c;深成指微跌0.03%报10106.96点&#xff0c;创业板指跌0.26%报1998.61点&#xff0c;两市算计成交7700元…

【unity】制作一个角色的初始状态(左右跳二段跳)【2D横板动作游戏】

前言 hi~ 大家好&#xff01;欢迎大家来到我的全新unity学习记录系列。现在我想在2d横板游戏中&#xff0c;实现一个角色的初始状态-闲置状态、移动状态、空中状态。并且是利用状态机进行实现的。 本系列是跟着视频教程走的&#xff0c;所写也是作者个人的学习记录笔记。如有错…

linux centos出现No space left on device解决方案

问题是因为系统磁盘空间不足 解决方法: 找到那个磁盘不足问题 df -lh 发现/dev/mapper/cl-root磁盘已用50G,有如下 解决方案&#xff1a; 1、如果是虚拟机可以通过分配空间使其空间增加 2、将其他不常用磁盘空间分配给cl-root如&#xff08; /dev/mapper/cl-home &#…

unity 使用模拟器进行Profiler性能调试

这篇文章主要记录如何实现通过模拟器对打包的app游戏进行Profiler调试。主要记录一些比较重要的点。 准备工作 首先你要能够打包unity的安卓包&#xff0c;如果没有安装安卓组件&#xff0c;请先安装组件。 安装完成以后&#xff0c;会在unity的安装目录找到相应的SDK 这个…

嵌入式Linux裸机开发(五)中断管理

系列文章目录 文章目录 系列文章目录前言STM32 中断系统IMX6U中断控制8个中断GIC中断控制器GIC介绍中断IDGIC逻辑分块GIC协处理器 中断使能中断优先级 重点代码分析官方SDK函数start.S文件自行编写中断驱动文件 前言 最近在学习中发现&#xff0c;学Linux嵌入式不仅是对Linux的…

为Yolov7环境安装Cuba匹配的Pytorch

1. 查看Cuba版本 方法一 nvidia-smi 找到CUDA Version 方法二 Nvidia Control Panel > 系统信息 > 组件 > 2. 安装Cuba匹配版本的PyTorch https://pytorch.org/get-started/locally/这里使用conda安装 conda install pytorch torchvision torchaudio pytorch-cu…

JDK、JRE、JVM三者之间的关系

1.JDK 基本介绍 1) JDK 的全称 (Java Development Kit Java 开发工具包 ) JDK JRE java 的开发工具 [java, javac,javadoc,javap 等 ] 2) JDK 是提供给 Java 开发人员使用的&#xff0c;其中包含了 java 的开发工具&#xff0c;也包括了 JRE 。所以安装了 JDK &#xff0c;就…