阐述
- 最近因公司需求,使用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(); //历年供应商数据---条形+折线图
})
},
网络请求相关方法:
- 把以上钩子函数的代码复制到,我这里为了方便参考,我就直接复制了。实际项目中直接剪切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)
})
},