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

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服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境…...

三维模型3DTILE格式轻量化压缩主要技术方法浅析

三维模型3DTILE格式轻量化压缩主要技术方法浅析 三维模型3DTILE格式轻量化压缩主要技术方法浅析 随着三维地理空间数据的应用日益广泛&#xff0c;为了更快速地传输和存储这些大规模数据&#xff0c;3DTile格式的轻量化压缩显得尤为重要。本文将浅析关于三维模型3DTile格式轻量…...

c++day2---9.7

1> 思维导图 2> 封装一个结构体&#xff0c;结构体中包含一个私有数组&#xff0c;用来存放学生的成绩&#xff0c;包含一个私有变量&#xff0c;用来记录学生个数&#xff0c; 提供一个公有成员函数&#xff0c;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#学习 - 方法的定义、调用、调试

方法 方法&#xff08;Method&#xff09;是由C/C中的函数&#xff08;Function&#xff09;发展而来的 //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增删改查

概述 编写简单增删改查&#xff0c;理解之后可以自己试着扩展&#xff0c;相信你也可以&#xff0c;加油&#xff0c;我自己懂了的用注释记在下面方便理解 详细 一、需求&#xff08;要做什么&#xff09; 基于现今最流行的技术实现增删改查demo&#xff0c; 便于初学者上手…...

[PHP]empty一直返回true

class Post {public function __get($key){return true;} }$post new Post(); var_dump(empty($post->a));// bool(true) PHP: 重载 - Manual 读取不可访问&#xff08;protected 或 private&#xff09;或不存在的属性的值时&#xff0c;__get() 会被调用。 当对不可访…...

[2023.09.11]: Yew的SSR中的Cargo.toml配置

由于各种原因&#xff0c;我最后还是打算把Yew应用的开发从csr模式转成ssr模式。没想到这里面的水还是挺深的&#xff0c;这里面的Cargo.toml配置包含的信息量之大&#xff0c;着实让我头疼了一番。 Cargo.toml的配置如下 [package] name "app" version "0.…...

HTTPS加密协议详解:HTTPS性能与优化

1、HTTPS性能损耗 前文讨论了HTTPS原理与优势&#xff1a;身份验证、信息加密与完整性校验等&#xff0c;且未对TCP和HTTP协议做任何修改。但通过增加新协议以实现更安全的通信必然需要付出代价&#xff0c;HTTPS协议的性能损耗主要体现如下&#xff1a; (1).增加延时 分析前…...

9月11日,每日信息差

今天是2023年09月11日&#xff0c;以下是为您准备的13条信息差 第一、微软已停止向俄罗斯提供服务&#xff0c;俄罗斯接下来的举动震惊世人&#xff01;对此俄罗斯回应称&#xff0c;他们将把微软的收费版改为免费版并推广至全球 第二、我国首套海洋漂浮式温差能发电装置完成…...

RHCSA-VM-Linux基础配置命令

1.代码命令 1.查看本机IP地址&#xff1a; ip addr 或者 ip a [foxbogon ~]$ ip addre [foxbogon ~]$ ip a 1&#xff1a;<Loopback,U,LOWER-UP> 为环回2网卡 2: ens160: <BROADCAST,MULTICAST,UP,LOWER_UP>为虚拟机自身网卡 2.测试网络联通性&#xff1a; [f…...

Web安全研究(四)

No Honor Among Thieves: A Large-Scale Analysis of Malicious Web Shells Stony Brook University Ruhr-University Bochum Web shell作为恶意脚本&#xff0c;攻击者将其上传到被攻陷的Web服务器&#xff0c;以远程执行任意命令、维护其访问权限并提升其特权。尽管在实践中它…...

【CS324】Large Language Models(持续更新)

note 文章目录 note一、引言二、大模型的能力三、大模型的有害性&#xff08;上&#xff09;四、大模型的有害性&#xff08;下&#xff09;五、大模型的数据Reference 一、引言 语言模型最初是在信息理论的背景下研究的&#xff0c;可以用来估计英语的熵。 熵用于度量概率分布…...

【学习笔记】「2020-2021 集训队作业」Communication Network

有点难&#x1f605; 发现容斥系数设计的非常巧妙&#x1f914; 设 f ( i ) f(i) f(i)表示恰好有 i i i条边相同的方案数&#xff0c; g ( i ) g(i) g(i)表示至少有 i i i条边相同的方案数 根据二项式反演&#xff0c; g ( i ) ∑ j ≥ i ( j i ) f ( j ) ⇒ f ( i ) ∑ j…...

文章参考链接

文章参考&#xff1a; 前端 echsrt横轴文字过长&#xff0c;…展示【link】js数组去重【link】js数据是String去重【link】js数据是对象去重【link】小程序使用wxml-to-canvas【link】vantui【link】微信小程序使用vantui组件【link】【link】微信小程序&#xff0c;选项卡页面…...

SQLI-labs-第七关

知识点&#xff1a;单引号&#xff08;&#xff09;加括号闭合错误的布尔盲注 思路&#xff1a; 寻找注入点 我们首先看一下正常的回显&#xff0c;并没有显示出什么明显的信息 输入?id1 发现报错 输入?id1 -- 还是报错&#xff0c;说明SQL语句的语法错误可能不是单引号闭合…...

腾讯云轻量2核4G5M服务器_CPU内存_流量_带宽_系统盘

腾讯云轻量2核4G5M服务器&#xff1a;CPU内存流量带宽系统盘性能测评&#xff1a;轻量应用服务器2核4G5M带宽&#xff0c;免费500GB月流量&#xff0c;60GB系统盘SSD盘&#xff0c;5M带宽下载速度可达640KB/秒&#xff0c;流量超额按照0.8元每GB支付流量费&#xff0c;轻量2核4…...

从零开始搭建Apache服务器并使用内网穿透技术实现公网访问

Apache服务安装配置与结合内网穿透实现公网访问 文章目录 Apache服务安装配置与结合内网穿透实现公网访问前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpo…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...