vue echart3个饼图
概览:根据UI设计需要做3个饼图且之间有关联,并且处理后端返回的数据。
参考链接:
echart 官网的一个案例,3个饼图
实现思路:
根据案例,把数据处理成对应的。
参考代码:
1.处理后端数据:
/*** 处理接口数据* 注意:echart是在渲染的时候就传递数据*/
const getMetarialCondition = () => {api.getMetarialList.post({ shipGuid: data.shipGuid }).then((res) => {if (res.data.code == 200) {// 返回data是否为空if (res.data.data.length !== 0) {// //库存总数let totalHouseNum = res.data.data?.map((item, index) => {return item.num}).reduce((preValue, curValue) => {return preValue += curValue})//库存入库let putHouseNum = res.data.data?.map((item, index) => {return item.putNum}).reduce((preValue, curValue) => {return preValue += curValue})//库存出库let outHouseNum = res.data.data?.map((item, index) => {return item.outNum}).reduce((preValue, curValue) => {return preValue += curValue})/*** 优化数据*///库存余量let myModifyTotalNum = res.data.data?.map((item, index) => {return [item.name, item.num, '库存余量']})//库存入库let myModifyPutNum = res.data.data?.map((item, index) => {return [item.name, item.putNum, '库存入库']})//库存出库let myModifyOutNum = res.data.data?.map((item, index) => {return [item.name, item.outNum, '库存出库']})let myModifyData = [...myModifyTotalNum, ...myModifyPutNum, ...myModifyOutNum]/*** 更新状态*/metarialData.totalHouseNum = totalHouseNummetarialData.putHouseNum = putHouseNummetarialData.outHouseNum = outHouseNumreDrawChartMetarial(myModifyData)} else {let nullData = []reDrawChartMetarial(nullData)}}})
};
2.ecahrt渲染的参数:
/*** 渲染echart的方法* @param {[]} value 传参*/
const reDrawChartMetarial = (value) => {const mySource = [['name', 'value', 'myTag'],...value]let metarialOption = {tooltip: {trigger: 'item',position: 'right', //提示框浮层的位置},grid: {left: "3%",right: "4%",bottom: "3%",width: "820px",height: "320px",containLabel: true},legend: {orient: 'horizontal',left: 'center',textStyle: {color: '#000',fontSize: fontSize(14),},formatter: function (a) {if (a.length > 5) {a = a.slice(0, 5) + "..."; //截断拼接省略号 }return a;}},dataset: [{source: mySource,},{transform: {type: 'filter',config: { dimension: 'myTag', value: '库存余量' }}},{transform: {type: 'filter',config: { dimension: 'myTag', value: '库存入库' }}},{transform: {type: 'filter',config: { dimension: 'myTag', value: '库存出库' }}}],series: [{type: 'pie',radius: 50,top: 100,left: -100,center: ['10%', '50%'],datasetIndex: 1,textStyle: {color: "#000",align: "right",fontSize: fontSize(16),},label: {formatter: function (a) {if (a.name) {a = a.name.slice(0, 12) + "..."; //截断拼接省略号 }return a;},}},{type: 'pie',radius: 50,top: 100,center: ['50%', '50%'],datasetIndex: 2,label: {normal: {formatter: function (a) {if (a.name) {a = a.name.slice(0, 12) + "..."; //截断拼接省略号 }return a;},}}},{type: 'pie',radius: 50,top: 100,left: 300,center: ['90%', '50%'],datasetIndex: 3,label: {normal: {formatter: function (a) {if (a.name) {a = a.name.slice(0, 5) + "..."; //截断拼接省略号 }return a;},}}}],media: [{query: { minAspectRatio: 1 },option: {series: [{ center: ['25%', '50%'] },{ center: ['50%', '50%'] },{ center: ['75%', '50%'] }]}},{option: {series: [{ center: ['50%', '25%'] },{ center: ['50%', '50%'] },{ center: ['50%', '75%'] }]}}]};metarialOption && dataEcharts.metaChart.setOption(metarialOption, true);
}
效果展示:

相关文章:
vue echart3个饼图
概览:根据UI设计需要做3个饼图且之间有关联,并且处理后端返回的数据。 参考链接: echart 官网的一个案例,3个饼图 实现思路: 根据案例,把数据处理成对应的。 参考代码: 1.处理后端数据&am…...
LEARNING TO EXPLORE USING ACTIVE NEURAL SLAM 论文阅读
论文信息 题目:LEARNING TO EXPLORE USING ACTIVE NEURAL SLAM 作者:Devendra Singh Chaplot, Dhiraj Gandhi 项目地址:https://devendrachaplot.github.io/projects/Neural-SLAM 代码地址:https://github.com/devendrachaplot/N…...
item_search-ks-根据关键词取商品列表
一、接口参数说明: item_search-根据关键词取商品列表,点击更多API调试,请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/ks/item_search 名称类型必须描述keyString是调用key(http:…...
windows运行WPscan报错:无法打开库libcurl.dll
windows运行WPscan报错:无法打开库libcurl.dll 1.问题背景2.解决方案1.问题背景 在Windows上启动WPScan时: wpscan --url xxx.ru提示如下错误: Could not open library libcurl.dll: �� ������ ��������� ������. . Could not open library libcu...
web前端框架Javascript之JavaScript 异步编程史
早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成…...
Java多线程(1)---多线程认识、四种创建方式以及线程状态
目录 前言 一.Java的多线程 1.1多线程的认识 1.2Java多线程的创建方式 1.3Java多线程的生命周期 1.4Java多线程的执行机制 二.创建多线程的四种方式 2.1继承Thread类 ⭐创建线程 ⭐Thread的构造方法和常见属性 2.2.实现Runnable接口 ⭐创建线程 ⭐使用lambda表达…...
搭建Django+pyhon+vue自动化测试平台
Django安装 使用管理员身份运行pycharm使用local 1 pip install django -i https://pypi.tuna.tsinghua.edu.cn/simple 检查django是否安装成功 1 python -m django --version 创建项目 1 1 django-admin startproject test cd 切换至创建的项目中启动django项目…...
CASAIM自动化平面度检测设备3D扫描零部件形位公差尺寸测量
平面度是表面形状的度量,指示沿该表面的所有点是否在同一平面中,当两个表面需要连接在一起形成紧密连接时,平面度检测至关重要。 CASAIM自动化平面度检测设备通过搭载领先的激光三维测头和智能检测软件自动获取零部件高质量测量数据…...
PostgreSql pg_ctl 命令
一、概述 控制 PostgreSQL 服务的工具。 二、语法 --初始化数据库实例 pg_ctl init[db] [-D datadir] [-s] [-o initdb-options]--启动数据库实例 pg_ctl start [-D datadir] [-l filename] [-W] [-t seconds] [-s] [-o options] [-p path] [-c]--停止数据库实例 pg_ctl sto…...
MySQL中的MVCC具体指的是什么?
在MySQL中,MVCC是指多版本并发控制(Multi-Version Concurrency Control)。它是一种用于处理并发读写操作的数据库事务管理技术。 MVCC通过在数据库中维护多个版本的数据来实现并发控制,每个事务在执行期间看到的数据版本是确定性…...
Docker网络模型详解
目录 一、Docker网络基础 1、端口映射 使用-P选项时Docker会随机映射一个端口至容器内部的开放端口 使用docker logs查看Nginx的日志 查看映射的随机端口范围 2、使用-p可以指定要映射到的本地端口。 Local_Port:Container_Port : 端口映射参数中指定了宿主…...
如何打造属于自己的个人IP?
在当今信息爆炸的时代,个人 IP 已经成为人们在网络世界中的独特标签。无论是在职场上、创业中,还是在社交生活中,拥有个人 IP 的人都能脱颖而出,吸引更多的关注和机会。那么,如何打造属于自己的个人 IP 呢?…...
全网最全最细的jmeter接口测试教程以及接口测试流程详解
一、Jmeter简介 Jmeter是由Apache公司开发的一个纯Java的开源项目,即可以用于做接口测试也可以用于做性能测试。 Jmeter具备高移植性,可以实现跨平台运行。 Jmeter可以实现分布式负载。 Jmeter采用多线程,允许通过多个线程并发取样或通过…...
【Linux命令200例】whereis用于搜索以及定位二进制文件
🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆本文已收录于专栏:Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
Elasticsearch:如何将整个 Elasticsearch 索引导出到文件 - Python 8.x
在实际的使用中,我们有时希望把 Elasticsearch 的索引保存到 JSON 文件中。在之前,我写了一篇管如何备份 Elasticsearch 索引的文章 “Elasticsearch:索引备份及恢复”。在今天,我们使用一种 Python 的方法来做进一步的探讨。你可…...
cmd 实现启动mysql时保留窗口
因为mysql启动后, 只有在任务管理器里能看到进程, 关的时候还需要找一下 所以基于 start cmd /k 命令实现了该效果 :: Author: admin :: Date: 2022-08-30 :: Version v1.2 :: ::启动 :: :: echo off::配置变量 set mysqlC:\mysql-5.7.38-winx64\bin\mysqld.exe::打印配置…...
JavaScript数据结构与算法——栈
文章目录 一、初始栈结构1.1 特性1.2 注意事项 二、栈结构的封装2.1 封装简单栈结构2.2 利用栈将十进制转二进制 一、初始栈结构 1.1 特性 类似于汉诺塔,后进先出,每次只能操作栈顶的元素。关键词:压栈、退栈 简单示意图: 1.…...
Elasticsearch分词详解:ES分词介绍、倒排索引介绍、分词器的作用、停用词
详见:https://blog.csdn.net/weixin_40612128/article/details/123476053...
SpringMVC组件
目录 1、简介 2、SpringMVC与Servlet的关系 3、struc2 4、RESTful 编程风格 5、工作流程 6、代码示例 6.1、导入坐标 provide 6.2、DispathcerServlet 🔺配置web.xml 初始化 优先级 ⭐ 6.3、Controller类及视图页面 6.4、配置注解 6.5、spring-mvc.xm…...
解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)
问题描述: 在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长,WebRTC作为开源实时通信技术,为浏览器与移动应用提供免插件的音视频通信能力,在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能,对实时…...
SQLSERVER-DB操作记录
在SQL Server中,将查询结果放入一张新表可以通过几种方法实现。 方法1:使用SELECT INTO语句 SELECT INTO 语句可以直接将查询结果作为一个新表创建出来。这个新表的结构(包括列名和数据类型)将与查询结果匹配。 SELECT * INTO 新…...
Neo4j 完全指南:从入门到精通
第1章:Neo4j简介与图数据库基础 1.1 图数据库概述 传统关系型数据库与图数据库的对比图数据库的核心优势图数据库的应用场景 1.2 Neo4j的发展历史 Neo4j的起源与演进Neo4j的版本迭代Neo4j在图数据库领域的地位 1.3 图数据库的基本概念 节点(Node)与关系(Relat…...
day51 python CBAM注意力
目录 一、CBAM 模块简介 二、CBAM 模块的实现 (一)通道注意力模块 (二)空间注意力模块 (三)CBAM 模块的组合 三、CBAM 模块的特性 四、CBAM 模块在 CNN 中的应用 一、CBAM 模块简介 在之前的探索中…...
