FaultUnit.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!--
  2. * @Author: your name
  3. * @Date: 2025-01-15 15:49:57
  4. * @LastEditTime: 2025-03-13 16:25:02
  5. * @LastEditors: bogon
  6. * @Description: In User Settings Edit
  7. * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultUntal.vue
  8. -->
  9. <template>
  10. <div>
  11. <div ref="chart" style="width: 100%; height: 400px"></div>
  12. </div>
  13. </template>
  14. <script>
  15. import Plotly from "plotly.js-dist";
  16. export default {
  17. name: "faultAll",
  18. props: {
  19. faultTypes: {
  20. type: Array,
  21. default: [],
  22. }, // 故障机组
  23. faultCounts: {
  24. type: Array,
  25. default: [],
  26. }, // 故障次数
  27. faultDurations: {
  28. type: Array,
  29. default: [],
  30. }, // 故障时长
  31. fenFaultCsvData: {
  32. type: Array,
  33. default: [],
  34. },
  35. },
  36. watch: {
  37. faultCounts: {
  38. deep: true,
  39. handler(v) {
  40. console.log(this.faultDurations, this.faultTypes);
  41. this.renderChart();
  42. },
  43. },
  44. },
  45. mounted() {
  46. this.renderChart();
  47. },
  48. methods: {
  49. renderChart() {
  50. // 故障次数的散点图数据(左侧 Y 轴)
  51. const scatterFaultCounts = {
  52. x: this.faultTypes.slice(0, 10),
  53. y: this.faultCounts.slice(0, 10),
  54. mode: "markers", // 散点图
  55. marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
  56. name: "故障次数",
  57. hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 分钟<br>",
  58. };
  59. // 故障时长的散点图数据(右侧 Y 轴)
  60. const scatterFaultDurations = {
  61. x: this.faultTypes.slice(0, 10),
  62. y: this.faultDurations.slice(0, 10),
  63. mode: "markers", // 散点图
  64. marker: { color: "#1A295D", size: 10 }, // 红色散点
  65. name: "故障时长",
  66. yaxis: "y2", // 使用第二个 Y 轴(右侧)
  67. hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
  68. };
  69. // 布局配置,设置双 Y 轴
  70. const layout = {
  71. title: "机组故障次数与时长分析Top10",
  72. xaxis: {
  73. title: "故障机组",
  74. tickangle: 30,
  75. tickmode: "array",
  76. tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
  77. ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
  78. tickfont: { size: 12 },
  79. gridcolor: "rgb(255,255,255)",
  80. tickcolor: "rgb(255,255,255)",
  81. backgroundcolor: "#e5ecf6",
  82. },
  83. yaxis: {
  84. title: "故障次数",
  85. titlefont: { color: "#64ADC2" },
  86. tickfont: { color: "#64ADC2" },
  87. side: "left", // 左侧的 Y 轴
  88. showline: true,
  89. linecolor: "#64ADC2",
  90. gridcolor: "rgb(255,255,255)",
  91. tickcolor: "rgb(255,255,255)",
  92. backgroundcolor: "#e5ecf6",
  93. },
  94. yaxis2: {
  95. title: "故障时长(秒)",
  96. titlefont: { color: "#1A295D" },
  97. tickfont: { color: "#1A295D" },
  98. overlaying: "y", // 在第一个 Y 轴上方绘制
  99. side: "right", // 右侧的 Y 轴
  100. position: 1, // 调整右侧轴的位置
  101. showline: true,
  102. // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
  103. // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
  104. linecolor: "#1A295D", // 设置右侧轴线颜色
  105. },
  106. plot_bgcolor: "#e5ecf6",
  107. gridcolor: "#fff",
  108. bgcolor: "#e5ecf6", // 设置背景颜色
  109. showlegend: false, // 显示图例
  110. margin: {
  111. t: 80, // 上边距
  112. b: 150, // 下边距,给 X 轴标签更多空间
  113. },
  114. };
  115. // 渲染图表
  116. Plotly.newPlot(
  117. this.$refs.chart,
  118. [scatterFaultCounts, scatterFaultDurations],
  119. layout
  120. );
  121. },
  122. },
  123. };
  124. </script>
  125. <style scoped>
  126. /* 你可以根据需要添加样式 */
  127. </style>