vue渲染Echarts图表请求后台数据返回{ob: Observer}_render __ob__: observer

阐述

• 最近因公司需求，使用echarts图表来实现部分功能，但是使用过程中遇到了以下问题的几个坑，则过来分享一下解决bug的过程，避免小伙伴们再次入坑。
• 因每个人遇到的问题都不同，以下问题仅供参考。

vue渲染echarts之排查问题

• 数据写死在echarts里面就可以，但是网络异步请求回来的就不行，后来以为是数据没有得到，在echarts图表里面打印了以下，数据也得到了了。又打印了echarts的 options，发现数据也被添加到里面了，但是页面上还是没有。
• 后来发现 console.log的时候数据 ** _ ob : Observer ** 经过网上一番的折腾，查询一致认为是“数组中出现__ob_: Observer无法取值”，要这样操作 “在我们push数据进数组里面或者赋值一些动态数据到数组以后,当数组里面出现如例子:[Array(36), Array(14), ob: Observer],后面的__ob__: Observer以后,我们会获取不到该数组里面的值,它是不可枚举的,这时候我们需要用JSON.parse(JSON.stringify(该数组))重新生成一个可枚举数组。但是经过这番折腾，发现还是不行，页面上面还是渲染不上。
• 一开始把渲染echarts的放在了 ** mounted** 这个钩子函数里面，把网络请求放在了created这个钩子函数里面，发现不行。然后我把mounted钩子函数里面相关echarts放在了网络请求的下面，请求数据成功在进行操作echarts。发现真的可以了。

vue渲染echarts之解决问题代码如下

mounted钩子函数代码

• 里面的方法就是操作echarts的。

 mounted: function () {
 this.$nextTick(()=> {
     //lzlnzcl();//荔枝历年总产量--渐变色条形图
     this.lnyqsl();//历年园区数量---折线图
     lnxszjejlr();//历年销售总金额及利润---渐变色条形图
     lnzjybs();//历年总交易笔数----折现区域图
     // lnlzmjs();//历年荔枝面积数---折线区域图
     // lnzcxmzs(); //历年众筹项目总数---条形图
     lngyssj(); //历年供应商数据---条形+折线图
 })
},
1
2
3
4
5
6
7
8
9
10
11

网络请求相关方法：

• 把以上钩子函数的代码复制到，我这里为了方便参考，我就直接复制了。实际项目中直接剪切mounted中的所有方法即可。

methods: {
_readData() {
     let url = this.httpUrl + "pi.PGZData.getExtraInfo.hf"
     let data = {
         AppType: 1,
         LoginKey: 9527,
         SystemID: 2
     }
     axios.post(url,data).then(res=> {
         console.log("请求成功", res)
         // let res1 = JSON.parse(res1.data.data.ExtraInfo)
         let dataList = res.data.data.ExtraInfo
         console.log(dataList)
         // 众筹项目总数(个)
         dataList.ProjectDayCountsList.forEach(item=> {
             this.projectDayArray.push(item.DateTime)
             this.projectContentArray.push(item.Counts)
         })
         // 用户注册数（人）
         dataList.ProjectDayCountsList.forEach((item,index)=> {
             this.userContentArray.push(item.Counts)
             this.userDayArray.push(item.DateTime)
         })

         // 历年荔枝众筹项目总数(个)
         dataList.ProjectYearCountsList.forEach(item=> {
             this.projectOverYearArray.push(item.Counts)
             this.projectOverYearContentArray.push(item.DateTime)
         })

         // 历年荔枝供应商数(个)
         dataList.ProviderYearCountsList.forEach(item=> {
             this.supplierYearContentArray.push(item.Counts)
             this.supplierYearArray.push(item.DateTime)
         })
		// 渲染echarts
		//lzlnzcl();//荔枝历年总产量--渐变色条形图
	     this.lnyqsl();//历年园区数量---折线图
	     lnxszjejlr();//历年销售总金额及利润---渐变色条形图
	     lnzjybs();//历年总交易笔数----折现区域图
	     // lnlzmjs();//历年荔枝面积数---折线区域图
	     // lnzcxmzs(); //历年众筹项目总数---条形图
	     lngyssj(); //历年供应商数据---条形+折线图
     }).catch(error=> {
         console.log("请求失败", error)
     })
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

以上就是解决vue渲染echarts没有数据的问题。