风向风速图将Series中的风向风速数据data和xAxis中的时间data一一对应

进入正题之前,先讲一讲只有一条风向风速曲线的对应方法(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轴一一对应的时间,第二个放风速。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值