BarChart.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!--
  2. * @Author: your name
  3. * @Date: 2024-09-11 14:30:17
  4. * @LastEditTime: 2025-01-20 09:16:32
  5. * @LastEditors: bogon
  6. * @Description: In User Settings Edit
  7. * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
  8. -->
  9. <template>
  10. <div>
  11. <!-- 图表控制面板 -->
  12. <div style="display: flex; align-items: center">
  13. <div style="margin-right: 20px; display: flex; align-items: center">
  14. <el-color-picker
  15. size="small"
  16. v-model="color1"
  17. show-alpha
  18. @change="updateChartColor"
  19. ></el-color-picker>
  20. <span style="margin-left: 10px">自定义颜色</span>
  21. </div>
  22. <div>
  23. <el-button size="small" @click="toggleChartType">
  24. 切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}
  25. </el-button>
  26. </div>
  27. </div>
  28. <!-- 图表容器 -->
  29. <div
  30. v-loading="loading"
  31. :id="`bar-chart${inds}`"
  32. style="width: 100%; height: 400px"
  33. >
  34. <el-empty v-if="isError" description="请求失败"></el-empty>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. import { nextTick } from "vue"; // 导入 nextTick
  40. import Plotly from "plotly.js-dist";
  41. import axios from "axios";
  42. import { myMixin } from "@/mixins/chartRequestMixin";
  43. export default {
  44. props: {
  45. fileAddr: {
  46. default: "",
  47. type: String,
  48. },
  49. inds: {
  50. type: Number,
  51. default() {
  52. return 0;
  53. },
  54. },
  55. },
  56. mixins: [myMixin],
  57. data() {
  58. return {
  59. chartData: {
  60. analysisTypeCode: "",
  61. engineCode: "",
  62. engineTypeName: "",
  63. xaixs: "",
  64. yaixs: "",
  65. data: [
  66. // {
  67. // xData: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
  68. // yData: [10, 20, 30, 40, 50],
  69. // title: "数据集1",
  70. // },
  71. ],
  72. },
  73. chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
  74. color1: "#406DAB", // 默认颜色
  75. // normalRangeMin: 5, // 最低范围
  76. // normalRangeMax: 18, // 最高范围
  77. };
  78. },
  79. mounted() {
  80. this.getData();
  81. },
  82. methods: {
  83. async getData() {
  84. if (this.fileAddr !== "") {
  85. try {
  86. this.loading = true;
  87. this.cancelToken = axios.CancelToken.source();
  88. const resultChartsData = await axios.get(this.fileAddr, {
  89. cancelToken: this.cancelToken.token,
  90. });
  91. this.chartData = resultChartsData.data;
  92. // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
  93. nextTick(() => {
  94. this.drawChart();
  95. this.isError = false;
  96. this.loading = false;
  97. });
  98. } catch (error) {
  99. console.error("Error loading data:", error);
  100. this.isError = true;
  101. this.loading = false;
  102. }
  103. }
  104. },
  105. // 绘制图表
  106. drawChart() {
  107. if (this.chartData.data.length === 0) return;
  108. const chartDataset = this.chartData.data[0];
  109. const trace = {
  110. x: chartDataset.xData, // 横坐标数据
  111. y: chartDataset.yData, // 纵坐标数据
  112. type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
  113. marker: {
  114. color: this.color1, // 柱状图颜色
  115. },
  116. line: {
  117. color: this.color1, // 折线图颜色
  118. },
  119. name: chartDataset.title || "数据", // 图例名称
  120. };
  121. // Normal Range Lines
  122. const normalRangeLine = {
  123. x: chartDataset.xData, // 横坐标数据
  124. y: Array(chartDataset.xData.length).fill(this.normalRangeMin), // 最低值线
  125. mode: "lines",
  126. name: "LCL", // 图例名称(最低范围)
  127. line: {
  128. color: "red",
  129. width: 2,
  130. dash: "dash", // 虚线
  131. },
  132. };
  133. const normalRangeMaxLine = {
  134. x: chartDataset.xData, // 横坐标数据
  135. y: Array(chartDataset.xData.length).fill(this.normalRangeMax), // 最高值线
  136. mode: "lines",
  137. name: "UCL", // 图例名称(最高范围)
  138. line: {
  139. color: "red",
  140. width: 2,
  141. dash: "dash", // 虚线
  142. },
  143. };
  144. const layout = {
  145. title: this.chartData.analysisTypeCode || "图表", // 图表标题
  146. xaxis: {
  147. title: this.chartData.xaixs || "X轴", // 横坐标标题
  148. },
  149. yaxis: {
  150. title: this.chartData.yaixs || "Y轴", // 纵坐标标题
  151. },
  152. margin: {
  153. l: 50,
  154. r: 50,
  155. t: 50,
  156. b: 50,
  157. },
  158. autosize: true, // 开启自适应
  159. };
  160. // 渲染图表
  161. Plotly.newPlot(
  162. `bar-chart${this.inds}`,
  163. // [trace, normalRangeLine, normalRangeMaxLine],
  164. [trace],
  165. layout,
  166. {
  167. responsive: true,
  168. }
  169. );
  170. },
  171. // 切换图表类型
  172. toggleChartType() {
  173. this.chartType = this.chartType === "bar" ? "scatter" : "bar";
  174. this.drawChart();
  175. },
  176. // 更新图表颜色
  177. updateChartColor() {
  178. this.drawChart();
  179. },
  180. },
  181. };
  182. </script>
  183. <style scoped>
  184. /* 样式可以根据需求自定义 */
  185. </style>