echarts画风向杆
1.安装echarts
2.引入echarts
4.获取数据，转换数据格式
windProfile.title.text = `${moment(time.searchTime[0], ‘YYYY-MM-DD HH:mm:ss’).format(
‘YYYY-MM-DD HH:mm’
)}-${moment(time.searchTime[1], ‘YYYY-MM-DD HH:mm:ss’).format(‘YYYY-MM-DD HH:mm’)}——水平风风羽图`
data.forEach(item => {
windProfile.xAxis.data.push(moment(item.time, ‘YYYY-MM-DD HH:mm:ss’).format(‘HH:mm’))
arr = item.fengKuoXianItems.filter(
i => heightRange.less * 1000 <= i.height && i.height <= heightRange.greater * 1000
)
arr.forEach(item1 => {
if (item1.direction && item1.speed) {
windProfile.series[0].data.push({
value: [
moment(item.time, ‘YYYY-MM-DD HH:mm:ss’).format(‘HH:mm’),
item1.height,
transformationSpeed(item1.speed),
item1.direction > 9999 ‘’ : getWindPower(item1.direction),
item1.speed > 9999 ‘’ : getWindSpeed(item1.speed),
item1.speed > 9999 ‘’ : item1.speed.toFixed(2)
],
label: {
rotate: -item1.direction,
color: `rgba(${getColor(colorData.value[0].stops, item1.speed).stop.join(‘,’)})`
}
})
}
})
})
1）转换字体根据风速转字体
const transformation = [
//风速转字体
[1, ‘m’, 0],
[3, ‘k’, 1],
[5, ‘1’, 2],
[7, ‘2’, 3],
[9, ‘3’, 4],
[11, ‘4’, 5],
[13, ‘5’, 6],
[15, ‘6’, 7],
[17, ‘7’, 8],
[19, ‘n’, 9],
[21, ‘8’, 10],
[23, ‘9’, 11],
[25, ‘:’, 12],
[27, ‘;’, 13],
[29, ‘<’, 14],
[31, ‘=’, 15],
[33, ‘>’, 16],
[35, ‘’, 17],
[37, ‘@’, 18],
[39, ‘A’, 19],
[41, ‘B’, 20],
[43, ‘C’, 21],
[45, ‘D’, 22],
[47, ‘E’, 23],
[49, ‘F’, 24],
[51, ‘G’, 25],
[53, ‘H’, 26],
[55, ‘I’, 27],
[57, ‘J’, 28],
[999, ‘K’, 28]
]
//根据风速转字体
const transformationSpeed = speed => {
for (let t = 0; t < transformation.length; t++) if (Number(speed) <= transformation[t][0]) return transformation[t][1]
return ‘0’
}
注意修改echarts里series的配置项
2）转换风向
const windPower = [
//风向
[11.25, ‘北风’],
[33.75, ‘东北风’],
[56.25, ‘东北风’],
[78.75, ‘东北风’],
[101.25, ‘东风’],
[123.75, ‘东南风’],
[146.25, ‘东南风’],
[168.75, ‘东南风’],
[191.25, ‘南风’],
[213.75, ‘西南风’],
[236.25, ‘西南风’],
[258.75, ‘西南风’],
[281.25, ‘西风’],
[303.75, ‘西北风’],
[326.25, ‘西北风’],
[348.75, ‘西北风’],
[1e3, ‘西北风’]
]
// 获取风向
const getWindPower = e => {
for (let t = 0; t < windPower.length; t++) if (e < windPower[t][0]) return windPower[t][1]
return ‘无风’
}
3）转换风速
const windSpeed = [
//风速
[0.2, 0],
[1.5, 1],
[3.3, 2],
[5.4, 3],
[7.9, 4],
[10.7, 5],
[13.8, 6],
[17.1, 7],
[20.7, 8],
[24.4, 9],
[28.4, 10],
[32.6, 11],
[36.9, 12],
[41.4, 13],
[46.1, 14],
[50.9, 15],
[56, 16],
[61.2, 17]
]
//获取风速
const getWindSpeed = e => {
for (let t = 0; t < windSpeed.length; t++) if (e < windSpeed[t][0]) return windSpeed[t][1].toFixed(2)
return ‘0’
}
4）转换风字体颜色
const colorData = ref([
{
stops: [
{ value: 0.2, stop: [176, 224, 248, 1] },
{ value: 2.6, stop: [144, 208, 248, 1] },
{ value: 3.4, stop: [120, 184, 248, 1] },
{ value: 5.5, stop: [80, 160, 240, 1] },
{ value: 8, stop: [60, 120, 220, 1] },
{ value: 10.8, stop: [40, 100, 200, 1] },
{ value: 13.9, stop: [0, 176, 8, 1] },
{ value: 17.2, stop: [248, 248, 0, 1] },
{ value: 20.8, stop: [248, 168, 0, 1] },
{ value: 24.5, stop: [248, 80, 0, 1] },
{ value: 28.5, stop: [248, 0, 0, 1] },
{ value: 32.7, stop: [248, 24, 80, 1] },
{ value: 37, stop: [240, 48, 152, 1] },
{ value: 46.2, stop: [232, 80, 232, 1] },
{ value: 51, stop: [224, 72, 72, 1] },
{ value: 56.1, stop: [200, 56, 56, 1] },
{ value: 61.3, stop: [160, 24, 32, 1] }
],
fieldName: ‘wind’
}
])
// 风字体颜色
const getColor = (e, speed) => {
let n = e[e.length - 1]
const i = e.find(e => {
if (speed <= e.value) return (n = e), n
})
return i && (n = i), n
}
欢迎补充，一起进步。