Vue向Echarts传值

Vue向Echarts传值在学习了如何在vue中创建一个简单的echarts图表之后，其中的数据用于测试的时候是写死的，但是实际应用中数据应该是从数据库中获取，用真实数据，而不是直接写死的假数据，这个时候就要获取后台向前台传的值，应用于图表。一开始想的挺简单的，获取值把值放进对应的位置。没想到遇到了一个坑，获取到的值传不进去，弄了好久终于解决了。数据来源：用户表，性别有男女，统计男生和女生各人数先

一般社员

2818人浏览 · 2022-03-31 17:43:32

一般社员 · 2022-03-31 17:43:32 发布

Vue向Echarts传值
在学习了如何在vue中创建一个简单的echarts图表之后，其中的数据用于测试的时候是写死的，但是实际应用中数据应该是从数据库中获取，用真实数据，而不是直接写死的假数据，这个时候就要获取后台向前台传的值，应用于图表。

一开始想的挺简单的，获取值把值放进对应的位置。没想到遇到了一个坑，获取到的值传不进去，弄了好久终于解决了。

数据来源：用户表，性别有男女，统计男生和女生各人数

先说说遇到的坑

为了方便测试先只取男生的人数

我定义了一个接收后台数据的对象
在这里插入图片描述
向后台发送对应的请求，然后获取值，最后赋值给刚刚定义接收对象

设置图表数据

测试界面上没有数据

在这里插入图片描述
测试了好久，逻辑上也说的通，打印了值也是有数值的，就是传不进去设置图表对应值里面

解决：

问了同事，查了资料，把初始化dom实例以及设置图表值这些放在请求的回调里面就成功的解决了

因为我:manscount存的是单个的值所以data存值格式是这种:data:[manscount,manscount,manscount]

如果你 manscount格式为 manscount:[],那在data那边就是 data:manscount这种格式

因为设置图表值的data是数组

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^