当前位置: 首页 > 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;欢迎各位评论纠正…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...