当前位置：首页 > news >正文

vue实现echarts饼图自动轮播

news 来源：原创 2025/5/14 7:56:44

echarts官网：Examples - Apache ECharts

echartsFn.ts 把echarts函数封装成一个文件

import * as echarts from "echarts";const seriesData = [{"value": 12,"name": "过流报警"},{"value": 102,"name": "高温报警"},{"value": 1,"name": "缺相报警"},{"value": 3,"name": "分闸"},{"value": 1,"name": "断电分闸"},{"value": 248,"name": "机械闭锁"},{"value": 97,"name": "漏电闭锁"},{"value": 4,"name": "过载闭锁"},{"value": 5,"name": "短路闭锁"}
]// 报警类型统计
const initVisualizingContentLeftBottom = async (dom: HTMLElement | null, state: any) => {const myChart = dom && echarts.init(dom);const option = {legend: {selectedMode: false, //禁止鼠标移到legend弹出饼图中间的文字x: "0",icon: "circle",textStyle: {color: "#fff",fontSize: "14px",},itemWidth: 10,itemHeight: 10,itemGap: 5,},series: [{center: ["center", "65%"], // 这个属性调整图像的位置！！！！！type: "pie",radius: ["45%", "60%"],itemStyle: {borderRadius: 15, // 设置圆环的圆角弧度},emphasis: {// 设置高亮时显示标签label: {show: true,},scale: true, // 设置高亮时放大图形scaleSize: 15,},label: {// 设置图形标签样式color: "#fff", //图例文字颜色show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠position: "center",// 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器formatter: "{d_style|{d}}{per_style|%}\n\n{b_style|{b}}",// 为标签内容指定样式，只能设置series-pie.label支持的样式rich: {d_style: {fontSize: 40,},per_style: {fontSize: 30,},b_style: {fontSize: 20,},},},data: seriesData,},],};myChart && myChart.setOption(option);let currentIndex = -1; // 当前高亮图形在饼图数据中的下标if (state.changePieInterval) clearInterval(state.changePieInterval); //关闭state.changePieInterval = myChart && setInterval(selectPie, 1000); // 设置自动切换高亮图形的定时器function highlightPie() {// 取消所有高亮并高亮当前图形// 遍历饼图数据，取消所有图形的高亮效果for (var idx in option.series[0].data)myChart &&myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: idx,});// 高亮当前图形myChart &&myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: currentIndex,});}myChart &&myChart.on("mouseover", (params: any) => {// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形clearInterval(state.changePieInterval);currentIndex = params.dataIndex;highlightPie();});myChart &&myChart.on("mouseout", (params: any) => {// 用户鼠标移出时，重新开始自动切换if (state.changePieInterval) clearInterval(state.changePieInterval);state.changePieInterval = setInterval(selectPie, 1000);});function selectPie() {// 高亮效果切换到下一个图形var dataLen = option.series[0].data.length;currentIndex = (currentIndex + 1) % dataLen;highlightPie();}
};export {initVisualizingContentLeftBottom,
};

页面文件

template代码

<div ref="visualizingContentLeftBottom" style="height: 100%;"></div>

script代码

import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
import { initVisualizingContentLeftBottom } from "./echartsFn";export default defineComponent({setup() {// 页面卸载时onUnmounted(() => {clearInterval(state.changePieInterval);state.changePieInterval = null});// 页面加载时onMounted(() => {initVisualizingContentLeftBottom(proxy.$refs.visualizingContentLeftBottom, state)});const { proxy }: any = getCurrentInstance();const state = reactive({changePieInterval: null as any,});}
});

效果图

vue实现echarts饼图自动轮播

echarts官网：Examples - Apache ECharts echartsFn.ts 把echarts函数封装成一个文件 import * as echarts from "echarts";const seriesData [{"value": 12,"name": "过流报警"},{"value": 102,"name&qu…...

编程日记 2025/5/14 7:56:44

数据分析的尽头是web APP？

数据分析的尽头是web APP？ 在做了一些数据分析的项目，也制作了一些数据分析相关的web APP之后，总结自己的一些想法和大家分享。 1.web APP是呈现数据分析结果的另外一种形式。数据分析常见的结果是数据分析报告，可以是PPT或者…...

编程日记 2025/5/8 16:53:11

windows电脑上安装树莓派操作系统

在Windows电脑上安装树莓派通常涉及以下几个步骤：准备安装工具、下载树莓派系统镜像、烧录系统到SD卡、配置树莓派以及远程连接（如果需要无显示器操作）。以下是详细的步骤说明：一、准备安装工具安装树莓派官方烧录工具：下载并安装Raspberry Pi Imager。这是一个官方的…...

编程日记 2025/5/13 2:31:41

openssl编译安装升级为新版本

文章目录 1、下载版本2、上传并解压3、编译安装4、验证 1、下载版本 https://www.openssl.org/source/old/1.1.1/ 2、上传并解压 tar zxvf openssl-1.1.1s.tar.gz 3、编译安装注意：要提前安装好 gcc perl cd openssl-1.1.1s ./config --prefix/usr/local/open…...

编程日记 2025/5/12 1:58:09

监控视频汇聚平台：Liveweb视频监控管理平台方案详细介绍

Liveweb国标视频综合管理平台是一款以视频为核心的智慧物联应用平台。它基于分布式、负载均衡等流媒体技术进行开发，提供广泛兼容、安全可靠、开放共享的视频综合服务。该平台具备多种功能，包括视频直播、录像、回放、检索、云存储、告警上报、语音对讲、…...

编程日记 2025/5/13 14:00:38

【论文复现】基于BERT的语义分析实现

📝个人主页🌹：Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ WRN: 宽度残差网络概述语义分类文本分类情感分类实现原理核心逻辑pre_deal.pytrain.pytest_demo.py 实现方式&演示效果训练阶段测试阶…...

编程日记 2025/5/8 12:24:07

SMOTE | 使用SMOTE算法来处理不平衡数据的问题

需求在学习机器学习识别信用卡欺诈交易这个项目的时候，样本数据集非常不平衡： data_df_new[Class].value_counts()0： 正常 1：欺诈在这里了解到了SMOTE算法： 过采样（Oversampling） 过采样是…...

编程日记 2025/5/10 4:58:02

week 9 - Entity-Relationship Modelling

一、数据库设计的重要性 • 设计数据库可使查询更高效、简洁。 • 减少数据冗余（data redundancy），提升表的整洁性。二、Key Components of ER Modelling 实体-关系建模的基本构成 1. 实体（Entity）：表…...

编程日记 2025/5/12 5:54:42

彻底理解如何保证ElasticSearch和数据库数据一致性问题

一.业务场景举例需求： 一个卖房业务，双十一前一天，维护楼盘的运营人员突然接到合作开发商的通知，需要上线一批热门的楼盘列表，上传完成后，C端小程序支持按楼盘的名称、户型、面积等产品属性全模糊搜索热门…...

编程日记 2025/5/10 3:06:54

JS基础知识05-对象、Ajax、JSON

目录一、对象 1.1.对象（Object） 1.创建对象对象的常用方法 1.2.Math对象 1.数学常数 2.数学函数 3.随机数生成 4.对数方法 1.3.Date对象创建Date对象获取日期和时间的方法设置日期和时间的方法日期的格式化方法二、Ajax 1.创建XM…...

编程日记 2025/5/11 20:33:17

pandas 读写excel

在Python中，使用Pandas库读写Excel文件是一个常见的操作。Pandas提供了read_excel和to_excel方法来分别实现读取和写入Excel文件的功能。以下是一些基本的示例： ### 读取Excel文件 python import pandas as pd # 读取Excel文件 df pd.read_excel(pat…...

编程日记 2025/5/11 10:39:33

echo off REM 清屏 cls title 安全策略设置批处理 color f0 echo **************************************** echo write by afei echo https://www.jianshu.com/u/ea4c85fbe8c7 echo **************************************** pause cls color 3f echo ********************…...

编程日记 2025/5/11 15:00:16

28.100ASK_T113-PRO Linux+QT 显示一张照片

1.添加资源文件 2. 主要代码 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QImage> #include <QPixmap>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);QIm…...

编程日记 2025/5/8 3:57:17

Vue中的计算属性和监听属性

在Vue中，计算属性和监听属性是两种非常有用的功能，它们可以帮助我们更好地管理数据和响应数据的变化。计算属性计算属性是基于它们的依赖进行缓存的。只有当依赖发生变化时，计算属性才会重新计算。这使得计算属性非常适合用于执行昂贵的计…...

编程日记 2025/5/12 21:52:03

基于vite创建的react18项目的单元测试

题外话最近一个小伙伴进了字节外包，第一个活就是让他写一个单元测试。嗯，说实话，在今天之前我只知道一些理论，但是并没有实操过，于是我就试验了一下。通过查询资料，大拿们基本都说基于vite的项目&…...

编程日记 2025/5/4 22:06:14

网络——HTTP与HTTPS三次握手和四次挥手

HTTP协议本身并不直接处理TCP连接的建立和关闭，这些是由底层的TCP协议来完成的。但是，由于HTTP通常运行在TCP之上，因此理解TCP的三次握手（用于建立连接）和四次挥手（用于关闭连接）对于理解HTTP通…...

编程日记 2025/5/8 10:02:59

自然语言处理:第六十六章 17 种 prompt engineering 方法大集合

本人项目地址大全：Victor94-king/NLP__ManVictor: CSDN of ManVictor 原文地址：17 种 prompt engineering 方法大集合写在前面: 笔者更新不易，希望走过路过点个关注和赞，笔芯!!! 写在前面: 笔者更新不易，希望走过路…...

编程日记 2025/5/13 17:38:10

MySQL —— MySQL 程序

目录前言一、MySQL 程序简介二、mysqld -- MySQL 服务器三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 （1）指定选项的方式 （2）mysql 客户端命令常用选项 （3）在命令行中使…...

编程日记 2025/5/5 3:00:12

AI蛋白质设计与人工智能药物设计

AI蛋白质设计与人工智能药物设计 AI蛋白质设计一、蛋白质相关的深度学习简介 1.基础概念 1.1.机器学习简介：从手写数字识别到大语言模型 1.2.蛋白质结构预测与设计回顾 1.3.Linux简介 1.4.代码环境：VS code和Jupyter notebook* 1.5.Python关键概…...

编程日记 2025/5/12 0:09:41

Java基础之控制语句：开启编程逻辑之门

一、Java控制语句概述 Java 中的控制语句主要分为选择结构、循环结构和跳转语句三大类，它们在程序中起着至关重要的作用，能够决定程序的执行流程。选择结构用于根据不同的条件执行不同的代码路径，主要包括 if 语句和 switch 语句。if 语句有…...

编程日记 2025/5/10 9:47:52

安装Fcitx5输入框架和输入法自动部署脚本(来自Mark24)-Ubuntu通用

在Ubuntu22.04上安装rime中文输入法的基本教程上述文章接近废弃。使用新逻辑配置基本的Fcitx5的输入法。安装第一步，下载相关组件 sudo nala install vim sudo nala install ruby sudo nala install fcitx5-rime第二步，设置语言为Fcitx5 而非默认…...

编程日记 2025/5/13 9:03:42

软件无线电(SDR)的架构及相关术语

今天简要介绍实现无线电系统调制和解调的主要方法，这在软件定义无线电(SDR)的背景下很重要。外差和超外差无线电发射机有两种主要架构——一种是从基带频率直接调制到射频频率（称为外差），而第二种超外差是通过两个调制阶段来实…...

编程日记 2025/5/8 17:10:42

刷题分享11_30

刷题分享 1.(力扣216)这是一道回溯算法的经典题目。对于回溯算法，一般backtracking是没有返回值的，参数也比较不固定，需要根据每个题的特点来具体分析。这道题因为不能取到重复元素，所以需要额外加一个参数startindex，…...

编程日记 2025/5/10 2:51:06

Java技术复习提升 17反射

本章涉及到框架开发中必用的反射以及常用方法很重要注重理解并实践第17章反射 17.1 一个需求引出反射 package com.fsl; public class Cat {private String name "招财猫";public int age 10; //public的public Cat() {} //无参构造器public Cat(String name)…...

编程日记 2025/5/12 10:18:17

Python中的字符串

Python中的字符串在Python中，字符串是用于表示文本数据的基本数据类型。字符串可以包含字母、数字、符号和空格等字符。Python提供了多种方式来定义和操作字符串。字符串的定义在Python中，字符串可以用单引号或双引号 "" 括起来。例如…...

编程日记 2025/5/13 23:37:45

B站狂神说Mybatis+Spring+SpringMVC整合理解(ssm框架整合)

文章目录 0.写在前面(对mybatis,spring的理解)（不看可跳过）0.1 为什么需要mybatis0.2 为什么需要spring0.3为什么需要springmvc 1.新建ssmbuild数据库2.新建Maven项目3.初始化步骤3.1 配置下载maven依赖，构建资源导出3.2 连接数据库3.3建包&a…...

编程日记 2025/5/1 5:05:43

python:文件操作

一、文件路径在Windows系统中，每个磁盘都有自己的根目录，用分区名加反斜杠来表示。我们定位文件的位置有两种方法，一种是绝对路径，另一种是相对路径。绝对路径是从根目录出发的路径，路径中的每个路径之间用反斜杠来分…...

编程日记 2025/5/11 22:06:11

ECharts柱状图-极坐标系下的堆叠柱状图，附视频讲解与代码下载

引言： 在数据可视化的世界里，ECharts凭借其丰富的图表类型和强大的配置能力，成为了众多开发者的首选。今天，我将带大家一起实现一个柱状图图表，通过该图表我们可以直观地展示和分析数据。此外，我还将提供…...

编程日记 2025/5/14 11:16:42

HDMI协议

HDMI设计3--HDMI 1.4/2.0 Transmitter Subsystem IP - 皮皮祥 - 博客园 HDMI设计4--HDMI 1.4/2.0 Receiver Subsystem IP - 皮皮祥 - 博客园 HDMI协议 - 标签 - 皮皮祥 - 博客园...

编程日记 2025/3/4 20:20:29

SpringBoot集成Flowable

一、工作流介绍 1、概念通过计算机对业务流程的自动化管理。工作流是建立在业务流程的基础上，一个软件的系统核心根本上还是系统的业务流程，工作流只是协助进行业务流程管理。解决的是：在多个参与者之间按照某种预定义的规则自动进行传递文…...

编程日记 2025/5/12 11:23:39

五，[GXYCTF2019]Ping Ping Ping1

进入靶场，有提示我们在url试着输入本地IP，返回了ping命令既然要在url处传参，那就用postman，再输入ip127.0.0.1 & ls，试着列出目录内容 ok，好像是个脏话,它过滤了空格试着穿越又看到了脏话&#xff0…...

编程日记 2025/5/10 11:25:10

Linux -初识与基础指令1

博客主页：【夜泉_ly】本文专栏：【Linux】欢迎点赞👍收藏⭐关注❤️ 文章目录 📚 前言🖥️ 初识🔐 登录 root用户👥 两种用户➕ 添加用户🧑‍💻 登录普通用户⚙️ 常见…...

编程日记 2025/5/11 17:41:44

单片机学习笔记 12. 定时/计数器_定时

更多单片机学习笔记：单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘单片机学习笔记 8…...

编程日记 2025/5/12 8:54:38

采用片上光学相控阵的激光雷达

激光雷达基础知识 LIDAR 基于众所周知的 RADAR 原理雷达是20世纪初就存在的著名技术激光雷达使用光频率而不是无线电波激光雷达和雷达使用相控阵的激光雷达通过干涉来提高方向性激光雷达的输出剖面是阵列因子和单天线远场的乘积。 N ：天线数量 k ：…...

编程日记 2025/5/12 13:22:34

LeetCode Hot100 11~20

目录子串11. 滑动窗口最大值12. 最小覆盖子串数组13. 最大子数组和14. 合并区间15. 翻转数组16. 除数字自身以外的乘积17. 缺失的第一个正数矩阵18. 矩阵置零19. 螺旋矩阵20 旋转图像90度子串 11. 滑动窗口最大值本题使用deque来维护一个单调队列注意删除元素和添加元素…...

编程日记 2025/5/13 3:11:51

泰州榉之乡全托机构探讨：自闭症孩子精细动作训练之法

当发现自闭症孩子精细动作落后时，家长们往往会感到担忧和困惑。那么，自闭症孩子精细动作落后该如何训练呢？今天，泰州榉之乡全托机构就来为大家详细解答。榉之乡大龄自闭症托养机构在江苏、广东、江西等地都有分校，一直…...

编程日记 2025/5/11 13:34:36

Mybatis：CRUD数据操作之修改数据update

Mybatis基础环境准备请看：Mybatis基础环境准备本篇讲解Mybati数据CRUD数据操作之修改数据用户在该页面书写需要修改的数据，点击提交按钮，就会将数据库中对应的数据进行修改。注意一点，如果哪儿个输入框没有输入内容&#xff…...

编程日记 2025/5/3 23:04:18

模拟器快速上手，助力HarmonyOS应用/服务高效开发

文章目录 1 创建模拟器1）打开设备管理界面2）设置本地模拟器实例存储路径3）创建一个模拟器（1）选择模拟器设备（2）创建模拟器（3）启动模拟器（4）关闭模…...

编程日记 2025/5/13 3:06:48

ERROR in [eslint] Invalid Options ‘extensions‘ has been removed.

看着这个报错感觉是版本不对引起的 ERROR in [eslint] Invalid Options: - Unknown options: extensions - extensions has been removed. ERROR in Error: Child compilation failed: [eslint] Invalid Options: - Unknown options: extensions - extensions has b…...

编程日记 2025/5/7 10:36:35

40分钟学 Go 语言高并发：GC原理与优化

GC原理与优化一、GC基础知识概览方面核心概念重要性优化目标GC算法三色标记法、并发GC⭐⭐⭐⭐⭐理解GC工作原理垃圾回收策略触发条件、回收步骤⭐⭐⭐⭐⭐掌握GC过程GC调优参数设置、性能监控⭐⭐⭐⭐优化GC效果内存管理内存分配、内存逃逸⭐⭐⭐⭐⭐减少内存压力让我们…...

编程日记 2025/5/13 17:32:37

【UG\NX二次开发-Block UI】指定方位 VisibleManipulatorHandles 设置控制器手柄可见

特定于块属性 VisibleManipulatorHandles 值 Origin 0x1 原点 Ratate X 0x10 旋转 Ratate Y 0x20 Ratate Z 0x40 Translate X 0x2 平移 Translate Y 0x4 Translate Z 0…...

编程日记 2025/5/13 11:06:45

【Spring】聊聊@EventListener注解原理

1.一个Demo出发在平时的开发中，其实编写同步线程代码是比较容易的，但是如何将一些操作和另外一些操作进行解除耦合，而事件方式是一种很好的解耦合方式，比如当一个用户注销一个APP之后，需要发送一些短信让他引流回来…...

编程日记 2025/5/11 15:24:52

Online Judge——【前端项目初始化】全局状态管理

状态管理：所有页面全局共享的变量，而不是局限在某一个页面中。适合作为全局状态的数据：比如已登录用户信息。目录一、创建user.ts文件二、定义user模块三、获取静态变量四、修改状态变量一、创建user.ts文件我们要实现状态管理的话&am…...

编程日记 2025/5/8 21:36:19

微信小程序构建npm失败，没有找到可以构建的npm包

方法：打开终端输入 npm init -y npm install 或 yarn install我用 npm install 下载后并没有出现node_modules, 又用 yarn install 下载，成功了下载好后，在project.config.json文件添加 "showShadowRootInWxmlPanel": true, …...

编程日记 2025/5/14 9:13:25

《数字图像处理基础》学习07-图像几何变换之最近邻插值法放大图像

目录一，概念二，题目及matlab实现 1，解题思路 2，matlab实现 1）matlab思路 2）完整代码三，放大图像及matlab实现一，概念通过上一篇，我已经学习了使用最邻近插…...

编程日记 2025/5/10 15:05:38

科技为翼助残向新高德地图无障碍导航规划突破1.5亿次

今年12月03日是第33个国际残疾人日。在当下科技发展日新月异的时代，如何让残障人士共享科技红利、平等地参与社会生活，成为当前社会关注的热点。中国有超过8500万残障人士，其中超过2400万为肢残人群，视力障碍残疾人数超过1700万…...

编程日记 2025/5/9 5:23:26

数据结构——有序二叉树的构建遍历查找

树节点先定义树节点结构，代码如下： package tree;public class TreeNode {public int data;public TreeNode left;public TreeNode right;//数据的类型决定数据在内存中的存储形式,//这样可以接受本类型的数据public TreeNode(int data) {this.datada…...

编程日记 2025/5/12 14:45:21

React 状态管理：Redux 和 MobX 的对比与选择

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2025/5/10 4:24:34

CSDN设置成黑色背景(谷歌 Edge)

一.谷歌浏览器浏览器地址输入：Chrome://flags搜索框输入：enable-force-dark将default 改成 enabled，点击重启浏览器二.Edge浏览器浏览器地址输入：edge://flags搜索里面输入Auto Dark Mode for Web Contents将default 改成 e…...

编程日记 2025/5/12 17:50:28

SAP Native SQL 的简单说明

Open SQL访问数据字典中声明的数据库表，不区分数据库类型，执行时会自动转换为对应的语句，且可以使用本地缓存。Native SQL使用特定于数据库的SQL语句,但是可以访问比Open SQL 更多的表，更多的操作，缺点也很明显&#x…...

编程日记 2025/5/9 13:28:26

相关文章：