|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2024-09-11 14:36:31
|
|
|
- * @LastEditTime: 2025-01-16 16:50:04
|
|
|
+ * @LastEditTime: 2025-01-16 17:25:59
|
|
|
* @LastEditors: bogon
|
|
|
* @Description: In User Settings Edit
|
|
|
* @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxMarkersCharts.vue
|
|
|
@@ -14,115 +14,103 @@
|
|
|
<!-- <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script>
|
|
|
-import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
|
|
|
-import Plotly from "plotly.js-dist";
|
|
|
-export default {
|
|
|
- props: {},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initcharts();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initcharts() {
|
|
|
- const lineDatas = allTypesDatas.filter(
|
|
|
- (item) => item.analysisTypeCode === "temperature_large_components"
|
|
|
- )[0];
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped></style> -->
|
|
|
+ -->
|
|
|
<template>
|
|
|
- <div ref="chart" style="width: 100%; height: 400px"></div>
|
|
|
+ <div>
|
|
|
+ <div ref="plotlyChart" style="width: 100%; height: 600px"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Plotly from "plotly.js-dist";
|
|
|
+import Plotly from "plotly.js-dist-min";
|
|
|
|
|
|
export default {
|
|
|
- name: "BoxPlotChart",
|
|
|
+ name: "BoxPlotWithMedians",
|
|
|
props: {
|
|
|
- chartData: {
|
|
|
- type: Object,
|
|
|
- required: true,
|
|
|
+ fileAddr: {
|
|
|
+ default: "",
|
|
|
+ type: String,
|
|
|
},
|
|
|
- },
|
|
|
- watch: {
|
|
|
- chartData: {
|
|
|
- deep: true,
|
|
|
- // immediate: true,
|
|
|
- handler(newData) {
|
|
|
- if (newData) {
|
|
|
- this.drawChart(newData);
|
|
|
- }
|
|
|
- },
|
|
|
+ index: {
|
|
|
+ type: Number,
|
|
|
},
|
|
|
},
|
|
|
- created() {
|
|
|
- // this.drawChart(this.chartData);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chartData: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
- drawChart(data) {
|
|
|
+ async getData() {
|
|
|
+ if (this.fileAddr !== "") {
|
|
|
+ try {
|
|
|
+ const resultChartsData = await axios.get(this.fileAddr);
|
|
|
+ this.chartData = resultChartsData.data;
|
|
|
+ this.drawBoxPlot();
|
|
|
+ this.$emit("getResult", { index: this.index, result: "success" });
|
|
|
+ } catch (error) {
|
|
|
+ this.$emit("getResult", { index: this.index, result: "error" });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawBoxPlot() {
|
|
|
+ const chartContainer = this.$refs.plotlyChart;
|
|
|
+ const { data, xaixs, yaixs, analysisTypeCode } = this.chartData;
|
|
|
+
|
|
|
const traces = [];
|
|
|
+ const medianMarkers = [];
|
|
|
|
|
|
- // Box plot trace
|
|
|
- data.data.forEach((engine) => {
|
|
|
+ // 处理每组数据
|
|
|
+ data.forEach((group) => {
|
|
|
+ // 添加箱线图
|
|
|
traces.push({
|
|
|
- x: engine.xData,
|
|
|
- y: engine.yData,
|
|
|
+ x: group.xData,
|
|
|
+ y: group.yData,
|
|
|
type: "box",
|
|
|
- name: engine.title,
|
|
|
+ name: group.title,
|
|
|
marker: {
|
|
|
- color: engine.color || "lightgray",
|
|
|
- },
|
|
|
- line: {
|
|
|
- width: engine.width || 2,
|
|
|
+ color: group.color,
|
|
|
},
|
|
|
+ boxmean: true, // 显示均值
|
|
|
});
|
|
|
|
|
|
- // Median points trace
|
|
|
- traces.push({
|
|
|
- x: engine.medians.x,
|
|
|
- y: engine.medians.y,
|
|
|
- mode: engine.medians.mode || "markers",
|
|
|
- marker: {
|
|
|
- color: engine.medians.color || "orange",
|
|
|
- size: engine.medians.size || 5,
|
|
|
- },
|
|
|
- name: `${engine.title} 中位点`,
|
|
|
- });
|
|
|
+ // 添加中位点
|
|
|
+ if (group.medians) {
|
|
|
+ medianMarkers.push({
|
|
|
+ x: group.medians.x,
|
|
|
+ y: group.medians.y,
|
|
|
+ mode: group.medians.mode,
|
|
|
+ marker: {
|
|
|
+ color: group.medians.color,
|
|
|
+ size: group.medians.size,
|
|
|
+ },
|
|
|
+ name: `${group.title} - 中位点`,
|
|
|
+ type: "scatter",
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const layout = {
|
|
|
- title: data.analysisTypeCode || "箱线图",
|
|
|
+ title: analysisTypeCode + data[0].engineName,
|
|
|
xaxis: {
|
|
|
- title: data.xaixs || "X轴",
|
|
|
+ title: xaixs,
|
|
|
},
|
|
|
yaxis: {
|
|
|
- title: data.yaixs || "Y轴",
|
|
|
+ title: yaixs,
|
|
|
},
|
|
|
showlegend: true,
|
|
|
- margin: {
|
|
|
- l: 50,
|
|
|
- r: 50,
|
|
|
- t: 50,
|
|
|
- b: 50,
|
|
|
- },
|
|
|
};
|
|
|
|
|
|
- Plotly.newPlot(this.$refs.chart, traces, layout, { responsive: true });
|
|
|
+ // 绘制图表
|
|
|
+ Plotly.newPlot(chartContainer, [...traces, ...medianMarkers], layout);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 确保图表容器的大小适应 */
|
|
|
-div {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+/* 可根据需要自定义样式 */
|
|
|
</style>
|
liujiejie