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

}

欢迎补充,一起进步。

相关推荐
小蜗牛慢慢爬行19 分钟前
如何在 Spring Boot 微服务中设置和管理多个数据库
java·数据库·spring boot·后端·微服务·架构·hibernate
hanbarger23 分钟前
nosql,Redis,minio,elasticsearch
数据库·redis·nosql
微服务 spring cloud44 分钟前
配置PostgreSQL用于集成测试的步骤
数据库·postgresql·集成测试
先睡1 小时前
MySQL的架构设计和设计模式
数据库·mysql·设计模式
弗罗里达老大爷1 小时前
Redis
数据库·redis·缓存
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel