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

news2024/11/24 7:02:53

在前端界面接收后端数据后,将数据赋值给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 = res
        this.creatUserChart()
      })
    },

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

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

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

相关文章

为什么2G、3G、4G成功了,5G却?

你可能已经多年来一直听到关于闪电般的5G的炒作。虽然新的无线网络在美国仍然没有普及,但5G正在波士顿和西雅图到达拉斯和堪萨斯城等城市慢慢出现。随着连接速度的加快,用户的安全性和隐私保护将增加,因为无线行业试图改善3G和4G的防御。但是…

K8S最新版本集群部署(v1.28) + 容器引擎Docker部署(下)

温故知新 📚第三章 Kubernetes各组件部署📗安装kubectl(可直接跳转到安装kubeadm章节,直接全部安装了)📕下载kubectl安装包📕执行kubectl安装📕验证kubectl 📗安装kubead…

文件上传漏洞复现(CVE-2018-2894)

文章目录 搭建环境启动环境漏洞复现 前提条件: 1.安装docker docker pull medicean/vulapps:j_joomla_22.安装docker-compose docker run -d -p 8000:80 medicean/vulapps:j_joomla_23.下载vulhub 搭建环境 进入vulhb目录下的weblogic,复现CVE-2018-289…

修改linux中tomcat的端口

随便修改一个 以8055为例子 开放8081端口 firewall-cmd --permanent --add-port8081/tcp firewall-cmd --reload firewall-cmd --list-all

three.js(七):内置的二维几何体

二维几何体 PlaneGeometry 矩形平面CircleGeometry 圆形平面RingGeometry 圆环平面 PlaneGeometry 矩形平面 PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer) width — 平面沿着X轴的宽度。默认值是1。height — 平面沿着Y…

从格灵深瞳中报稳定盈利,看AI公司的核心竞争力

2023年过半,人工智能产业话题不断。大模型和AIGC掀起热潮,让众多AI公司开始进入新一轮竞赛。但与此同时,不少AI公司依然处于亏损中,研发投入和商业产出难以实现正循环。如何形成健康的商业模式,仍是一大挑战。 AI公司…

【Linux操作系统】文件缓冲区

🔥🔥 欢迎来到小林的博客!!       🛰️博客主页:✈️林 子       🛰️博客专栏:✈️ Linux       🛰️社区 :✈️ 进步学堂       &#x1f6f0…

设计模式--代理模式(Proxy Pattern)

一、什么是代理模式(Proxy Pattern) 代理模式(Proxy Pattern)是一种结构型设计模式,它允许一个对象(代理)充当另一个对象(真实对象)的接口,以控制对该对象的…

DSP_TMS320F28377D_算法加速方法2_添加浮点运算快速补充库rts2800_fpu32_fast_supplement.lib

继上一篇博客DSP_TMS320F28377D_算法加速方法1_拷贝程序到RAM运行_江湖上都叫我秋博的博客-CSDN博客之后,本文讲第二种DSP算法加速的方法,该方法的加速效果很明显,但是加速范围仅限于32位浮点数下面这几种函数: 1 工程师的关注点 下面稍微解…

CentOS8安装mysql8.0.24

一、下载mysql安装包并解压 执行以下命令: # 创建mysql安装目录 mkdir /usr/local/mysql # 进入mysql安装目录 cd /usr/local/mysql/ # 下载mysql-8.0.24 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.24-linux-glibc2.12-x86_64.tar.xz # 解压…

防静电出入门禁管理系统的功能和特点

防静电出入门禁管理系统是一种应用于电子设备生产、仓储物流等领域的门禁系统,旨在防止静电对于设备和产品的损害和干扰。该系统主要包括以下几个方面的功能和特点: 1. 门禁控制功能:通过在入口设置读卡器或生物识别设备(如指纹、…

Java处理 CDT时区转换CST时区

例如:夏令营时间(“Sat Aug 01 00:00:00 CDT 1987”) //TODO CDT时区转换CST时区Date date new Date(value);TimeZone cdtTZ TimeZone.getTimeZone("America/Chicago");TimeZone cstTZ TimeZone.getTimeZone("America/Mexi…

SQL server数据库-定制查询-指定查询列/行、结果排序和Like模糊查询

本篇讲述进阶查询方法,如有语句不明确,可跳转本文专栏学习基础语法 1、指定列查询 特点 只会显示你输入的列的数据,会根据你输入的顺序进行显示,可以自定义查询显示时的列名 (1)只会显示你输入的列的数…

解析msvcp100.dll丢失的原因及修复方法,教你快速解决的方案

msvcp100.dll文件的丢失,其实也是属于dll丢失的其中一种,因为它是dll文件,大家记住,只要是后缀是dll的文件那么它就是dll文件,只要丢失了dll文件,那么其解决的方法都是大同小异的,唯一不同的是&…

分布式集群——jdk配置与zookeeper环境搭建

系列文章目录 分布式集群——jdk配置与zookeeper环境搭建 分布式集群——搭建Hadoop环境以及相关的Hadoop介绍 文章目录 系列文章目录 前言 一 zookeeper介绍与环境配置 1.1 zookeeper的学习 1.2 Zookeeper的主要功能 1.2.1 znode的节点类型 1.2.2 zookeeper的实现 …

【数据同步】如何快速同步第三方平台数据?

文章目录 前言1. 如何快速同步历史数据?2. 如何使用SFTP?2.1 账号权限控制2.2 统一数据格式2.3 使用job同步数据 3. 增量数据如何处理?4. 如何校验数据一致性? 前言 最近知识星球中有位小伙伴问了我一个问题:如何快速…

Navicat16连接Oracle报错:Oracle library is not loaded

1、有时候我们在用navicat的时候连接oracle的时候,它会提示我们Oracle library is not loaded,这时候我们要首先验证本机上是否已安装oracle的客户端,如果已安装客户段,navicat中的oci.dll选择我们安装的客户段的oci.dll文件 2、…

【C进阶】深度剖析数据在内存中的存储

目录 一、数据类型的介绍 1.类型的意义: 2.类型的基本分类 二、整形在内存中的存储 1.原码 反码 补码 2.大小端介绍 3.练习 三、浮点型在内存中的存储 1.一个例子 2.浮点数存储规则 一、数据类型的介绍 前面我们已经学习了基本的内置类型以及他们所占存储…

PyTorch 深度学习实践 第10讲刘二大人

总结: 1.输入通道个数 等于 卷积核通道个数 2.卷积核个数 等于 输出通道个数 1.单通道卷积 以单通道卷积为例,输入为(1,5,5),分别表示1个通道,宽为5,高为5。假设卷积核大小为3x3&#xff0c…