echarts环图配置
echarts环图配置
1、安装echarts
npm install echarts@4.9.0
2、页面引入echarts
import echarts from 'echarts';
3、应用
template片段
<div class="chart-wrap"><div id = "treeChart" style = "width: 180px; height:180px;" ></div><div class="total" :style="{color: handleThemeColor(totlal).titleColor}">{{ totlal >= 8 ? '优秀' : totlal <= 3 ? '不及格' : '及格' }}</div>
</div>
script方法
showChart() {let myChart = echarts.init(document.getElementById('treeChart'));let value = this.totlal; //当前进度let maxValue = 10; //进度条最大值let startBg = this.circleColor.start;let endBg = this.circleColor.end;let option = {legend: {orient: 'vertical',x: 'left',},graphic: [//内容 + 位置{type: 'text',left: 'center',top: '30%',z: 2,zlevel: 100,style: {text: '总得分',textAlign: 'center',fill: '#666666',fontSize: 12,},},{type: 'text',left: 'center',top: '46%',z: 2,zlevel: 100,style: {text: this.totlal,textAlign: 'center',fill: this.themeColor,fontSize: 62,},},],series: [// 进度条{startAngle: 210,type: 'pie',radius: ['72%', '100%'],labelLine: {normal: {show: false,},},hoverAnimation: false, //鼠标悬浮是否有区域弹出动画,false:无 true:有avoidLabelOverlap: false,silent: true, //取消鼠标移入高亮效果: 不响应和触发鼠标事件animationEasing: 'cubicOut',data: [//value当前进度 + 颜色{value: value,itemStyle: {//渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: startBg, // 0% 处的颜色},{offset: 1,color: endBg, // 100% 处的颜色},],global: false, // 缺省为 false},},},{value: maxValue - value,itemStyle: {//渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#eee', // 0% 处的颜色},{offset: 1,color: '#eee', // 100% 处的颜色},],global: false, // 缺省为 false},},},//(maxValue进度条最大值 - value当前进度) + 颜色{value: 5,itemStyle: {// 径向渐变颜色color: {type: 'radial',x: 1,y: 1,r: 1,colorStops: [{offset: 0,color: '#eee', // 0% 处的颜色},{offset: 1,color: '#eee', // 100% 处的颜色},],global: false, // 缺省为 false},borderColor: '#fff',borderWidth: 6},},],},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//随着浏览器窗口大小改变而改变window.addEventListener('resize', function () {myChart.resize()})
}
css样式
.chart-wrap {position: absolute;right: 78px;top: -60px;width: 200px;height: 200px;border-radius: 50%;background: #FFFFFF;overflow: hidden;
}#treeChart {position: absolute;top: 10px;left: 10px;
}.total {position: absolute;left: 50%;transform: translateX(-50%);bottom: 13px;font-size: 16px;font-weight: 500;
}
最终效果

