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

news/2024/7/10 2:06:26 标签: 前端, Vue, java, javascript

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

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

java">@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方法,最终实现用户统计图的显示。

javascript">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.niftyadmin.cn/n/4995906.html

相关文章

spring boot项目生成容器并运行

一个安静的周末,shigen又睡懒觉了,上次说的拖延症的惩罚来了:早晚各100个健腹轮练习,早上的已经完成了。今天的文章来的有点晚,但是依旧保持质量。 springboot项目生成容器并运行 背景 将springboot项目打包成jar包&…

基于java+springboot+vue的考研资讯平台-lw

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: ssm mybatis Maven mysql5.7或8.0等等组成,B…

防溺水智能预警系统解决方案 yolov7

防溺水智能预警系统解决方案采用yolov7先进的AI视觉识别算法模型框架,防溺水智能预警系统解决方案算法实现对危险水域人员活动、水面情况等各项指标的监测和分析。当发现有人进入危险水域或出现紧急情况时,算法会立即发出预警信号。Yolo算法采用一个单独…

【易售小程序项目】小程序首页完善(滑到底部数据翻页、回到顶端、基于回溯算法的两列数据高宽比平衡)【后端基于若依管理系统开发】

文章目录 说明细节一:首页滑动到底部,需要查询下一页的商品界面预览页面实现 细节二:当页面滑动到下方,出现一个回到顶端的悬浮按钮细节三:商品分列说明优化前后效果对比使用回溯算法实现ControllerService回溯算法 优…

第 112 场 LeetCode 双周赛题解

A 判断通过操作能否让字符串相等 I s 1 s1 s1和 s 2 s2 s2第 1 1 1、 2 2 2位若同位置不等,则 s 1 s1 s1交换对应的 i i i和 j j j位置,之后判断 s 1 s1 s1和 s 2 s2 s2是否相当 class Solution { public:bool canBeEqual(string s1, string s2) {for (i…

链表OJ练习(2)

一、分割链表 题目介绍: 思路:创建两个链表,ghead尾插大于x的节点,lhead尾插小于x的节点。先遍历链表。最后将ghead尾插到lhead后面,将大小链表链接。 我们需要在创建两个链表指针,指向两个链表的头节点&…

aarch64-linux交叉编译libcurl带zlib和openssl

交叉编译libcurl需要依赖zlib和openssl 需要先用aarch64工具链编译zlib和openssl aarch64-linux环境搭建 下载工具链 gcc用于执行交叉编译 gcc-linaro-7.5.0-2019.12-x86_64_aarch64-linux-gnusysroot是交叉版本的库文件集合 sysroot-glibc-linaro-2.25-2019.12-aarch64-lin…

01 harbor密码重置

重置Harbor密码 登录harbor的数据库登录pg数据库进入registry库查看admin用户更新密码 重置harbor密码,前提需要相同版本的harbor和一个已知密码的账号,需要将加密的密码修改到忘记密码的harbor上。 登录harbor的数据库 docker exec -it harbor-db /bi…