BarChart.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <!--
  2. * @Author: your name
  3. * @Date: 2024-09-11 14:30:17
  4. * @LastEditTime: 2025-03-21 14:20:42
  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: String,
  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: "#588CF0", // 默认颜色
  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 && 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. hovertemplate:
  121. `${this.chartData.xaixs}:` +
  122. ` %{x} <br> ` +
  123. `${this.chartData.yaixs}:` +
  124. "%{y} <br>",
  125. };
  126. const layout = {
  127. title: {
  128. text: chartDataset.title,
  129. font: {
  130. size: 16, // 设置标题字体大小(默认 16)
  131. weight: "bold",
  132. },
  133. }, // 图表标题
  134. xaxis: {
  135. title: this.chartData.xaixs || "X轴", // 横坐标标题
  136. gridcolor: "rgb(255,255,255)",
  137. tickcolor: "rgb(255,255,255)",
  138. backgroundcolor: "#e5ecf6",
  139. },
  140. yaxis: {
  141. title: this.chartData.yaixs || "Y轴", // 纵坐标标题
  142. gridcolor: "rgb(255,255,255)",
  143. tickcolor: "rgb(255,255,255)",
  144. backgroundcolor: "#e5ecf6",
  145. title_standoff: 100, // 设置标题与轴的距离
  146. },
  147. margin: {
  148. l: 50,
  149. r: 50,
  150. t: 50,
  151. b: 50,
  152. },
  153. plot_bgcolor: "#e5ecf6",
  154. gridcolor: "#fff",
  155. bgcolor: "#e5ecf6", // 设置背景颜色
  156. autosize: true, // 开启自适应
  157. };
  158. // **如果 Y 轴是 "温度偏差",添加两条红色虚线**
  159. if (this.chartData.yaixs === "温度偏差") {
  160. layout.shapes = [
  161. {
  162. type: "line",
  163. xref: "paper", // x 轴相对于整个图
  164. yref: "y",
  165. x0: 0,
  166. x1: 1, // 从左到右整个图表
  167. y0: 5,
  168. y1: 5,
  169. line: {
  170. color: "red",
  171. width: 2,
  172. dash: "dash", // 虚线
  173. },
  174. // ✅ 添加 hoverlabel
  175. hovertext: "上限: 5°C",
  176. hoverinfo: "text",
  177. },
  178. {
  179. type: "line",
  180. xref: "paper",
  181. yref: "y",
  182. x0: 0,
  183. x1: 1,
  184. y0: -5,
  185. y1: -5,
  186. line: {
  187. color: "red",
  188. width: 2,
  189. dash: "dash", // 虚线
  190. },
  191. hovertext: "下限: -5°C",
  192. hoverinfo: "text",
  193. },
  194. ];
  195. layout.hovermode = "x unified";
  196. }
  197. if (
  198. this.chartData.xaixs === "机组" ||
  199. this.chartData.xaixs === "机组名称"
  200. ) {
  201. layout.xaxis.tickvals = this.chartData.data[0].xData;
  202. layout.xaxis.ticktext = this.chartData.data[0].xData;
  203. }
  204. // 渲染图表
  205. Plotly.newPlot(
  206. `bar-chart-${this.inds}`,
  207. // [trace, normalRangeLine, normalRangeMaxLine],
  208. [trace],
  209. { ...layout, displaylogo: false },
  210. {
  211. responsive: true,
  212. modeBarButtonsToRemove: [
  213. // "pan2d", // 平移按钮
  214. "zoom2d", // 缩放按钮
  215. // "select2d", // 选择框
  216. // "lasso2d", // 套索选择
  217. // "resetScale2d", // 重置轴
  218. // // "zoomIn", // 放大
  219. // // "zoomOut", // 缩小
  220. // "home", // 重置
  221. // "toImage", // 导出为图片
  222. // "hoverClosestCartesian", // 悬浮信息
  223. // "zoomIn2d", // 缩放按钮(详细版本)
  224. // "zoomOut2d", // 缩放按钮(详细版本)
  225. // "autoScale2D",
  226. // "plotlylogo2D",
  227. // "Produced with Plotly.js(v2.35)", // 删除 Plotly logo
  228. ],
  229. // modeBarButtonsToAdd: [
  230. // {
  231. // name: "保存图片", // 直接写中文翻译
  232. // icon: Plotly.Icons["camera"],
  233. // click: function () {
  234. // console.log("选择框");
  235. // Plotly.downloadImage(gd, {
  236. // format: "png",
  237. // width: 800,
  238. // height: 600,
  239. // });
  240. // },
  241. // },
  242. // {
  243. // name: "选择框", // 直接写中文翻译
  244. // icon: Plotly.Icons["selectbox"],
  245. // click: function () {
  246. // console.log("选择框");
  247. // },
  248. // },
  249. // {
  250. // name: "套索选择", // 直接写中文翻译
  251. // icon: Plotly.Icons.lasso,
  252. // click: function () {
  253. // console.log("套索选择");
  254. // },
  255. // },
  256. // {
  257. // name: "放大", // 直接写中文翻译
  258. // icon: Plotly.Icons["zoom_plus"],
  259. // click: function () {
  260. // console.log("放大", Plotly.Icons);
  261. // },
  262. // },
  263. // {
  264. // name: "缩小", // 直接写中文翻译
  265. // icon: Plotly.Icons["zoom_minus"],
  266. // click: function () {
  267. // console.log("缩小", Plotly.Icons);
  268. // },
  269. // },
  270. // {
  271. // name: "缩放", // 直接写中文翻译
  272. // icon: Plotly.Icons["zoombox"],
  273. // click: function () {
  274. // console.log("缩放", Plotly.Icons);
  275. // },
  276. // },
  277. // {
  278. // name: "平移", // 直接写中文翻译
  279. // icon: Plotly.Icons.pan,
  280. // click: function () {
  281. // console.log("平移");
  282. // },
  283. // },
  284. // {
  285. // name: "还原", // 直接写中文翻译
  286. // icon: Plotly.Icons.home,
  287. // click: function () {
  288. // // 获取图表的 DOM 元素
  289. // var gd = document.getElementById(`bar-chart${this.inds}`);
  290. // Plotly.relayout(gd, {
  291. // "xaxis.range": null,
  292. // "yaxis.range": null,
  293. // });
  294. // },
  295. // },
  296. // ], // 这个必须是数组类型
  297. }
  298. ).then(function (gd) {
  299. // 获取工具栏按钮
  300. const toolbar = gd.querySelector(".modebar");
  301. const buttons = toolbar.querySelectorAll(".modebar-btn");
  302. // 定义一个映射对象,方便修改按钮提示
  303. const titleMap = {
  304. "Download plot as a png": "保存图片",
  305. Autoscale: "缩放",
  306. Pan: "平移",
  307. "Zoom out": "放大",
  308. "Zoom in": "缩小",
  309. "Box Select": "选择框操作",
  310. "Lasso Select": "套索选择操作",
  311. "Reset axes": "重置操作",
  312. };
  313. // 遍历所有按钮,修改它们的 title
  314. buttons.forEach(function (button) {
  315. const dataTitle = button.getAttribute("data-title");
  316. // 如果标题匹配,修改属性值
  317. if (titleMap[dataTitle]) {
  318. button.setAttribute("data-title", titleMap[dataTitle]);
  319. }
  320. });
  321. });
  322. },
  323. // 切换图表类型
  324. toggleChartType() {
  325. this.chartType = this.chartType === "bar" ? "scatter" : "bar";
  326. this.drawChart();
  327. },
  328. // 更新图表颜色
  329. updateChartColor() {
  330. this.drawChart();
  331. },
  332. },
  333. };
  334. </script>
  335. <style scoped>
  336. /* 样式可以根据需求自定义 */
  337. </style>