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

在前端界面接收后端数据后,将数据赋值给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、最终显示结果如下图所示。

相关推荐
一只叫煤球的猫33 分钟前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel1 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
皮皮林5512 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript