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);},},

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

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

相关文章

OpenStack的核心组件、主要特点和使用场景

OpenStack 是一个开源的云计算平台,主要用于构建和管理公共及私有云环境。它由多个模块组成,提供虚拟化资源管理、存储管理、网络配置等功能,旨在为数据中心提供自动化的、灵活的云基础设施服务。OpenStack最初由NASA和Rackspace共同开发&…

Java 代码编译和解析方法信息

使用 javassist 可以操作字节码文件,我分享一下一个简单的编译和类方法解析代码。 什么是 Javassist? Javassist 是一个强大的字节码操作工具,它提供了在运行时编辑 Java 字节码的能力。通过Javassist,开发人员可以动态地创建和…

SpringCloud源码分析-Lettue Redis

redis connection异步发送 底层是nio channel

ELK入门教程(超详细)

什么是ELK? ELK是Elasticsearch、Logstash、Kibana三大开源框架首字母大写简称(后来出现的filebeat属于beats家族中的一员,可以用来替代logstash的数据收集功能,比较轻量级),也被称为Elastic Stack。 Filebeat Filebeat是用于转…

Wireshark和科来网络分析系统

Wireshark 是一款功能强大的网络协议分析工具,主要用于捕获和分析网络流量,帮助用户排查网络问题、进行安全分析和学习网络协议。以下是 Wireshark 的基础使用指南: 1. 安装 Wireshark 访问 Wireshark 官网 下载并安装适合你操作系统的版本…

机器学习之逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告

逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告 目录 逻辑回归算法、数据标准化处理及数据预测和数据的分类结果报告1 逻辑回归算法1.1 概念理解1.2 算法导入1.3 算法优缺点 2 LogisticRegression理解2.1查看参数定义2.2 参数理解2.3 方法2.4基本格式 3 数据标准…

家政上门小程序如何创建?家政服务怎么能少了小程序帮手

在如今这个“忙到没时间打扫”的时代,家政服务变得越来越受欢迎。为了提高效率、减少沟通成本,很多家政公司都已经开始借助小程序的力量。那么,家政上门小程序到底该如何创建呢?小程序又是如何帮助家政服务更好地满足客户需求的呢?本文将为…

机器学习-感知机-神经网络-激活函数-正反向传播-梯度消失-dropout

文章目录 感知机工作流程 神经网络区别各种各样的神经网络 激活函数激活函数类型Sigmoid 函数ReLU函数Leaky ReLU 函数Tanh 函数 正向传播反向传播梯度消失(gradient vanish)如何解决 Dropout使用 PyTorch实战神经网络算法(手写MNIST数字识别)viewsoftmax和log-softmaxcross-en…

生态碳汇涡度相关监测与通量数据分析实践技术应用

1.以涡度通量塔的高频观测数据为例,基于MATLAB开展上机操作: 2.涡度通量观测基本概况:观测技术方法、数据获取与预处理等 3.涡度通量数据质量控制:通量数据异常值识别与剔除等 4.涡度通量数据缺失插补:结合气象数据…

Win11电脑Cursor默认打开markdown文件,如何修改markdown文件默认打开方式为Typora?

问题 Windows 11电脑上最近新装了cursor,导致我的markdown文件的默认打开方式被自动设置为cursor,那么我想将默认打开方式设置为Typora,应该怎么做呢? 解决方法 选中一个markdown文件,右击,选择属性。 …

基本算法——回归

目录 创建工程 加载数据 分析属性 创建与评估回归模型 线性回归 回归树 评估 完整代码 结论 本节将通过分析能源效率数据集(Tsanas和Xifara,2012)学习基本的回归算法。我们将基 于建筑的结构特点(比如表面、墙体与屋顶面…

PP模块部分BAPI函数

工艺路线 BAPI_ROUTING_CREATE 创建工艺路线 BAPI_ROUTING_EXISTENCE_CHECK 检查工艺路线是否存在 参考操作集 BAPI_REFSETOFOPERATIONS_CREATE 创建参考操作集 BAPI_REFSETOFOPR_EXISTENCE_CHK 检查参考操作集是否存在 计划订单 BAPI_PLANNEDORDER_CREATE 创建计划订单 BAPI…

【SpringBoot】多数据源事务卡死@DSTransactional,当某一个数据库挂掉了,系统卡死问题解决

记录最近发生并解决的一个问题 原因 在一个事务内,操作多个数据库,当其中一个数据库挂掉后,默认无限重连,导致事务无法正常结束,导致系统卡死 解决 将无限重连改成有限次数即可 datasource:db1:driver-class-name…

迅为RK3568开发板编译Android12源码包-设置屏幕配置

在源码编译之前首先要确定自己想要使用的屏幕并修改源码,在编译镜像,烧写镜像。如下图所示: 第一步:确定要使用的屏幕种类,屏幕种类选择如下所示: iTOP-3568 开发板支持以下种类屏幕: 迅为 LV…

重装操作系统后 Oracle 11g 数据库数据还原

场景描述: 由于SSD系统盘损坏,更换硬盘后重装了操作系统,Oracle数据库之前安装在D盘(另一个硬盘),更换硬盘多添加一个盘符重装系统后盘符从D变成E,也就是之前的D:/app/... 变成了现在的 E:/app/...,重新安装…

企业二要素如何用C#实现

一、什么是企业二要素? 企业二要素,通过输入统一社会信用代码、企业名称或统一社会信用代码、法人名称,验证两者是否匹配一致。 二、企业二要素适用哪些场景? 例如:信用与金融领域 1.信用评级:信用评级…

丢弃法hhhh

一个好的模型需要对输入数据的扰动鲁棒 丢弃法:在层之间加入噪音,等同于加入正则 h2和h5变成0了 dropout一般作用在全连接隐藏层的输出上 Q&A dropout随机置零对求梯度和求反向传播的影响是什么?为0 dropout属于超参数 dropout固定随…

shell学习数学运算符和字符串(三)

这里写目录标题 一、数学运算符1、基本语法2、expr运算3、(())4、let运算5、bc命令6、中括号[] 二、字符串1、单双引号2、字符串拼接3、获取字符串长度4、字符串提取 一、数学运算符 1、基本语法 ( ( ) ) 或者 (())或者 (())或者{}expr ,-,*,/,%加减乘除取余 2、expr运算 ex…

【Java设计模式-1】单例模式,Java世界的“独苗”

今天咱们要一起探秘Java设计模式中的一个超级有趣又超级实用的家伙——单例模式。想象一下,在Java的代码王国里,有这么一类特殊的存在,它们就像独一无二的“独苗”,整个王国里只允许有一个这样的家伙存在,这就是单例模…

无人机飞手培训机构大量新增,考取飞手证参军入伍还有优势吗?

尽管无人机飞手培训机构大量新增,考取飞手证参军入伍仍然具有显著优势。以下是对这一观点的详细阐述: 一、无人机飞手证在军队中的通用优势 1. 法规遵从与安全保障: 根据《民用无人驾驶航空器系统驾驶员管理暂行规定》等相关法规&#xff0…