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

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语言官方引入的模块管理工具&#xff0c;旨在简化项目依赖管理&#xff0c;提高构建的可重复性和稳定性。以下是关于go mod的详细介绍&#xff1a; 在go mod之前&#xff0c;Go语言主要依赖GOPATH和vendor目录来管理项目依赖。然而&#xff0c;这种方式…...

CTFshow—远程命令执行

29-35 Web29 代码利用正则匹配过滤了flag&#xff0c;后面加了/i所以不区分大小写。 可以利用通配符绕过 匹配任何字符串&#xff0f;文本&#xff0c;包括空字符串&#xff1b;*代表任意字符&#xff08;0个或多个&#xff09; ls file * ? 匹配任何一个字符&#xff08;不…...

Qt之简易音视频播放器设计(十五)

Qt开发 系列文章 - MediaPlayer&#xff08;十五&#xff09; 目录 前言 一、QMediaPlayer 二、实现方式 1.添加multimedia 2.创建类vedioplayer 3.UI设计 4.用户使用 5.效果演示 总结 前言 利用Qt进行音视频播放器设计&#xff0c;首先比较方便使用的是Qt自带的音视…...

ArrayList 和LinkedList的区别比较

前言 ‌ArrayList和LinkedList的主要区别在于它们的底层数据结构、性能特点以及适用场景。‌ArrayList和LinkedList从名字分析&#xff0c;他们一个是Array&#xff08;动态数组&#xff09;的数据结构&#xff0c;一个是Linked&#xff08;链表&#xff09;的数据结构&#x…...

Wallpaper壁纸制作学习记录13

骨骼物理模拟 Wallpaper Engine还允许您为人偶变形骨骼配置某些物理模拟。选择骨骼时&#xff0c;点击编辑约束来配置骨骼这些属性。 警告 请记住&#xff0c;物理模拟可能会根据用户的最大FPS设置略微改变其行为。 Wallpaper Engine编辑器将始终以高帧速率渲染。您可以将壁纸…...

Visual Studio 2022安装教程

1、下载网址 Visual Studio 2022 IDE安装网址借助 Visual Studio 设计&#xff0c;具有自动完成、构建、调试、测试功能的代码将与 Git 管理和云部署融为一体。https://visualstudio.microsoft.com/zh-hans/vs/ 点击图片所示 双击运行 2、安装 点击C桌面开发&#xff08;右边…...

std__invoke 的使用

std__invoke 的使用 文章目录 std__invoke 的使用1. std::invoke 的功能2. 语法3. 使用场景1. 调用普通函数2. 调用成员函数3. 调用成员函数&#xff08;通过指针或引用&#xff09;4. 调用函数对象&#xff08;仿函数&#xff09;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芯片&#xff0c;通过库函数实现打印功能&#xff0c;并配置有小程序蓝牙通信上位机。 1、创建文件夹目录 core文件夹存放核心库文件 LIB文件夹存放标准库函数文件 这里可以删减&#xff0c;用不到的可以不要。 obj存放编译后的文件 project存放项目…...

Axure RP11安装学习

安装&#xff1a; 官网下载地址&#xff1a;Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool 设置自己的安装目录&#xff0c;一步步安装即可。 汉化&#xff1a; 汉化包下载地址&#xff1a; 链接: 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进行矩阵的运算&#xff0c;比用cpp的vector或vector进行矩阵运算要快吗? 使用 Eigen 或 OpenCV 的 cv::Mat 进行矩阵运算通常比使用 std::vector<int> 或 std::vector<double> 更快。这主要有以下几个原因&#xff1a; 优化的底层实现…...

C++软件设计模式之模板方法模式

模板方法模式是面向对象软件设计模式之一&#xff0c;其主要意图是在一个方法中定义一个算法的骨架&#xff0c;而将一些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的情况下重新定义算法的某些特定步骤。 动机 在软件开发中&#xff0c;常常会遇到这样的情…...

神经网络的初始化方式都有哪些?

一、概念 神经网络的初始化是深度学习中的一个关键步骤&#xff0c;它指的是在训练开始前为神经网络的权重和偏置设置初始值。合适的初始化方法可以加速模型的收敛&#xff0c;提高训练效果&#xff0c;甚至影响模型的最终性能。当然&#xff0c;目前我们使用Torch、TensorFlow…...

const成员函数

在c中经常看到这样的声明&#xff1a; class A{ ... int fun1() const; //const成员函数 int fun2() const; //const成员函数private: int a; //属于状态 static int b; //不属于状态&#xff0c;属于类 } 这个const关键字声明了这个函数是const成员函数&#xff0c;con…...

物理知识1——电流

说起电流&#xff0c;应该从电荷说起&#xff0c;而说起电荷&#xff0c;应该从原子说起。 1 原子及其结构 常见的物质是由分子构成的&#xff0c;而分子又是由原子构成的&#xff0c;有的分子是由多个原子构成&#xff0c;有的分子只由一个原子构成。而原子的构成如图1所示。…...

车载通信架构 --- 智能汽车通信前沿技术

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…...

Flutter中添加全局防护水印的实现

随着版权意识的加强&#xff0c;越来越多的应用开始在应用内部增加各种各样的水印信息&#xff0c;防止核心信息泄露&#xff0c;便于朔源。 效果如下&#xff1a; 在Flutter中增加全局水印的方式&#xff0c;目前有两种实现。 方案一&#xff0c;在native层添加一个遮罩层&a…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...