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、最终显示结果如下图所示。

相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
only-qi3 小时前
146. LRU 缓存
java·算法·缓存
悟能不能悟4 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
xuxie135 小时前
SpringBoot文件下载(多文件以zip形式,单文件格式不变)
java·spring boot·后端
LFly_ice5 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
重生成为编程大王5 小时前
Java中的多态有什么用?
java·后端
666和7775 小时前
Struts2 工作总结
java·数据库
gnip5 小时前
js上下文
前端·javascript