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

}

欢迎补充，一起进步。