相关文章:
echarts环图配置
echarts环图配置 1、安装echarts npm install echarts4.9.02、页面引入echarts import echarts from echarts;3、应用 template片段 <div class"chart-wrap"><div id "treeChart" style "width: 180px; height:180px;" ><…...
Redis优化 RDB AOF持久化
---------------------- Redis 高可用 ---------------------------------------- 在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常服务(99.9%、99.99%、99.999%等等)。 但是在Redis语境…...
三维模型3DTILE格式轻量化压缩主要技术方法浅析
三维模型3DTILE格式轻量化压缩主要技术方法浅析 三维模型3DTILE格式轻量化压缩主要技术方法浅析 随着三维地理空间数据的应用日益广泛,为了更快速地传输和存储这些大规模数据,3DTile格式的轻量化压缩显得尤为重要。本文将浅析关于三维模型3DTile格式轻量…...
c++day2---9.7
1> 思维导图 2> 封装一个结构体,结构体中包含一个私有数组,用来存放学生的成绩,包含一个私有变量,用来记录学生个数, 提供一个公有成员函数,void setNum(int num)用于设置学生个数 提供一个公有成员…...
地震反演基础知识2(代码演示)
文章目录 数据集代码演示1. SEG盐真实数据2. SEG盐速度模型3. SEG盐模拟地震数据4. SEG盐模拟速度模型5. openfwi地震数据6. openfwi速度模型 数据集代码演示 1. SEG盐真实数据 # 绘制SEG盐层数据的地震图像 def pain_seg_seismic_data(para_seismic_data):Plotting seismic …...
C#学习 - 方法的定义、调用、调试
方法 方法(Method)是由C/C中的函数(Function)发展而来的 //C语言 #include <stdio.h> int Add(int x, int y) {return x y; }//函数 int main(void) {int a 4;int b 2;int c Add(a, b);printf("%d %d %d\n&quo…...
『PyQt5-Qt Designer篇』| 09 Qt Designer中分割线和间隔如何使用?
09 Qt Designer中分割线和间隔如何使用? 1 间隔1.1 水平间隔1.2 垂直间隔2 分割线2.1 水平线2.2 垂直线3 保存并执行1 间隔 间隔有水平间隔和垂直间隔: 1.1 水平间隔 拖动4个按钮,并设置为水平布局: 在第一个按钮的右边添加一个水平间隔: 设置其sizeType为Fixed,宽度为20…...
基于springboot2+mybatis-plus+jsp增删改查
概述 编写简单增删改查,理解之后可以自己试着扩展,相信你也可以,加油,我自己懂了的用注释记在下面方便理解 详细 一、需求(要做什么) 基于现今最流行的技术实现增删改查demo, 便于初学者上手…...
[PHP]empty一直返回true
class Post {public function __get($key){return true;} }$post new Post(); var_dump(empty($post->a));// bool(true) PHP: 重载 - Manual 读取不可访问(protected 或 private)或不存在的属性的值时,__get() 会被调用。 当对不可访…...
[2023.09.11]: Yew的SSR中的Cargo.toml配置
由于各种原因,我最后还是打算把Yew应用的开发从csr模式转成ssr模式。没想到这里面的水还是挺深的,这里面的Cargo.toml配置包含的信息量之大,着实让我头疼了一番。 Cargo.toml的配置如下 [package] name "app" version "0.…...
HTTPS加密协议详解:HTTPS性能与优化
1、HTTPS性能损耗 前文讨论了HTTPS原理与优势:身份验证、信息加密与完整性校验等,且未对TCP和HTTP协议做任何修改。但通过增加新协议以实现更安全的通信必然需要付出代价,HTTPS协议的性能损耗主要体现如下: (1).增加延时 分析前…...
9月11日,每日信息差
今天是2023年09月11日,以下是为您准备的13条信息差 第一、微软已停止向俄罗斯提供服务,俄罗斯接下来的举动震惊世人!对此俄罗斯回应称,他们将把微软的收费版改为免费版并推广至全球 第二、我国首套海洋漂浮式温差能发电装置完成…...
RHCSA-VM-Linux基础配置命令
1.代码命令 1.查看本机IP地址: ip addr 或者 ip a [foxbogon ~]$ ip addre [foxbogon ~]$ ip a 1:<Loopback,U,LOWER-UP> 为环回2网卡 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP>为虚拟机自身网卡 2.测试网络联通性: [f…...
Web安全研究(四)
No Honor Among Thieves: A Large-Scale Analysis of Malicious Web Shells Stony Brook University Ruhr-University Bochum Web shell作为恶意脚本,攻击者将其上传到被攻陷的Web服务器,以远程执行任意命令、维护其访问权限并提升其特权。尽管在实践中它…...
【CS324】Large Language Models(持续更新)
note 文章目录 note一、引言二、大模型的能力三、大模型的有害性(上)四、大模型的有害性(下)五、大模型的数据Reference 一、引言 语言模型最初是在信息理论的背景下研究的,可以用来估计英语的熵。 熵用于度量概率分布…...
【学习笔记】「2020-2021 集训队作业」Communication Network
有点难😅 发现容斥系数设计的非常巧妙🤔 设 f ( i ) f(i) f(i)表示恰好有 i i i条边相同的方案数, g ( i ) g(i) g(i)表示至少有 i i i条边相同的方案数 根据二项式反演, g ( i ) ∑ j ≥ i ( j i ) f ( j ) ⇒ f ( i ) ∑ j…...
文章参考链接
文章参考: 前端 echsrt横轴文字过长,…展示【link】js数组去重【link】js数据是String去重【link】js数据是对象去重【link】小程序使用wxml-to-canvas【link】vantui【link】微信小程序使用vantui组件【link】【link】微信小程序,选项卡页面…...
SQLI-labs-第七关
知识点:单引号()加括号闭合错误的布尔盲注 思路: 寻找注入点 我们首先看一下正常的回显,并没有显示出什么明显的信息 输入?id1 发现报错 输入?id1 -- 还是报错,说明SQL语句的语法错误可能不是单引号闭合…...
腾讯云轻量2核4G5M服务器_CPU内存_流量_带宽_系统盘
腾讯云轻量2核4G5M服务器:CPU内存流量带宽系统盘性能测评:轻量应用服务器2核4G5M带宽,免费500GB月流量,60GB系统盘SSD盘,5M带宽下载速度可达640KB/秒,流量超额按照0.8元每GB支付流量费,轻量2核4…...
从零开始搭建Apache服务器并使用内网穿透技术实现公网访问
Apache服务安装配置与结合内网穿透实现公网访问 文章目录 Apache服务安装配置与结合内网穿透实现公网访问前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpo…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
