前言
因为小程序做图表的我用的是antv-f2的组件，它数据格式跟echarts的不一样，所以要对拿到的数据进行处理，但偏偏我们后台返回的数据有点小乱，没办法我只好各种处理了。搞了好久，才搞定的，所以我就做个笔记，记录一下。
首先
anvt-f2数据格式是（如下）
getLineDataCurve(lineData) {
lineData.forEach(item => {
let len = item.ReturnList.length
item.Time = []; //因为后台返回的时间是分开年月日的，所以我把时间统一放在一个数组里面
item.newData = {};
this.data.items.forEach(k => { // 循环我写的数组
item.newData[k.title] = { //在获取到的后台数据里面我新起了一个数组对象
data: [], //存放RC、Tb什么的对应的值
Unit: k.unit
};
for (let i = 0; i < len; i++) {
item.Time.push(`0${item.ReturnList[i].HH}`.slice(-2) + ':' + `0${item.ReturnList[i].MI}`.slice(-2));
for (let t in item.ReturnList[i]) {
if (t === k.title) { //拿到相对应的RC、Tb等等的值
item.newData[t].data.push(item.ReturnList[i][t])
}
}
}
})
item.Time = [...new Set(item.Time)]
})
const arr = []; //在这里去掉多余的数据，拿自己需要的数据，然后在折线图那里的时候再做处理
for (let i = 0; i < lineData.length; i++) {
for (let j in lineData[i].newData) {
if (lineData[i].newData[j].data.length !== 0) {
if (lineData[i].TimeDay == '昨天') {
const nodeData = {
xdata: lineData[i].Time,
ydata: lineData[i].newData[j].data,
yunit: lineData[i].newData[j].Unit,
name: j == null ? 0 : j,
type: lineData[i].TimeDay
}
arr.push(nodeData)
} else {
const todayData = {
xdata: lineData[i].Time,
ydata: lineData[i].newData[j].data,
yunit: lineData[i].newData[j].Unit,
name: j == null ? 0 : j,
type: lineData[i].TimeDay
}
arr.push(todayData)
}
}
}
}
const func = this.initChart;
this.setData({
opts: { //创建折线图实例
onInit: func
},
lineData: arr,
isShow: true
})
},
经过一波处理后的数据（如下）
然后
终于看到终点了，接下来就是折线图数据处理了
initChart(canvas, width, height) { // 使用 F2 绘制图表
//this.data.current_scroll 对应的是我做的items里面的title，也就是RC、Tb这些
const arr = [];
const lineArr = this.data.lineData
for (var x = 0; x < lineArr.length; x++) {
if (this.data.current_scroll == lineArr[x].name) {
lineArr[x].ydata.forEach((i, k) => {
let obj = {
time: lineArr[x].xdata[k],
value: i,
type: lineArr[x].type,
unit: lineArr[x].yunit,
name: lineArr[x].name
};
arr.push(obj)
})
}
}
const chart = new F2.Chart({
el: canvas,
width,
height,
});
chart.source(arr, {
time: {
tickCount: 8,
range: [0, 1]
},
value: {
formatter: function formatter(ivalue) {
return ivalue + arr[0].unit;
}
}
});
chart.axis('time', {
line: null,
label: function label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
onShow: function onShow(ev) {
const items = ev.items;
items.forEach(i => {
i.name = i.title;
i.value = i.origin.type + '：' + i.origin.name + '(' + i.origin.value + ')';
})
}
});
chart.legend({
position: 'top',
offsetY: -5
});
chart.line().position('time*value').color('type')
chart.render();
return chart;
},
最后
折线图拿到的数据格式（如下）
效果
头部是tab切换，然后滑动查看其它的元素，反正有十几个tab-item要展示吧！
