当前位置: 首页 > 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
http://www.lryc.cn/news/362425.html

相关文章:

  • 解决在Mac下使用npm报错:Error: EACCES: permission denied
  • pvt对net delay的影响
  • 力扣5 最长回文子串
  • 【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色
  • HarmonyOS鸿蒙学习笔记(25)相对布局 RelativeContainer详细说明
  • 自然语言处理学习中英文翻译语料库
  • 可视化数据科学平台在信贷领域应用系列二:数据清洗
  • JS面试题:hash和history的区别
  • GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)
  • 机器视觉检测--相机
  • 【人工智能】第四部分:ChatGPT的技术实现
  • 小程序配置自定义tabBar及异形tabBar配置操作
  • 解析《动物园规则怪谈》【逻辑】
  • 上传RKP 证书签名请求息上传到 Google 的后端服务器
  • Debian和ubuntu 嵌入式的系统的 区别
  • HTML旋转照片盒子
  • 【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成
  • AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)
  • MySQL索引与事务
  • 『大模型笔记』从基础原理出发提升深度学习性能
  • 【二叉树】Leetcode 222. 完全二叉树的节点个数【简单】
  • golang界面设计器,全网少见
  • 如何在GlobalMapper中加载高清卫星影像?
  • 【机器学习】解锁AI密码:神经网络算法详解与前沿探索
  • Java如何实现pdf转base64以及怎么反转?
  • 动态规划5:62. 不同路径
  • Python编程学习第一篇——Python零基础快速入门(五)-列表(List)
  • c# - 运算符 << 不能应用于 long 和 long 类型的操作数
  • 问题排查|记录一次基于mymuduo库开发的服务器错误排查(回响服务器无法正常工作)
  • 中介模式实现聊天室