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

隐藏饼图的legend,重写legend列表。

因为要实现的饼图效果较复杂,所以,需要重新写列表。

点击右侧列表的圆点,实现隐藏左侧饼图相应环状。

<template><div class="index_div"><a-spin :spinning="aLoading"><scalescreen:width="1920":height="1080":selfAdaption="true"class="scale-wrap"><div class="pieMulBox"><div class="pieMulChart"><div class="pie_mul_box"><div class="innPieBg"><div class="number">{{curStorageRate}}</div></div><div class="pieChart"><pie_mul ref="pie_mul" /></div></div><p style="margin-top: 17px;">当前系统访问率</p></div><div class="pieMulMsg"><ul><li v-for="(item,index) in pieMulData" :key="index" @click="clickPiechart(item, index)"><span>{{item.label}}</span><strong>{{item.value}}</strong></li></ul></div></div></scalescreen></a-spin></div>
</template><script>import { deepClone } from '@/utils/util'import pie_mul from './Analysis/pie_mul'import scalescreen from './Analysis/scale-screen.vue'import { energyStateAnalysis } from '@/api/analysis/index'export default {name: "Analysis",components: {pie_mul,scalescreen},data() {return {aLoading: true,pieMulData: [],hidePieData: [], // 点击隐藏的值showPieData: [] // 点击显示的值}},created() {this.getEnergyStateAnalysis()setTimeout(()=>{this.aLoading = false}, 3000)},methods: {getEnergyStateAnalysis() {energyStateAnalysis().then((res) => {// console.log('energyStateAnalysis', res)if (res.success) {let data = res.resultthis.curStorageRate = data.curStorageRate// let dataList = [//   { value: 62.2, label: "小1" },//   { value: 17.3, label: "基1" },//   { value: 6.2, label: "移1" },//   { value: 9.1, label: "农1" },//   { value: 3.2, label: "三1" },// ];// this.pieMulData = dataList// this.$refs.pie_mul.draw(dataList);if(data.list && data.list.length > 0) {let dataList = []this.$nextTick(() => {data.list.map(v=>{dataList.push({ value: v.cnt, label: v.itemName })});this.pieMulData = dataListthis.showPieData = deepClone(dataList)this.$refs.pie_mul.draw(dataList);})}}})},// 点击饼图旁边的列表,显示和隐藏饼图数据。clickPiechart(item, idx) {const index = this.hidePieData.indexOf(item.label);if (index > -1) {this.hidePieData.splice(index, 1);this.showPieData[idx] = item} else {this.hidePieData.push(item.la

相关文章:

隐藏饼图的legend,重写legend列表。

因为要实现的饼图效果较复杂,所以,需要重新写列表。 点击右侧列表的圆点,实现隐藏左侧饼图相应环状。 <template><div class="index_div"><a-spin :spinning="aLoading"><scalescreen:width="1920":height="1080&…...

解决在Mac下使用npm报错:Error: EACCES: permission denied

原因说明&#xff1a;没有足够的权限在 /usr/local/lib/node_modules 目录下创建文件夹 这个错误表明你在安装或更新 Vue.js&#xff08;vue&#xff09;包时&#xff0c;没有足够的权限在 /usr/local/lib/node_modules 目录下创建文件夹。这通常是因为默认情况下&#xff0c;普…...

pvt对net delay的影响

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 有星球成员提问: pt中在同一个corner下的net的为啥在min和max的情况下读RC值是不一样的呢??不应该都是根据spef来的吗?? 回答: 这个其实是个误区,相同RC corner情况下我们看report_delay_…...

力扣5 最长回文子串

给你一个字符串 s&#xff0c;找到 s 中最长的 回文子串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba" 同样是符合题意的答案。示例 2&#xff1a; 输入&#xff1a;s "cbbd" 输…...

【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色

效果图 新建activityScrollTop.js作为mixins export default {data() {return {navBgColor: "rgba(0,0,0,0)", // 初始背景颜色为完全透明navTextColor: "rgba(0,0,0,1)", // 初始文字颜色};},onPageScroll(e) {// 设置背景const newAlpha Math.min((e.s…...

HarmonyOS鸿蒙学习笔记(25)相对布局 RelativeContainer详细说明

RelativeContainer 简介 前言核心概念官方实例官方实例改造蓝色方块改造center 属性说明参考资料 前言 RelativeContainer是鸿蒙的相对布局组件&#xff0c;它的布局很灵活&#xff0c;可以很方便的控制各个子UI 组件的相对位置&#xff0c;其布局理念有点类似于android的约束…...

自然语言处理学习中英文翻译语料库

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;学习中英文翻译需要高质量的双语语料库。以下是一些常用的中英文翻译语料库资源&#xff1a; OpenSubtitles&#xff1a; 网站&#xff1a; OpenSubtitles 描述&#xff1a;OpenSubtitles 提供了大量的电影和电视剧…...

可视化数据科学平台在信贷领域应用系列二:数据清洗

上一篇文章中&#xff0c;某互联网银行零售信贷风险建模专家使用数据科学平台Altair RapidMiner——完成了数据探索工作&#xff0c;《可视化数据科学平台在信贷领域应用系列一&#xff1a;数据探索》。本次这位建模专家再次和大家分享数据准备的第二步骤&#xff0c;数据清洗。…...

JS面试题:hash和history的区别

一、hash 模式和 history 模式的介绍 由于 Vue 项目为单页面应用&#xff0c;所以整个项目在开发和构建过程中&#xff0c;仅存在一个HTML物理文件。通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件&#xff0c;切换页面时既需要…...

GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)

简介 水深反演是指利用遥感技术从航空或卫星平台上获取的数据来推断水体的深度信息。这种技术在海洋学、湖泊和河流的科学研究与管理中非常重要。以下是几种常用的水深反演方法: 1. **光学遥感反演**: - 基于水体颜色和透明度的变化与水深的关系,使用光学遥感影像(如L…...

机器视觉检测--相机

一&#xff0c;相机就是CCD么&#xff1f; 通常&#xff0c;我们把相机都叫作CCD&#xff0c;CCD已经成了相机的代名词。其实很可能正在使用的是CMOS。CCD以及CMOS都称为感光元件&#xff0c;都是将光学图像转换为电子信号的半导体元件。他们在检测光时都采用光电二极管&#…...

【人工智能】第四部分:ChatGPT的技术实现

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…...

小程序配置自定义tabBar及异形tabBar配置操作

什么是tabBar&#xff1f; 小程序的tabbar是指小程序底部的一组固定导航按钮&#xff0c;通常包含2-5个按钮&#xff0c;用于快速切换小程序的不同页面。每个按钮都有一个图标和文本标签&#xff0c;点击按钮可以切换到对应的页面。tabbar通常放置在小程序的底部&#xff0c;以…...

解析《动物园规则怪谈》【逻辑】

鉴赏《动物园规则怪谈》【逻辑】 前言版权推荐鉴赏《动物园规则怪谈》推理游客正方“它”方其他物品 不同规则或纸条的对比联系出现的地方及联系游客入园历程&#xff1a;被“它”污染的过程鉴赏升华 最后 前言 2024-5-31 13:05:38 以下内容源自《【逻辑】》 仅供学习交流使用…...

上传RKP 证书签名请求息上传到 Google 的后端服务器

上传证书签名请求 1.准备环境&#xff1a;OK pip3 install google-auth2.13.0 requests2.28下载 device_info_uploader.py 。 没找到先跳过 选项 1&#xff1a;通过 GCP 帐户使用 device_info_uploader.py 运行脚本。 ./device_info_uploader.py --credentials /secure/s…...

Debian和ubuntu 嵌入式的系统的 区别

随着开源操作系统的日益流行&#xff0c;Debian和Ubuntu这两个基于Linux的发行版本成为了众多开发者和系统管理员的首选。它们各自拥有独特的优势和特点&#xff0c;那么&#xff0c;在选择时&#xff0c;哪一个更适合你呢&#xff1f;接下来&#xff0c;我们将深入探讨两者的关…...

HTML旋转照片盒子

效果图 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" content…...

【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成

2024.6.4更新 昨天半夜意识到生成Cube的方案不合适&#xff0c;又开始到处找动态地面的方法&#xff0c;发现了我想要的效果直接可以用nigara实现&#xff01;&#xff01;&#xff01;&#xff01; 于是这个部分就暂时告一段落&#xff0c;今季开始新的方向的学习。 为了快速…...

AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)

在AI时代&#xff0c;可能人人都可成为产品经理。 之前我们聊过如何使用kimi协助完成产品需求文档&#xff0c;如何写竞品分析报告&#xff0c;这一篇我们聊聊用户故事&#xff0c;如何使用kimi协助撰写产品需求文档中的用户故事。 在此之前我们先了解下什么是用户故事&#…...

MySQL索引与事务

前言&#x1f440;~ 紧接着数据库的相关知识&#xff0c;今天讲解MySQL面试中频繁被问到的知识点&#xff0c;索引与事务!!! 如果各位对文章的内容感兴趣的话&#xff0c;请点点小赞&#xff0c;关注一手不迷路&#xff0c;如果内容有什么问题的话&#xff0c;欢迎各位评论纠正…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...