1. 风向十六方位的基础知识在气象学中风向是指风的来向通常用十六个方位来表示。这种表示方法源自航海时代至今仍是气象观测的标准。十六方位将360度圆周等分为16个22.5度的扇形区域每个区域用一个特定的缩写表示。十六方位的英文缩写和对应的角度范围如下北N348.75°-11.25°北东北NNE11.25°-33.75°东北NE33.75°-56.25°东东北ENE56.25°-78.75°东E78.75°-101.25°东东南ESE101.25°-123.75°东南SE123.75°-146.25°南东南SSE146.25°-168.75°南S168.75°-191.25°南西南SSW191.25°-213.75°西南SW213.75°-236.25°西西南WSW236.25°-258.75°西W258.75°-281.25°西西北WNW281.25°-303.75°西北NW303.75°-326.25°北西北NNW326.25°-348.75°理解这些方位定义是进行风向可视化的基础。在实际应用中我们经常需要将具体的角度值转换为对应的方位缩写或者反过来将方位缩写转换为具体的角度范围。2. ECharts基础配置ECharts是一个强大的JavaScript可视化库特别适合用来展示气象数据。在开始绘制风向图之前我们需要先配置一个基础的ECharts实例。首先创建一个简单的HTML容器div idwindChart stylewidth: 800px;height:400px;/div然后初始化ECharts实例// 初始化图表 let chartDom document.getElementById(windChart); let myChart echarts.init(chartDom); // 基础配置 let option { backgroundColor: rgba(48, 65, 90, 1), grid: { top: 40, bottom: 80 }, tooltip: { trigger: axis }, xAxis: { type: time, splitLine: { lineStyle: { color: #ddd } }, axisLine: { lineStyle: { color: #ffffff } } }, yAxis: { name: 风速(m/s), splitLine: { lineStyle: { color: #ddd } }, axisLine: { lineStyle: { color: #ffffff } } } }; myChart.setOption(option);这个基础配置包含了图表的基本元素背景色、网格、坐标轴和提示框。xAxis设置为时间类型适合展示时间序列数据yAxis用于显示风速值。3. 自定义风向箭头绘制ECharts的custom系列允许我们自定义图形元素。对于风向箭头我们需要根据风向角度动态旋转箭头图标。首先定义箭头的大小和形状let arrowSize 12; let arrowPath M31 16l-15-15v9h-26v12h26v9z; // 箭头SVG路径然后创建custom系列来绘制风向箭头series: [{ type: custom, name: 风向(°), renderItem: function (param, api) { var point api.coord([api.value(0), api.value(1)]); return { type: path, shape: { pathData: arrowPath, x: -arrowSize / 2, y: -arrowSize / 2, width: arrowSize, height: arrowSize }, rotation: -((Math.PI / 2) (api.value(2) * Math.PI / 180)), position: point, style: api.style({ stroke: #555, lineWidth: 1 }) }; }, encode: { x: 0, y: 1 }, itemStyle: { color: #F4E9A3 }, data: windDirectionData }]这里有几个关键点需要注意rotation属性控制箭头的旋转角度。由于SVG箭头的默认方向是向右我们需要先旋转90度Math.PI/2使其向上再加上风向角度。风向角度需要从度数转换为弧度乘以Math.PI/180。api.coord方法将数据值转换为画布坐标。data数组中的每个元素应该包含时间、风速和风向角度三个值。4. 风速曲线与视觉映射为了完整展示气象数据我们还需要绘制风速曲线。同时可以通过视觉映射visualMap组件来根据风速大小改变箭头颜色。添加风速曲线系列series: [{ type: line, name: 风速(m/s), symbol: none, encode: { x: 0, y: 1 }, lineStyle: { color: #FFAA44 }, itemStyle: { color: #FFAA44 }, data: windSpeedData }]配置视觉映射组件visualMap: { show: false, type: piecewise, pieces: [ { lt: 11, color: #18BF12, label: 微风11节 }, { gte: 11, lt: 17, color: #f4e9a3, label: 中风11~17节 }, { gte: 17, color: #D33C3E, label: 大风17节 } ], dimension: 1 }视觉映射会根据风速值维度1自动改变箭头颜色。这样用户一眼就能看出哪些时段风速较大。5. 数据格式处理与工具提示实际项目中数据可能来自API接口格式可能不完全符合ECharts的要求。我们需要对数据进行适当的处理。假设原始数据格式如下let rawData [ [2023-11-27 01:00:00, 11.6, 东北], [2023-11-27 02:00:00, 11.6, 东北], // 更多数据... ];我们需要将方位文字转换为角度值function directionToDegree(direction) { const map { N: 0, NNE: 22.5, NE: 45, ENE: 67.5, E: 90, ESE: 112.5, SE: 135, SSE: 157.5, S: 180, SSW: 202.5, SW: 225, WSW: 247.5, W: 270, WNW: 292.5, NW: 315, NNW: 337.5 }; return map[direction] || 0; } let processedData rawData.map(item { return [new Date(item[0]), item[1], directionToDegree(item[2])]; });工具提示tooltip也需要定制以显示更友好的信息tooltip: { trigger: axis, formatter: function (params) { let time params[0].value[0]; let speed params[0].value[1] || 无数据; let degree params[0].value[2]; let direction 无数据; if (degree ! null) { let index Math.floor((degree 11.25) / 22.5) % 16; let directions [N, NNE, NE, ENE, E, ESE, SE, SSE, S, SSW, SW, WSW, W, WNW, NW, NNW]; direction directions[index] ( degree °); } return 时间: ${echarts.format.formatTime(yyyy-MM-dd hh:mm, time)}br 风速: ${speed} m/sbr 风向: ${direction} ; } }6. 响应式设计与性能优化在实际应用中图表需要适应不同尺寸的屏幕并且要处理可能的大量数据。实现响应式设计window.addEventListener(resize, function() { myChart.resize(); });对于大数据量的优化策略使用数据采样sampling减少数据点数量启用渐进渲染progressive rendering使用更轻量级的图形元素series: [{ // 风向箭头系列 progressive: 200, progressiveThreshold: 1000 }, { // 风速曲线系列 progressive: 200, progressiveThreshold: 1000 }]7. 完整实现与调试技巧将以上所有部分组合起来就得到了一个完整的风向风速可视化图表。在实际开发中可能会遇到一些常见问题箭头方向不正确检查角度转换公式是否正确确认SVG箭头的初始方向验证数据中的角度值范围性能问题减少同时显示的箭头数量简化SVG路径考虑使用精灵图sprite替代单个SVG视觉映射不生效确认dimension设置正确检查数据格式是否符合预期验证visualMap的pieces配置一个实用的调试技巧是先在少量数据上测试确认基本功能正常后再扩展到完整数据集。可以使用console.log输出中间计算结果验证角度转换等关键步骤是否正确。