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

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

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

// 饼图,点击自定义列表,显示和隐藏饼图对应的环状数据

<template>
<div class="index_div">
<a-spin :spinning="aLoading">

<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>
</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>

</a-spin>
</div>
</template>

<script>
import { deepClone } from '@/utils/util'
import pie_mul from './pie_mul'
import {energyStateAnalysis} from '@/api/index'

export default {
name: "Analysis",
components: {pie_mul},
data() {
return {
aLoading: true,
curStorageRate: null,
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.result
this.curStorageRate = data.curStorageRate
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 = dataList
this.showPieData = deepClone(dataList)
this.$refs.pie_mul.draw(dataList);
})
}
}
})
},
// 点击饼图旁边的列表,显示和隐藏饼图数据。
clickPiechart(item, idx) {
const index

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/674623.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据保护技巧揭秘:为导出文件添加防护密码的实用指南

一、前言 当涉及到敏感数据的导出和共享时&#xff0c;数据安全是至关重要的。在现代数字化时代&#xff0c;保护个人和机密信息免受未经授权的访问和窃取是每个组织和个人的首要任务之一。在这种背景下&#xff0c;葡萄城的纯前端表格控件 SpreadJS 提供的加密功能为用户提供…

【Java面试】九、微服务篇SpringCloud(上)

文章目录 1、SpringCloud五大组件2、服务注册和发现2.1 Eurake2.2 Eurake和Nacos的区别 3、Ribbon负载均衡3.1 策略3.2 自定义负载均衡策略 4、服务雪崩与熔断降级4.1 服务雪崩4.2 服务降级4.3 服务熔断 5、服务限流5.1 Nginx限流5.2 网关限流 6、微服务监控7、面试 1、SpringC…

电力系统上线测试工具介绍

上线测试 电力系统上线测试工具主要用于在电力系统建设完成后&#xff0c;对系统进行全面的功能和性能测试。这些工具可以模拟各种运行环境和负载情况&#xff0c;以检测电力系统的性能和稳定性。 以下是几种常见的电力系统上线测试工具&#xff1a; 1. 负载测试工具&#x…

高低温光照综合试验整车综合性能步入式环境实验舱

高低温光照综合试验整车综合性能步入式环境实验舱 整车综合性能试验舱主要用于整车高低温存放试验、整车除霜、除雾性能试验、整车冷起动性能试验、整车采暖及制冷性能试验、组合全光谱阳光模拟检测成套零部件或整车在阳光照射下的实验室加速老化性能。高低温光照综合试验整车…

[ICPC2024 Xi‘an I] ICPC2024 邀请赛西安站(7/8/13)

心得 [ICPC2024 Xian I] ICPC2024 邀请赛西安站重现赛 - 比赛详情 - 洛谷 7表示赛时ac了7个&#xff0c;8表示含补题总共ac数&#xff0c;13表示题目总数 题目 M. Chained Lights 打表&#xff0c;发现只有k1是YES //#include <bits/stdc.h> #include<iostream&…

idea解决“源根之外的java文件“的问题

一&#xff0c;问题 idea编辑器打开一些老Spring项目&#xff0c;会出现项目结构解析不正确&#xff0c;最后整个项目的java文件都无法正常运行&#xff0c;显示“源根之外的java文件”。 二&#xff0c;解决 打开File->项目结构 选中模块&#xff0c;然后在右边选中对应的…

2024年武汉东湖高新中级职称报名时间是什么时候?

2024年武汉市东湖高新中级职称上半年批次报名已经截止了&#xff0c;下半年东湖高新至少还有一次报名机会&#xff0c;所以各位东湖高新区评职称的朋友们&#xff0c;不要错过这次了。 2024年武汉东湖高新区中级职称报名条件&#xff1a; 1.东湖高新区社保满足1年&#xff0c;近…

LayerSkip:加速大模型推理的端到端解决方案

大模型&#xff08;LLMs&#xff09;在多种应用中表现出色&#xff0c;但其高昂的计算和内存需求导致部署成本昂贵&#xff0c;尤其是在GPU服务器上。现有加速方案在部署到普通GPU时往往会导致准确性显著下降&#xff0c;而将大模型&#xff08;LLMs&#xff09;进一步加速以部…

时间复杂度与空间复杂度的计算

空间复杂度 (O(1)) 空间复杂度是衡量算法在运行过程中所需的额外内存空间。(O(1)) 表示算法只需要常量级别的额外空间&#xff0c;不会随着输入数据的大小 (n) 增加而增加。也就是说&#xff0c;无论处理的数据有多大&#xff0c;算法所需的额外内存空间始终是固定的。 对于选…

链表的回文结构的判定(C语言)怎会如此简单!!!

目录 题目思路分析如何找到中间节点如何实现反转链表链表的对比完整代码 题目 链接: 题目 描述&#xff1a; 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。 给定一个链表的头指针A&#xff0c;请返回一个…

php反序列化中的pop链

目录 一、什么是POP 二、成员属性赋值对象 例题&#xff1a; 方法一 方法二 三、魔术方法的触发规则 例题&#xff1a; 四、POC的编写 例题1&#xff1a; 例题2 [NISACTF 2022]babyserialize 今日总结&#xff1a; 一、什么是POP 在反序列化中&#xff0c;我们…

Git配置免密登录Github

1、登录 GitHub &#xff0c;点击右上角头像&#xff0c;选中 Settings (设置)。 在 https://github.com 登录你的帐号&#xff0c;登录以后点击右上角你的头像的Settings 如果没有设置&#xff0c;输入下面的指令进行设置&#xff1a; git config --global user.name “用户名…

【启明智显技术分享】sigmastar ssd202d双网口开发板多串口调试说明

提示&#xff1a;作为Espressif&#xff08;乐鑫科技&#xff09;大中华区合作伙伴及sigmastar&#xff08;厦门星宸&#xff09;VAD合作伙伴&#xff0c;我们不仅用心整理了你在开发过程中可能会遇到的问题以及快速上手的简明教程供开发小伙伴参考。同时也用心整理了乐鑫及星宸…

cesium 的初步认识

Cesium是一个基于JavaScript开发的WebGL三维地球和地图可视化库。它利用了现代Web技术&#xff0c;如HTML5、WebGL和WebAssembly&#xff0c;来提供跨平台和跨浏览器的三维地理空间数据可视化。Cesium的主要特点包括&#xff1a; 跨平台、跨浏览器&#xff1a;无需额外插件&am…

4个免费音频转换器:解放您的音频文件格式转换需求

在日常生活和工作中&#xff0c;我们经常需要处理各种音频文件&#xff0c;但有时候这些文件可能并不是我们需要的特定格式。在这种情况下&#xff0c;一个免费的音频转换器就能派上用场。免费音频转换器是一种非常实用的工具&#xff0c;它可以帮助我们将不同格式的音频文件相…

C++栈、队列

文章目录 目录 文章目录 前言 一、stack、queue介绍 1.stack 2.queue 二、stack、queue的习题 1. 最小栈 2. 栈的压入、弹出序列 3.二叉树的层序遍历 三、stack和queue的模拟实现 1.stack的模拟实现 2.queue的模拟实现 前言 栈和队列是俩种特殊的容器&#xff0c;C在实现栈和队…

contentType 与 dataType

contentType 与 dataType contentType contentType&#xff1a;发送的数据格式&#xff08;请求方发送给服务器的数据格式&#xff09;&#xff0c;这个内容会放在请求方的 请求头中 application/x-www-form-urlencoded 这个是默认的请求格式。 提交给后台的数据会按照 KV&am…

瑞意教育集团阳光助学 军训展风采 青春正当时2024级新生军训圆满落幕

为推进全民素质教育,弘扬爱国主义精神,增强学生的国防意识,培养顽强的意志品格,5月7日—5月10日,瑞意教育集团举行2024级新生军训活动。 2024年5月7日上午8点,瑞意教育集团2024级新生军训动员大会在学校体育场举行,学校校长郭禹彤出席动员大会,并强调注意事项。 "立正!&qu…

AIGC绘画基础——Midjourney关键词大全+万能公式

距发布MJ初级注册入门教程已有时日&#xff0c;很多粉丝表示很有用&#xff0c;但关键词有很多人不知如何组合使用&#xff0c;那今天再给大家更新一期&#xff0c;主要是教大家如何用关键词、把控关键词描述&#xff0c;除此之外在文末更新了一大堆关键词给大家使用~ 一、Midj…

算法工程师需要学习C++的哪些知识?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;以下是算法工程师需要学习的一些…