let data = [
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 1000.00,
"njd": 5.10,
"wd": 25.50,
"fs": 0.90,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250015,
"time": "2023-07-20 00",
"fxjd": 63
},
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 999.00,
"njd": 4.20,
"wd": 25.60,
"fs": 0.30,
"pjzyl": 90.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250016,
"time": "2023-07-20 01",
"fxjd": 46
},
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 999.00,
"njd": 4.00,
"wd": 25.70,
"fs": 0.40,
"pjzyl": 91.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250017,
"time": "2023-07-20 02",
"fxjd": 40
},
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 999.00,
"njd": 3.50,
"wd": 25.70,
"fs": 0.60,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250018,
"time": "2023-07-20 03",
"fxjd": 43
},
{
"tqzt": "阴",
"jsl": null,
"fj": 2,
"qy": 999.00,
"njd": 3.20,
"wd": 25.60,
"fs": 1.60,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250019,
"time": "2023-07-20 04",
"fxjd": 56
},
{
"tqzt": "阴",
"jsl": null,
"fj": 2,
"qy": 999.00,
"njd": 3.00,
"wd": 25.60,
"fs": 1.60,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东北风",
"id": 250020,
"time": "2023-07-20 05",
"fxjd": 34
},
{
"tqzt": "小雨",
"jsl": null,
"fj": 1,
"qy": 999.00,
"njd": 3.00,
"wd": 25.50,
"fs": 0.80,
"pjzyl": 90.00,
"jylhour": 0.10,
"sd": 97.00,
"fx": "东风",
"id": 250021,
"time": "2023-07-20 06",
"fxjd": 97
},
{
"tqzt": "小雨",
"jsl": null,
"fj": 1,
"qy": 1000.00,
"njd": 3.30,
"wd": 25.90,
"fs": 0.40,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 97.00,
"fx": "东南风",
"id": 250022,
"time": "2023-07-20 07",
"fxjd": 116
},
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 1000.00,
"njd": 4.80,
"wd": 26.60,
"fs": 1.00,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 94.00,
"fx": "西南风",
"id": 250023,
"time": "2023-07-20 08",
"fxjd": 226
},
{
"tqzt": "阴",
"jsl": null,
"fj": 1,
"qy": 1000.00,
"njd": 10.00,
"wd": 27.50,
"fs": 1.40,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 89.00,
"fx": "西南风",
"id": 250024,
"time": "2023-07-20 09",
"fxjd": 232
},
{
"tqzt": "阴",
"jsl": null,
"fj": 2,
"qy": 1001.00,
"njd": 10.60,
"wd": 27.90,
"fs": 2.00,
"pjzyl": 95.00,
"jylhour": 0.00,
"sd": 87.00,
"fx": "西风",
"id": 250025,
"time": "2023-07-20 10",
"fxjd": 248
},
{
"tqzt": "阴",
"jsl": null,
"fj": 2,
"qy": 1000.00,
"njd": 3.40,
"wd": 27.70,
"fs": 2.10,
"pjzyl": 95.00,
"jylhour": 0.20,
"sd": 90.00,
"fx": "西北风",
"id": 250026,
"time": "2023-07-20 11",
"fxjd": 330
},
{
"tqzt": "多云",
"jsl": null,
"fj": 1,
"qy": 1000.00,
"njd": 10.50,
"wd": 29.80,
"fs": 1.40,
"pjzyl": 89.00,
"jylhour": 0.00,
"sd": 79.00,
"fx": "北风",
"id": 250027,
"time": "2023-07-20 12",
"fxjd": 349
},
{
"tqzt": "多云",
"jsl": null,
"fj": 2,
"qy": 1000.00,
"njd": 19.60,
"wd": 29.60,
"fs": 2.60,
"pjzyl": 89.00,
"jylhour": 0.00,
"sd": 75.00,
"fx": "西北风",
"id": 250028,
"time": "2023-07-20 13",
"fxjd": 305
},
{
"tqzt": "多云",
"jsl": null,
"fj": 2,
"qy": 999.00,
"njd": 27.50,
"wd": 30.30,
"fs": 2.10,
"pjzyl": 76.00,
"jylhour": 0.00,
"sd": 75.00,
"fx": "西北风",
"id": 250029,
"time": "2023-07-20 14",
"fxjd": 334
},
{
"tqzt": "多云",
"jsl": null,
"fj": 2,
"qy": 999.00,
"njd": 18.50,
"wd": 30.90,
"fs": 2.10,
"pjzyl": 69.00,
"jylhour": 0.10,
"sd": 74.00,
"fx": "西风",
"id": 250030,
"time": "2023-07-20 15",
"fxjd": 268
}
]
let fsData = []
let time = []
let windDirection = []
data.forEach(item => {
fsData.push(item.fs)
time.push(item.time)
windDirection.push({
windDirection: 180 + Number(item.fxjd), //风向角度：南0，西：90：北：180，动：270
fx: item.fx,
fj: item.fj
})
})
const customData = windDirection.map(function (item, index) {
item['winddir'] = (-Math.PI / 180) * item.windDirection; //自定义图标旋转的弧度值
return [index, -0.2, item.winddir, item.windDirection, item.fj, item.fx];
//index,箭头所在位置(对应y轴),箭头方向，风向偏角，风级，风向
});
const arrowSize = 15; //
//写一个函数处理自定义图标的数据
const renderArrow = function (param, api) {
const point = api.coord([api.value(0), api.value(1)]); //这里表示自定义图标在坐标系里面的位置，包含y，x轴
//我这里使用path，svg图标，大家可以自由搭配，svg图标从阿里图标库里面下载的。
return {
type: 'path',
shape: {
pathData: 'M688.64 995.2H341.12a53.12 53.12 0 0 1-53.12-52.48V520.96H45.44a32 32 0 0 1-30.08-21.12 30.72 30.72 0 0 1 8.32-35.2L512 21.76a32 32 0 0 1 44.16 0l442.88 442.24a33.92 33.92 0 0 1 7.04 35.84 32 32 0 0 1-30.08 19.84h-215.68v402.56a71.68 71.68 0 0 1-71.68 72.96z m-336-64h336a7.04 7.04 0 0 0 7.04-7.04V488.32a32 32 0 0 1 32.64-32h172.16L535.04 90.88 128 456.32h192a32 32 0 0 1 32.64 32z',
x: -arrowSize / 2,
y: -arrowSize / 2,
width: arrowSize,
height: arrowSize
},
rotation: api.value(2),
position: point, //在图表里面的坐标
style: {
stroke: '#55aaff',
lineWidth: 1
}
};
};
let option = {
grid: {
show: true,
top: '20%',
bottom: '15%',
left: '6%',
right: '4%'
},
dataZoom: [{
type: 'inside',
startValue: 0, // 从头开始。
endValue: 10 // 一次性展示10个
}],
legend: { //系列标记
show: true,
top: '20px',
zlevel: 2,
right: '30px',
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
return [
params[1].axisValue,
'风速：' + params[0].data[4] + '级 ' + params[1].value + 'm/s ' + params[0].data[5],
].join('<br>');
}
},
xAxis: {
position: 'top',
type: "category",
name: "",
boundaryGap: true, //默认，坐标轴留白策略
axisLine: {
show: false
},
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: '#58b1e7',
type: 'dashed',
}
},
axisTick: {
show: false,
alignWithLabel: true
},
data: time
},
yAxis: {
axisLine: {
show: false
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(33,148,246,0.2)'
}
},
min: 0,
axisTick: {
show: false
},
},
series: [{
name: '',
type: 'custom',
renderItem: renderArrow,
data: customData,
z: 10
},
{
name: '风速',
type: 'bar',
symbol: 'circle',
barWidth: 15,
data: fsData,
}
]
};