Radar.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div>
  3. <!-- Chart container -->
  4. <div ref="radarChart" style="width: 100%; height: 400px"></div>
  5. <!-- Button to trigger dynamic chart update -->
  6. </div>
  7. </template>
  8. <script>
  9. import Plotly from "plotly.js-dist-min";
  10. export default {
  11. props: {
  12. chartData: {
  13. type: Object,
  14. default: {},
  15. },
  16. },
  17. data() {
  18. return {
  19. // chartData: {
  20. // Qp: "87955465.05833334",
  21. // Thc: "2094.177739484127",
  22. // Rdr: "12",
  23. // Qdr: "-87955465.05833334",
  24. // fs: "12333",
  25. // },
  26. };
  27. },
  28. mounted() {
  29. if (this.chartData) {
  30. this.drawRadarChart();
  31. }
  32. },
  33. methods: {
  34. drawRadarChart() {
  35. console.log("this.chartData 雷达图设置", this.chartData);
  36. // 获取动态数据的 keys 和 values
  37. const keys = Object.keys(this.chartData);
  38. const values = Object.values(this.chartData).map((val) =>
  39. val === "" ? 0 : parseFloat(val)
  40. );
  41. // 构造 Plotly 雷达图数据
  42. const trace = {
  43. type: "scatterpolar",
  44. r: [
  45. this.chartData.TurbinePowerRate,
  46. this.chartData.TurbineRunRate,
  47. this.chartData.WindSpeedAvr,
  48. this.chartData.Thi,
  49. this.chartData.Ws,
  50. ],
  51. theta: [
  52. "风机能量利用率",
  53. "风机可利用率",
  54. "平均风速",
  55. "利用小时",
  56. "功率曲线一致性系数",
  57. ],
  58. // r: [...values, values[0]], // 闭合多边形,起点与终点一致
  59. // theta: [...keys, keys[0]], // 闭合多边形,起点与终点一致
  60. // fill: "toself", // 填充多边形区域
  61. name: "多边形雷达图",
  62. marker: {
  63. color: "#636efc",
  64. },
  65. line: {
  66. color: "#636efc", // 多边形边框颜色
  67. width: 2, // 边框宽度
  68. },
  69. };
  70. // 雷达图布局
  71. const layout = {
  72. polar: {
  73. radialaxis: {
  74. visible: true,
  75. range: [Math.min(...values) * 1.1, Math.max(...values) * 1.1], // 设置范围
  76. },
  77. angularaxis: {
  78. showline: false, // 隐藏 `angularaxis` 线
  79. showticklabels: true, // 隐藏角度标签
  80. ticks: "", // 隐藏刻度
  81. },
  82. },
  83. showlegend: false, // 隐藏图例
  84. title: "多边形雷达图",
  85. };
  86. // 渲染图表
  87. Plotly.react(this.$refs.radarChart, [trace], layout);
  88. },
  89. },
  90. };
  91. </script>