Vue中如何为Echarts统计图设置数据

在前端界面接收后端数据后,将数据赋值给ECharts中的data时出现了,数据读取失败的问题(可能是由于数据渲染的前后顺序问题)。后通过如下方式进行了解决:

1、接下来将介绍UserController中的countUsers方法,用于返回管理员以及普通用户的数目。首先,定义一个JSONArray对象用于存储JSONObject对象。然后分别定义两个JSONObject对象用于存储管理员以及普通用户的相关信息。调用Service层中的countRoot()和countGeneral()方法,返回管理员和普通用户的数目。通过put()方法向JSONObject中添加键值对,最终将两个JSONObject通过add()方法添加到JSONArray中,最终返回。代码如下所示。

@GetMapping("/countUsers")public Object countUsers() {JSONArray jsonArray = new JSONArray();JSONObject rootUser = new JSONObject();int rootNum = userService.countRoot();rootUser.put("value", rootNum);rootUser.put("name", "管理员");jsonArray.add(rootUser);JSONObject generalUser = new JSONObject();int generalNum = userService.countGeneral();generalUser.put("value", generalNum);generalUser.put("name", "普通用户");jsonArray.add(generalUser);return jsonArray;}

2、前端界面调用接口,接收返回的jsonArray,并将接收到的JSON数组赋值给this.userValue,然后调用creatUserChart方法,最终实现用户统计图的显示。

creatUserChart() {var myChart = echarts.init(document.getElementById('userChart'));myChart.setOption({title: {text: "用户信息",x: "center",y: "310px"},color: ['#41719f', '#8dccfc'],tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: '用户数量',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 30,fontWeight: 'bold'}},labelLine: {show: false,},data: this.userValue}]})}countUser() {api.countUsers().then(res => {this.userValue = resthis.creatUserChart()})},

3、最终显示结果如下图所示。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】二叉树篇|超清晰图解和详解:二叉树的序列化和反序列化

博主简介:努力学习的22级计算机科学与技术本科生一枚🌸博主主页: 是瑶瑶子啦每日一言🌼: 你不能要求一片海洋,没有风暴,那不是海洋,是泥塘——毕淑敏 目录 一、核心二、题目2.1:前序遍历2.2&…

优思学院|六西格玛中的概率分布有哪些?

为什么概率分布重要? 概率分布是统计学中一个重要的概念,它帮助我们理解随机变量的分布情况以及与之相关的概率。在面对具体问题时,了解概率分布可以帮助我们选择适当的检验或分析策略,以解决问题并做出合理的决策。 常见的概率…

Level-based Foraging 多智能体游戏仿真环境

游戏场景测试 参考链接: https://kgithub.com/semitable/lb-foraging

Kubernetes技术--k8s核心技术 Secret

1.概述 Secret 解决了密码、token、密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者 Pod Spec中。Secret可以以 Volume 或者环境变量的方式使用。 作用 加密数据存储在/etc中,使得pod容器以挂载volume方式进行访问。在进行的数据存储中是以base64加密的方式…

Mysql批量插入大量数据的方法

使用存储过程进行插入&#xff0c; 在navicate中示例如下&#xff1a; 输入需要的参数点击完成 在begin end中输入代码&#xff0c;示例代码如下 CREATE DEFINERskip-grants userskip-grants host PROCEDURE batch_insert() BEGINdeclare i int default 0; set i0;while i<1…

【实战】十一、看板页面及任务组页面开发(六) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二十八)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…

学会Mybatis框架:让你的开发事半功倍【五.Mybatis关系映射】

目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 导语 一、一对一的关系映射 1.表结构 2.resultMap配置 3.测试关系映射 二、一对多的关系映射 1.表结构 2.resultMap配置 3.测试关系映射 三、多对多的关系映射 1.表结构…

安防监控视频平台EasyCVR视频汇聚平台定制项目增加AI智能算法详细介绍

安防视频集中存储EasyCVR视频汇聚平台&#xff0c;可支持海量视频的轻量化接入与汇聚管理。平台能提供视频存储磁盘阵列、视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、平台级联、H.265自动转码等功能。为了便…

Java 中数据结构LinkedList的用法

LinkList 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 一个单向链表包含两个值: 当前节点…

react css 污染解决方法

上代码 .m-nav-bar {background: #171a21;.content {height: 104px;margin: 0px auto;} }import React from "react"; import styles from ./css.module.scssexport default class NavBar extends React.Component<any, any> {constructor (props: any) {supe…

多线程的五种“打开”方式

1 概念 1.1 线程是什么&#xff1f;&#xff1f; 线程&#xff08;Thread&#xff09;是计算机科学中的一个基本概念&#xff0c;它是进程&#xff08;Process&#xff09;中的一个执行单元&#xff0c;负责执行程序的指令序列。线程是操作系统能够进行调度和执行的最小单位。…

ZigBee案例笔记 -- RFID卡片读写(模拟饭卡)

RFID模拟饭卡应用 RFID&#xff08;射频识别技术&#xff09;RFID通讯协议RFID发展历史RFID操作流程说明RFID卡片读写流程RFID寻卡RFID防碰撞RFID选卡RFID卡密验证RFID读卡RFID写卡读写数据流程 RFID饭卡模拟案例驱动代码串口协议饭卡操作案例结果优化建议 RFID&#xff08;射频…