进入正题之前,先讲一讲只有一条风向风速曲线的对应方法(ps:我遭遇的需求是多条风向风速曲线,且每条曲线在某个时间点不一定有数据,这就需要你每条曲线的每个拐点都得和X轴的时间相对应才可):
var symbolRotateNum = [0,45,90];// 旋转的度数(风向角度)
var valueNum = [1,2,3];// 风速数值
var seriesData = echarts.util.map(valueNum, function (item, index) {
return {
value: valueNum[index],//这里直接放风速数据,它会按顺序和X轴的时间对应
symbolRotate: 360 - symbolRotateNum[index]//这里是风向角度,拿360去减
};
});
然后只要吧seriesData放入series.data即可。如下:
option = {
xAxis: {
type: 'category',
data: ['2020-12-1','2020-12-2','2020-12-3']
},
yAxis: {
type: 'value',
// min: 0,
max: max4
},
grid: {
top: '10',
left: '140',
// right: '20',
// bottom: '30'
},
tooltip: {
trigger: 'axis'
},
series: [{
data: seriesData,
type: 'line',
symbol: "image:///templates/app/center/images/arrow-wind.png",
symbolSize: '20',
smooth: true,
itemStyle: {
normal: {
color: "rgb(148, 192, 90)"
}
}
}]
};
以上都很简单是吧 ,但是到了多条曲线的时候就头疼了,你会发现你的风向风速数据只会按照顺序对应到X轴(就是说如果我12月2号没有数据,它会把12月3号的数据填到2号来)。
然后官网看文档看配置项的定义,似乎都没有明确的方法,网上也没有类似的文章。
很头疼,但是任务总不能不写吧,于是我就自己一个一个的去试。试了一个下午,终于试出来了!(实践很重要)
把我的代码贴出来:
for (let i = 0; i < staidList.length; i++){//这里循环是因为有多条曲线
var symbolRotateNum = fengxiangList[i];// 旋转的度数
var valueNum = windspeedList[i];// 风速数值
var data = echarts.util.map(valueNum, function (item, index) {
// return [
// valueNum[index][0],
// valueNum[index][1],
// 0.9545
// // 360 - symbolRotateNum[index][1]
// ];
// return {
// category: valueNum[index][0],
// value: valueNum[index][1],
// symbolRotate: 360 - symbolRotateNum[index][1]
//
// };
return {
value: [valueNum[index][0],valueNum[index][1]],//第一个放时间,第二个放风速
symbolRotate: 360 - symbolRotateNum[index][1]//这个是风向角度
};
});
dataList.push(data);
}
没什么复杂的,就是将value中放入一个数组,第一个数据放需要跟X轴一一对应的时间,第二个放风速。