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

Echarts——使用graphic组件在一个option内同时设置两个饼图的背景图

使用echarts的graphic原生图形元素组件,为两个饼图设置对应背景。

在这里插入图片描述
在这里插入图片描述

<template><div id="app"><div class="charts" ref="charts"></div></div>
</template><script>
import * as echarts from 'echarts'export default {name: 'App',mounted () {this.$nextTick(() => {this.init()})},methods: {init () {const pieItemStyle = {// 设置itemStyle的背景色、文本标签、以及文本标签引导线normal: {label: {show: false},labelLine: { show: false },color: 'transparent'}}const option = {tooltip: {},// 通过graphic对象同时设置两张背景图,通过设置top、right、bottom和lefe的值来调整位置graphic: {elements: [{type: 'image',style: {image: require('./assets/pd-bg-done.png'),height: 300},left: '20%',top: 0,bottom: 0},{type: 'image',style: {image: require('./assets/pd-bg-nodone.png'),height: 300},right: '20%',top: 0,bottom: 0}]},series: [{type: 'pie',radius: '50%',center: ['30%', '50%'], // 设置饼图的中心点,让数据显示于对应的背景图上emphasis: {disabled: true,focus: 'none'},itemStyle: pieItemStyle,data: [{value: 123,label: {show: true,position: 'center',formatter: () => {return `{num|123}\n{type|已完成}`},rich: {num: {color: '#047bdf',fontSize: 26,fontWeight: 700,padding: [0, 0, 4, 0]},type: {fontSize: 14,color: '#222F40'}}}}]},{type: 'pie',radius: '50%',center: ['86%', '50%'],emphasis: {disabled: true,focus: 'none'},itemStyle: pieItemStyle,data: [{value: 456,label: {show: true,position: 'center',formatter: () => {return `{num|456}\n{type|未完成}`},rich: {num: {color: '#ea853c',fontSize: 26,fontWeight: 700,padding: [0, 0, 4, 0]},type: {fontSize: 14,color: '#222F40'}}}}]}]}const chartDom = echarts.init(this.$refs.charts)chartDom.setOption(option)}}
}
</script><style scoped>
html, body, #app {width: 100%;height: 100%;
}
.charts {width: 100%;height: 300px;
}
</style>

具体效果:

效果图

相关文章:

Echarts——使用graphic组件在一个option内同时设置两个饼图的背景图

使用echarts的graphic原生图形元素组件&#xff0c;为两个饼图设置对应背景。 <template><div id"app"><div class"charts" ref"charts"></div></div> </template><script> import * as echarts from…...

编程笔记 html5cssjs 027 HTML输入属性(1/2)

[TOC](编程笔记 html5&css&js 027 HTML输入属性(1/2)) <input>元素除了type属性表示输入类型&#xff0c;后面还跟上其他属性&#xff0c;叫输入属性。 value 属性 value 属性规定输入字段的初始值&#xff1a; <form action"">First name:<…...

请求参数乱码问题

POST请求方式解决乱码问题 在web.xml里面设置编码过滤器 <filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><!-- 设置过滤器中的属性值 -…...

【leetcode】力扣热门之反转链表【简单难度】

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 用例 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 输入&#xff1a;head [] 输出&#xff1a;[…...

【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示

特性&#xff1a; 有密码强度颜色提示密码强度进度条提示支持设置默认输入提示和密码长度 sgPasswordInput源码 <template><div :class"$options.name" style"width: 100%"><el-inputstyle"width: 100%"ref"psw"type&…...

1599 - Ideal Path (UVA)

题目链接如下&#xff1a; https://onlinejudge.org/index.php?optioncom_onlinejudge&Itemid8&category448&pageshow_problem&problem4474 这道题也是看了刘汝佳的思路才写出来的.... 代码如下&#xff1a; #include <cstdio> #include <deque&…...

计算机网络(超级详细笔记)

使用教材计算机网络&#xff08;第8版&#xff09;&#xff08;谢希仁&#xff09; 第一章&#xff1a;概述 第二章&#xff1a;物理层 第三章&#xff1a;数据链路层 第四章&#xff1a;网络层 第五章&#xff1a;运输层 第六章&#xff1a;应用层 目…...

老杨说运维 | 年末大讲回顾:运维的尽头也是大模型吗?

哈喽~朋友们&#xff0c;这么快又见面啦。前阵子我们给CEO老杨安排了一场年末大讲&#xff0c;主要是跟大家聊聊智能运维的“智”与“能”以及剖析时下热点----运维大模型。后台收到了不少朋友的反馈&#xff0c;小编看了大受鼓舞并暗下决心----新的一年&#xff0c;希望能多安…...

Unity 利用UGUI之Scrollbar制作进度条

在Unity中除了用Slider、Image做进度条&#xff0c;其实用Scrollbar也可以做进度条。 首先&#xff0c;在场景中新建一个Scrollbar组件和一个Text组件&#xff1a; 其次&#xff0c;创建模拟进度的一个脚本&#xff0c;Scrollbar_Progressbar.cs: using System.Collections; …...

MySQL之导入、导出

文章目录 1.navicat导入导出2.mysqldump命令导入导出2.1导出2.2导入 3.load data infile命令导入导出4.远程备份5.思维导图 1.navicat导入导出 使用Navicat工具导入t_log 共耗时 55s 2.mysqldump命令导入导出 2.1导出 导出表数据和表结构 语法&#xff1a; mysqldump -u用…...

【unity小技巧】FPS游戏实现相机的偏移震动、武器射击后退和后坐力效果

最终效果 文章目录 最终效果前言相机偏移震动相机震动脚本换弹节点震动 武器射击后退效果武器后坐力效果完结 前言 关于后坐力之前其实已经分享了一个&#xff1a;FPS游戏后坐力制作思路 但是实现起来比较复杂&#xff0c;如果你只是想要简单的实现&#xff0c;可以看看这个&…...

MINCO+汽车

规划典型的解决方法: 如何准确的描述他的动力学,实际上是对这个物理对象进行建模.(规划等于开环的控制,控制等于闭环的规划),规划系统要做到是假设已知系统模型的情况下去计算一些可能会影响比较好的 未来运动的指令,做未来运动轨迹的推演.对自己建模的情况下还需对环境有个比较…...

大模型机器人发展史:从VoxPoser、RT2到斯坦福Mobile ALOHA、Google机器人

前言 23年7月&#xff0c;我在朋友圈评估Google的RT2说道&#xff1a; “大模型正在革新一切领域啊&#xff0c;超帅&#xff0c;通过大模型不仅能理解“人话”&#xff0c;还能对“人话”进行推理&#xff0c;并转变为机器人能理解的指令&#xff0c;从而分阶段完成任务。回…...

Ubunutu18.04 ROS melodic 无人机 XTDrone PX4 Vins-Fuison 运行配置

一、PX4飞控EKF配置 PX4默认使用的EKF配置为融合GPS的水平位置与气压计高度。如果我们想使用视觉定位&#xff0c;就需要把修改配置文件。让EKF融合来自mavros/vision_pose/pose的数据 1.1修改rcS配置文件 gedit ~/PX4_Firmware/ROMFS/px4fmu_common/init.d-posix/rcS 通过注…...

Linux 常见服务配置

笔记所以内容很多&#xff0c;建议选择性看看 SSH Secure Shell 用于与服务器建立安全的连接 对应服务 sshd 注意&#xff1a;配置文件 配制文件修改需要重启或重载sshd服务才能生效 systemctl sshd reload # 重载 sshd 配置文件 systemctl sshd restart # 重启 ssh…...

Flutter基础

一、关键字 class&#xff1a;用于定义一个新的类&#xff1b; extends: 用于指定一个类继承另一个类&#xff1b; mixin: 用于将一个类的代码片段添加到另一个类中&#xff0c;实现代码复用&#xff1b; abstract: 用于声明一个抽象类或抽象方法&#xff0c;不能直接实例化&a…...

MySQL-数据库概述

数据库相关概念&#xff1a; 数据库(DateBase)简称DB,就是一个存储数据的仓库&#xff0c;数据有组织的进行存储。 数据库分为关系型数据库简称RDBMS和非关系型数据库 关系型数据库简称RDBMS:建立在关系模型的基础上&#xff0c;由多张相互连接的二维表组成的数据库.简单来说…...

HTML---JQurey的基本使用

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 本章目标 &#xff08;1&#xff09;能够搭建jQuery开发环境 &#xff08;2&#xff09;使用ready( )方法加载页面、掌握jQuery语法 使用addClass( )方法和css( )方法为元素添加CSS样式使用n…...

搜索docker镜像

要查看Docker镜像库&#xff0c;可以使用docker search命令。 docker search <关键词>例如&#xff0c;如果你想要查找名为nginx的镜像&#xff0c;可以执行以下命令&#xff1a; docker search nginx命令执行后&#xff0c;将会列出所有与关键词nginx相关的Docker镜像…...

旋变检测AD2s1205手册学习笔记

旋变故障检测故障表 信号丢失检测 检测原理&#xff1a;任一旋变输入(正弦或余弦)降至指定的LOS正弦/余弦阈值 以下时&#xff0c;器件会检测到信号丢失(LOS)。AD2S1205通过将 监视信号与固定最小值进行比较检测此点 丢失的效果表现&#xff1a;LOS由DOS和LOT引脚均闩锁为逻辑…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...