自从用了ucharts,我感觉我遇到的问题可以写一本书…
拿效果图说事:
1.前后台应用切换,部分数据恢复初始状态,部分是操作后的数据
解决办法:请求数据的方法,必须放在mounted()中,这样数据是不会随你切换后台到当前页面数据重新加载的
若数据扔在onshow()中,从当前切入后台,再从后台切入,父组件中在onshow写的初始数据会重新刷新,但子组件比如日期选择器的数值还是当初picker后的老数据,没有恢复初始状态,这样就导致,有的数据是初始值有的是切换前操作的数据
2.图表部署到安卓上可以绘制没问题,在ios上没有数据没表
解决办法:通过VConsole本机调试,我发现在ios上传的时间戳参数是NaN
uniapp中,由于我获取到当前的时间格式是“/”分开的,本想拼接成“-”,再转时间戳,结果在部署到ios的时候,这个时间戳的值为NaN,导致传参失败数据没请求过来图表绘制失败,看到不能对这个数据格式进行处理转时间戳
3.时间切换请求不同数据时,报错
问题分析:经过我的不断调试,我发现在我绘制图表的时候,第一次请求数据的时候没问题,往后就报这个类型不对了。
最后发现问题是出在,父组件中我是把请求到的data,name值存到了一个数组中,再传给子组件ucharts的时候,直接把ucharts的配置项series整个赋值了,导致配置项数据项格式不对
解决办法:父组件传值给子组件的data,name,必须具体对应配置项的option.series.data,option.series.name,若整个数组直接赋值,会导致其他配置数据不存在,第一次请求数据的时候问题还不大,因为是init初始化,第二次就是走监听,必须一对一赋值,不可直接赋值给seroption.series
配置项的 this.option.series.name = 监听到的数据.name
配置项的 this.option.series.data = 监听到的数据.data
4.绘制折线图中,y轴居然无法设置为整数,只给了一个自定义方法保留两位小数,当我四舍五入保留整数的时候,y轴数值重复
我现在的需求是,数据都是大于等于0的整数,一般情况都是分5条网格,但是如小于5的时候,我四舍五入显示整数会出现值重复的问题
解决办法:为了实现这样的需求,我只好把获取的y轴数值进行遍历,获取当最大的值为1,2,3,4,大于等于5不同状态,绘制不同条数的网格,这样就不会除不完
//this.opts.y 就是我请求到的Y轴的数据,找出最大的那个数值,就绘制几条网格
//this.splitNumber 就是我定义的网格条数,动态赋值给opts.yAxis.splitNumbe就行(文档中,opts.yAxis.splitNumber Number 默认5 Y轴网格数量)
this.opts.y.forEach(e => {
if(num < e){
num = e
}
if(num===4){
this.splitNumber = 4
}else if(num===2){
this.splitNumber = 2
}else if(num===3){
this.splitNumber = 3
}else if(num===1){
this.splitNumber = 1
}else{
this.splitNumber = 5
}
});
5.针对部分name值是固定的,比如评分中,一星,二星,三星,这样的,初始化数据的时候,name可直接固定死
比如:
public_manyiArr: [{
name: "未评价",
data: 0
},{
name: "一星",
data: 0
}, {
name: "二星",
data: 0
}, {
name: "三星",
data: 0
}, {
name: "四星",
data: 0
}, {
name: "五星",
data: 0
}],
在接口方法中,只需遍历,单单修改data的值就行
for(let i =0;i<this.public_manyiArr.length;i++){
//datas.evaluateStarList[i].percent 请求到的data
this.public_manyiArr[i].data = datas.evaluateStarList[i].percent
}
不过,切记,在走接口数据的时候,一调用这个请求接口的方法,首先就得初始化一下这个数组,还是原先的数据格式name固定
后面有问题我会继续补充的,希望对你有所帮助!