【可视化大屏系列】Echarts之饼图绘制

news2024/9/22 15:52:01

本文为个人近期学习总结,若有错误之处,欢迎指出!

Echarts之饼图绘制

  • 前言
  • 1.需求
  • 2.实现效果
  • 3.大概思路
  • 4.代码实现
    • 子组件写法
    • 父组件写法
  • 5.附加
    • (1)圆环饼图的绘制
    • (2)南丁格尔玫瑰饼图
      • A.半径展示数据的大小
      • B.面积展示数据的大小

前言

在前文页面布局、DataV 的使用、Echarts 的基础使用的基础上,开始绘制大屏中的饼图。

1.需求

饼图展示公司人员学历占比情况。

2.实现效果

在这里插入图片描述

3.大概思路

为简化代码量,将基础饼图封装为组件:
(1)子组件绘制基础饼图,只有一个系列(type值为’pie’)
(2)父组件向子组件传递数据,数据格式为:


                

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

低代码:企业数字化转型的核心工具

在全球数字化浪潮风起云涌的当下,企业面临着前所未有的市场挑战与内部需求变化,急需以更快速、更灵活的方式响应。在这一关键时期,JNPF快速开发平台以其卓越的性能和广泛的功能覆盖,逐渐成为企业数字化转型的核心工具。 JNPF深度…

使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击-最高分和数据记录(十一)

文章目录 得分界面修改数据显示数据记录资源 使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击(一) 使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击-激光组件(二) 使用Godot4组件制作竖版太空射击游戏_2D卷轴飞机射击-飞船…

贪心算法案例

1.买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔…

机器学习开源分子生成系列(2)-基于三维形状和静电相似性的DeepFMPO v3D安装及使用

前言 本文是基于 3D 的分子生成方法DeepFMPO v3D的介绍及安装使用。 一、DeepFMPO v3D是什么? github代码介绍文章 在药物发现中,如何寻找具新颖性和结构多样性的候选分子是颇受药物设计科学家关注的问题。通过虚拟筛选的化学空间搜索往往会受限于筛选…

嵌入式linux相机 框图

摄像头读取数据显示到LCD流程 重点:摄像头数据(yuyv,mjpeg,rgb)(640,320)与LCD显示数据(RGB)(480,240)不同;需要转换&…

JVM:运行时数据区

文章目录 一、总览二、程序计数器1、介绍2、程序计数器在运行中会出现内存溢出吗? 三、栈1、介绍2、栈帧的组成部分(1)局部变量表(2)操作数栈(3)帧数据(3)栈内存溢出&…

js中使用原型链增加方法后,遍历对象的key-value时会遍历出方法

原因:js使用原型链实现方法时,这个方法默认是可迭代的,所以在遍历时就会被遍历出来, 例: Array.prototype.remove function(n){return this.slice(0,n).concat(this.slice(n1,this.length));}var cc ["cccaaaa…

【算法】Splay详解

Splay 引入 Splay旋转操作splay操作插入操作查询x排名查询排名为x删除操作查询前驱/后继模板Splay时间复杂度分析 进阶操作截取区间区间加,区间赋值,区间查询,区间最值区间翻转原序列整体插入指定位置插入整体插入末尾区间最大子段和 一些好题…

【windows|014】TCP协议详解

🍁博主简介: 🏅云计算领域优质创作者 🏅2022年CSDN新星计划python赛道第一名 🏅2022年CSDN原力计划优质作者 ​ 🏅阿里云ACE认证高级工程师 ​ 🏅阿里云开发者社区专家博主 💊交流社…

LLM用于时序预测真的不行,连推理能力都没用到

语言模型真的能用于时序预测吗?根据贝特里奇头条定律(任何以问号结尾的新闻标题,都能够用「不」来回答),答案应该是否定的。事实似乎也果然如此:强大如斯的 LLM 并不能很好地处理时序数据。 时序&#xff0…

Prometheus监控主机进程

前言 客户端安装及配置 Premetheus服务端配置 模板导入 grafana效果图 前言 此场景主要是利用process-export监控主机的进程存活、资源占用率,防止进程挂掉导致服务崩溃 gitlab地址:GitHub - ncabatoff/process-exporter: Prometheus exporter that…

开发体育直播平台:高并发问题解决手段及架构设计思路

在追求极致观赛体验的体育直播领域,高并发处理能力成为了衡量系统性能与稳定性的关键标尺。东莞梦幻网络科技技术团队,凭借其在互联网领域的深厚积累与前瞻视野,成功打造了一套高效、稳定的体育赛事直播系统,有效解决了高并发带来…

【Python】sklearn教程

1. sklearn库介绍 sklearn是 Python 中一个非常重要的机器学习库,全称为scikit-learn。它是基于Python语言的机器学习工具,提供了一系列简单高效的机器学习算法。sklearn库通常与NumPy和SciPy库一起使用,用于数据预处理、特征选择、模型训练…

Centos 使用nfs配置共享目录使docker集群所有容器日志统一主机访问

Centos 使用nfs配置共享目录,使docker集群所有容器日志统一存放在主机一个共享目录下,供开发人员访问查看 准备两台或以上Centos服务器 192.168.0.1 nfs服务器 192.168.0.2 nfs客户端 以root用户登录192.168.0.1服务器,执行以下操作 注意先…

【JavaScript】解决 JavaScript 语言报错:Uncaught SyntaxError: Unexpected identifier

文章目录 一、背景介绍常见场景 二、报错信息解析三、常见原因分析1. 缺少必要的标点符号2. 使用了不正确的标识符3. 关键词拼写错误4. 变量名与保留字冲突 四、解决方案与预防措施1. 检查和添加必要的标点符号2. 使用正确的标识符3. 检查关键词拼写4. 避免使用保留字作为变量名…

ReentrantLock的源码实现和原理介绍

目录 一、概述 二、ReentrantLock的整体结构 三、ReentrantLock 和Synchronized相比 四、ReentrantLock 公平锁和非公平锁实现 4.1 ReentrantLock 源码解读 4.1.1 ReentrantLock 类源码解读 4.1.1.1 Lock接口 4.1.1.2 Sync抽象类 4.1.1.3 NonfairSync()和FairSync() 4…

《0基础》学习Python——第十讲

小知识点补充 一、json大字符串 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它以易于阅读和编写的方式为基础,同时也易于解析和生成。因为其简洁性和可读性,JSON已成为数据交换的首选格式。 大字符…

超大模型加载转换Trick

在深度学习领域,大模型的训练和推理通常需要消耗大量的计算和内存。如何高效地加载和使用大模型是一个相当关键的问题。在这篇博客中,我将分享一些关于更快加载大模型和减少内存的技巧。 1.问题分析 假设现在我们有一个236B 超大模型的原始权重的 check…

jmeter-beanshell学习9-放弃beanshell

写这篇时候道心不稳了,前面写了好几篇benashell元件,突然发现应该放弃。想回去改前面的文章,看了看无从下手,反正已经这样了,我淋了雨,那就希望别人也没有伞吧,哈哈哈哈,放在第九篇送…

DHCP原理及配置

目录 一、DHCP原理 DHCP介绍 DHCP工作原理 DHCP分配方式 工作原理 DHCP重新登录 DHCP优点 二、DHCP配置 一、DHCP原理 1 DHCP介绍 大家都知道,现在出门很多地方基本上都有WIFI,那么有没有想过这样一个问题,平时在家里都是“固定”的…