WindRoseChart.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import { renderChart } from "../chartService/index.js"; // 用你的统一渲染服务
  2. import { colorSchemes } from "../colors.js";
  3. export const getWindRoseChart = async (
  4. data,
  5. bucketName,
  6. objectName,
  7. analysisTypeCode,
  8. ) => {
  9. try {
  10. const windRoseList = data.data;
  11. // ===== 数据处理 =====
  12. const windDirections = Array.from({ length: 16 }, (_, i) => i * 22.5);
  13. const windSpeedRanges = new Set();
  14. const counts = {};
  15. windRoseList.forEach((engine) => {
  16. engine.windRoseData.forEach((item) => {
  17. windSpeedRanges.add(item.windSpeedRange);
  18. });
  19. });
  20. const speedLabels = Array.from(windSpeedRanges).sort();
  21. const colors = colorSchemes[0].colors;
  22. const colorscale = {};
  23. speedLabels.forEach((label, index) => {
  24. colorscale[label] = colors[(index % colors.length) + 4];
  25. counts[label] = Array(windDirections.length).fill(0);
  26. });
  27. // ===== 数据聚合 =====
  28. windRoseList.forEach((engine) => {
  29. engine.windRoseData.forEach((item) => {
  30. const { windDirection, windSpeedRange } = item;
  31. const index = windDirections.findIndex(
  32. (dir, i) =>
  33. windDirection >= dir &&
  34. windDirection < (windDirections[i + 1] ?? 360),
  35. );
  36. if (index !== -1) {
  37. counts[windSpeedRange][index] += item.frequency;
  38. }
  39. });
  40. });
  41. // ===== traces =====
  42. const traces = speedLabels.map((speedLabel) => ({
  43. r: counts[speedLabel],
  44. theta: windDirections,
  45. name: speedLabel,
  46. type: "barpolar",
  47. marker: {
  48. color: colorscale[speedLabel],
  49. line: {
  50. color: "white",
  51. width: 1,
  52. },
  53. },
  54. hovertemplate: "频率: %{r}<br>风向: %{theta}<extra></extra>",
  55. }));
  56. // ===== layout =====
  57. const layout = {
  58. title: {
  59. text: `风向玫瑰图 - ${windRoseList[0]?.enginName || ""}`,
  60. font: { size: 16 },
  61. },
  62. plot_bgcolor: "#e5ecf6",
  63. polar: {
  64. bgcolor: "#e5ecf6",
  65. radialaxis: {
  66. title: {
  67. text: data?.axes?.radial || "频率百分比(%)",
  68. },
  69. gridcolor: "#fff",
  70. },
  71. angularaxis: {
  72. title: { text: "风向" },
  73. tickvals: windDirections,
  74. ticktext: windDirections,
  75. },
  76. },
  77. showlegend: true,
  78. legend: {
  79. title: { text: "风速范围" },
  80. },
  81. };
  82. // ===== 统一渲染(核心!)=====
  83. return await renderChart({
  84. traces,
  85. layout,
  86. bucketName,
  87. objectName,
  88. });
  89. } catch (error) {
  90. console.error("风玫瑰图生成失败:", error);
  91. throw error;
  92. }
  93. };