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

}

欢迎补充,一起进步。

相关推荐
likfishdn2 分钟前
SQL注入零基础学习二MYSQL手工注入
数据库·sql·学习
袁煦丞7 分钟前
云端跳跃:在NAS上用cpolar重现马里奥的童趣时光
前端·程序员·远程工作
the_one7 分钟前
《Canvas 炫酷动态粒子连线:从零打造流动星空特效》
前端·javascript·css
Databend17 分钟前
Databend 产品月报(2025年3月)
数据库
杀死一只知更鸟debug18 分钟前
vue2,vue3,vue3 + vite 动态加载图片的方式
前端·javascript·vue.js
剪刀石头布啊34 分钟前
浏览器进程与事件循环
前端·浏览器
剪刀石头布啊35 分钟前
浏览器渲染原理
前端·浏览器
日记成书1 小时前
【HTML 基础教程】HTML 表格
前端·html
木木黄木木1 小时前
HTML5贪吃蛇游戏开发经验分享
前端·html·html5
画个逗号给明天"1 小时前
C#从入门到精通(4)
数据库·c#