vue2+echarts实现水球+外层动效
实现效果

安装echarts-liquidfill
- 需要安装
echarts-liquidfill!!! - 需要安装
echarts-liquidfill!!! - 需要安装
echarts-liquidfill!!!
安装命令
npm install echarts-liquidfill
版本如图:

实现代码
data() {return {chart: null,timer: null,angle: 0, //角度,用来做简单的动画效果的list: [],/* this.list = [rate,{value: rate,direction: "left", //波浪方向},]; */};},mounted() {this.$nextTick(() => {this.initChart();});},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();clearInterval(this.timer); // 销毁前,清除时间定时器this.timer = null;},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.chart3Ref);let that = this;let option = {series: [{name: "内线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.3,startAngle: ((0 + that.angle) * Math.PI) / 180,endAngle: ((90 + that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "内线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.3,startAngle: ((180 + that.angle) * Math.PI) / 180,endAngle: ((270 + that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "外线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.1,startAngle: ((270 + -that.angle) * Math.PI) / 180,endAngle: ((40 + -that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "外线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.1,startAngle: ((90 + -that.angle) * Math.PI) / 180,endAngle: ((220 + -that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "线头点",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);return {type: "circle",shape: {cx: point.x,cy: point.y,r: 5,},style: {stroke: "#0ff", //绿fill: "#0ff",},silent: true,};},data: [0],},{name: "线头点",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);return {type: "circle",shape: {cx: point.x,cy: point.y,r: 5,},style: {stroke: "#0ff", //绿fill: "#0ff",},silent: true,};},data: [0],},{// value: 50, // 内容 配合formattertype: "liquidFill",radius: "70%", // 控制中间圆球的尺寸(此处可以理解为距离外圈圆的距离控制)center: ["50%", "50%"],data: this.list, // data个数代表波浪数backgroundStyle: {borderWidth: this.fontSize(0.01),color: "rgba(62, 208, 255, 1)", // 球体本景色},amplitude: "6 %", //波浪的振幅// 修改波浪颜色color: [{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "#6CDEFC",},{offset: 0,color: "#429BF7",},],globalCoord: false,},],label: {normal: {formatter: function (params) {return params.value * 100 + " %";},textStyle: {fontSize: this.fontSize(0.3),color: "#fff",},},},backgroundStyle: {borderWidth: that.fontSize(0.01),color: "transparent",},outline: {show: true,itemStyle: {borderColor: "#0ff",borderWidth: that.fontSize(0.02),},borderDistance: that.fontSize(0.03),},},{type: "pie",z: 1,center: ["50%", "50%"],radius: ["72%", "75%"], // 控制外圈圆的粗细hoverAnimation: false,data: [{name: "",value: 0,labelLine: {show: false,},itemStyle: {color: "#00AFFF",},emphasis: {labelLine: {show: false,},},},],},],};this.chart.setOption(option);this.timer = setInterval(() => {this.draw();}, 100);},getCirlPoint(x0, y0, r, angle) {let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);return {x: x1,y: y1,};},draw() {this.angle = this.angle + 3;let option = this.chart.getOption();// console.log(option, "option");option.series[6].data = this.list;this.chart.setOption(option);},},
相关文章:
vue2+echarts实现水球+外层动效
实现效果 安装echarts-liquidfill 需要安装echarts-liquidfill!!!需要安装echarts-liquidfill!!!需要安装echarts-liquidfill!!! 安装命令 npm install echarts-liqui…...
C++ 基础思维导图(一)
目录 1、C基础 IO流 namespace 引用、const inline、函数参数 重载 2、类和对象 类举例 3、 内存管理 new/delete 对象内存分布 内存泄漏 4、继承 继承权限 继承中的构造与析构 菱形继承 1、C基础 IO流 #include <iostream> #include <iomanip> //…...
【gopher的java学习笔记】依赖管理方式对比(go mod maven)
什么是go mod go mod是Go语言官方引入的模块管理工具,旨在简化项目依赖管理,提高构建的可重复性和稳定性。以下是关于go mod的详细介绍: 在go mod之前,Go语言主要依赖GOPATH和vendor目录来管理项目依赖。然而,这种方式…...
CTFshow—远程命令执行
29-35 Web29 代码利用正则匹配过滤了flag,后面加了/i所以不区分大小写。 可以利用通配符绕过 匹配任何字符串/文本,包括空字符串;*代表任意字符(0个或多个) ls file * ? 匹配任何一个字符(不…...
Qt之简易音视频播放器设计(十五)
Qt开发 系列文章 - MediaPlayer(十五) 目录 前言 一、QMediaPlayer 二、实现方式 1.添加multimedia 2.创建类vedioplayer 3.UI设计 4.用户使用 5.效果演示 总结 前言 利用Qt进行音视频播放器设计,首先比较方便使用的是Qt自带的音视…...
ArrayList 和LinkedList的区别比较
前言 ArrayList和LinkedList的主要区别在于它们的底层数据结构、性能特点以及适用场景。ArrayList和LinkedList从名字分析,他们一个是Array(动态数组)的数据结构,一个是Linked(链表)的数据结构&#x…...
Wallpaper壁纸制作学习记录13
骨骼物理模拟 Wallpaper Engine还允许您为人偶变形骨骼配置某些物理模拟。选择骨骼时,点击编辑约束来配置骨骼这些属性。 警告 请记住,物理模拟可能会根据用户的最大FPS设置略微改变其行为。 Wallpaper Engine编辑器将始终以高帧速率渲染。您可以将壁纸…...
Visual Studio 2022安装教程
1、下载网址 Visual Studio 2022 IDE安装网址借助 Visual Studio 设计,具有自动完成、构建、调试、测试功能的代码将与 Git 管理和云部署融为一体。https://visualstudio.microsoft.com/zh-hans/vs/ 点击图片所示 双击运行 2、安装 点击C桌面开发(右边…...
std__invoke 的使用
std__invoke 的使用 文章目录 std__invoke 的使用1. std::invoke 的功能2. 语法3. 使用场景1. 调用普通函数2. 调用成员函数3. 调用成员函数(通过指针或引用)4. 调用函数对象(仿函数)5. 调用 Lambda 表达式 4. std::invoke 的优势…...
2501d,d.109
原文 2.109.0带来了15个主要更改和26个修复的Bugzilla问题.非常感谢39位贡献者,是他们使2.109.0变成可能. 更改编译器 1,[下一版]现在,为类型实例的成员设置别名是个错误 2,添加位字段内省功能 3,添加了从CTFE写入消息的__ctfeWrite 4,现在-verrors也限制弃用警告 5,dtoh为e…...
1、蓝牙打印机环境搭建
本项目采用stm32f103c8T6芯片,通过库函数实现打印功能,并配置有小程序蓝牙通信上位机。 1、创建文件夹目录 core文件夹存放核心库文件 LIB文件夹存放标准库函数文件 这里可以删减,用不到的可以不要。 obj存放编译后的文件 project存放项目…...
Axure RP11安装学习
安装: 官网下载地址:Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool 设置自己的安装目录,一步步安装即可。 汉化: 汉化包下载地址: 链接: https://pan.baidu.com/s/1eIRoGkVqAY3u3I27lgDJ6A…...
axios和fetch的实现原理以及区别,与XMLHttpRequest的关系,并结合react封装统一请求示例
Axios 和 Fetch 对比及统一请求封装 1. Axios 基础用法 1.1 安装和引入 // 安装 npm install axios// 引入 import axios from axios;1.2 基本请求方法 // GET 请求 axios.get(/api/users).then(response > console.log(response.data)).catch(error > console.error…...
矩阵运算提速——玩转opencv::Mat
介绍:用Eigen或opencv::Mat进行矩阵的运算,比用cpp的vector或vector进行矩阵运算要快吗? 使用 Eigen 或 OpenCV 的 cv::Mat 进行矩阵运算通常比使用 std::vector<int> 或 std::vector<double> 更快。这主要有以下几个原因: 优化的底层实现…...
C++软件设计模式之模板方法模式
模板方法模式是面向对象软件设计模式之一,其主要意图是在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的情况下重新定义算法的某些特定步骤。 动机 在软件开发中,常常会遇到这样的情…...
神经网络的初始化方式都有哪些?
一、概念 神经网络的初始化是深度学习中的一个关键步骤,它指的是在训练开始前为神经网络的权重和偏置设置初始值。合适的初始化方法可以加速模型的收敛,提高训练效果,甚至影响模型的最终性能。当然,目前我们使用Torch、TensorFlow…...
const成员函数
在c中经常看到这样的声明: class A{ ... int fun1() const; //const成员函数 int fun2() const; //const成员函数private: int a; //属于状态 static int b; //不属于状态,属于类 } 这个const关键字声明了这个函数是const成员函数,con…...
物理知识1——电流
说起电流,应该从电荷说起,而说起电荷,应该从原子说起。 1 原子及其结构 常见的物质是由分子构成的,而分子又是由原子构成的,有的分子是由多个原子构成,有的分子只由一个原子构成。而原子的构成如图1所示。…...
车载通信架构 --- 智能汽车通信前沿技术
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…...
Flutter中添加全局防护水印的实现
随着版权意识的加强,越来越多的应用开始在应用内部增加各种各样的水印信息,防止核心信息泄露,便于朔源。 效果如下: 在Flutter中增加全局水印的方式,目前有两种实现。 方案一,在native层添加一个遮罩层&a…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
