|
|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
<div style="width: 100%; height: 500px">
|
|
|
- <!-- 时间范围选择器 -->
|
|
|
+ <!-- 条件渲染日期范围选择器 -->
|
|
|
<el-date-picker
|
|
|
- v-model="dateRange"
|
|
|
- type="daterange"
|
|
|
- align="right"
|
|
|
- unlink-panels
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- @change="onDateRangeChange"
|
|
|
- style="margin: 20px 0 0 0"
|
|
|
- ></el-date-picker>
|
|
|
+ v-if="isDateType(chartData.data[0]?.xData)"
|
|
|
+ <!--
|
|
|
+ 只有xData是日期时才显示
|
|
|
+ --
|
|
|
+ >
|
|
|
+ v-model="dateRange" type="daterange" align="right" unlink-panels
|
|
|
+ range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期" @change="onDateRangeChange" size="mini"
|
|
|
+ style="margin: 20px 0 0 0" ></el-date-picker
|
|
|
+ >
|
|
|
|
|
|
<!-- boxLineCharts -->
|
|
|
<div
|
|
|
@@ -49,6 +49,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
+ console.log(this.fileAddr, "fileAddr 连接");
|
|
|
this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -85,23 +86,43 @@ export default {
|
|
|
return date >= new Date(startDate) && date <= new Date(endDate);
|
|
|
},
|
|
|
|
|
|
+ // 判断xData是否为日期格式
|
|
|
+ isDateType(xData) {
|
|
|
+ // 假设第一个元素如果是日期字符串或Date对象则为日期类型
|
|
|
+ const firstTimestamp = xData[0];
|
|
|
+ return !isNaN(Date.parse(firstTimestamp)); // 判断是否是有效日期
|
|
|
+ },
|
|
|
+
|
|
|
// 过滤数据
|
|
|
filterData(group) {
|
|
|
const filteredXData = [];
|
|
|
const filteredYData = [];
|
|
|
const filteredMedians = group.medians ? { x: [], y: [] } : null;
|
|
|
- group.medians.x.forEach((timestamp, index) => {
|
|
|
- if (this.isInDateRange(timestamp)) {
|
|
|
- filteredMedians.x.push(timestamp);
|
|
|
- filteredMedians.y.push(group.medians.y[index]);
|
|
|
- }
|
|
|
- });
|
|
|
- group.xData.forEach((timestamp, index) => {
|
|
|
- if (this.isInDateRange(timestamp)) {
|
|
|
- filteredXData.push(timestamp);
|
|
|
- filteredYData.push(group.yData[index]);
|
|
|
+
|
|
|
+ // 如果是日期类型数据，则进行日期过滤
|
|
|
+ if (this.isDateType(group.xData)) {
|
|
|
+ group.xData.forEach((timestamp, index) => {
|
|
|
+ if (this.isInDateRange(timestamp)) {
|
|
|
+ filteredXData.push(timestamp);
|
|
|
+ filteredYData.push(group.yData[index]);
|
|
|
+
|
|
|
+ // 处理中位值数据，确保索引一致
|
|
|
+ if (filteredMedians && this.isInDateRange(group.medians.x[index])) {
|
|
|
+ filteredMedians.x.push(group.medians.x[index]);
|
|
|
+ filteredMedians.y.push(group.medians.y[index]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 如果不是日期类型，直接将数据添加到数组
|
|
|
+ filteredXData.push(...group.xData);
|
|
|
+ filteredYData.push(...group.yData);
|
|
|
+
|
|
|
+ if (group.medians) {
|
|
|
+ filteredMedians.x.push(...group.medians.x);
|
|
|
+ filteredMedians.y.push(...group.medians.y);
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
|
|
|
return {
|
|
|
...group,
|
|
|
@@ -117,8 +138,9 @@ export default {
|
|
|
|
|
|
// 过滤数据
|
|
|
const filteredData = this.filterData(chartData);
|
|
|
-
|
|
|
// 构建箱线图
|
|
|
+ console.log(filteredData, "filteredData");
|
|
|
+
|
|
|
const trace = {
|
|
|
x: filteredData.xData,
|
|
|
y: filteredData.yData,
|
|
|
@@ -130,31 +152,48 @@ export default {
|
|
|
boxmean: false, // 不显示均值
|
|
|
name: filteredData.title,
|
|
|
};
|
|
|
- const trace2 = {
|
|
|
- x: filteredData.medians.x,
|
|
|
- y: filteredData.medians.y,
|
|
|
- mode: "markers",
|
|
|
- marker: {
|
|
|
- color: "#406DAB",
|
|
|
- size: 3,
|
|
|
- },
|
|
|
- name: `${filteredData.title} - 中位点`,
|
|
|
- type: "scatter",
|
|
|
- };
|
|
|
+
|
|
|
+ let trace2 = {}; // 初始化trace2为一个空对象
|
|
|
+
|
|
|
+ // 如果有中位值并且中位值的x轴数据不为空，则显示中位点
|
|
|
+ if (filteredData.medians && filteredData.medians.x.length > 0) {
|
|
|
+ trace2 = {
|
|
|
+ x: filteredData.medians.x,
|
|
|
+ y: filteredData.medians.y,
|
|
|
+ mode: "markers",
|
|
|
+ marker: {
|
|
|
+ color: "#406DAB",
|
|
|
+ size: 3,
|
|
|
+ },
|
|
|
+ name: `${filteredData.title} - 中位点`,
|
|
|
+ type: "scatter",
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(filteredData, "filteredData");
|
|
|
|
|
|
// 布局设置
|
|
|
const layout = {
|
|
|
title: filteredData.title,
|
|
|
xaxis: {
|
|
|
title: this.chartData.xaixs,
|
|
|
- type: "date", // 强制设置为日期类型
|
|
|
- tickformat: "%Y-%m-%d", // 这里也可以调整格式
|
|
|
+ // 如果xData不是日期格式，则不配置type: "date"
|
|
|
+ title: this.chartData.xaixs,
|
|
|
+ // tickvals: filteredData.xData, // 设置tickvals为原始的xData
|
|
|
+ // ticktext: filteredData.xData, // 设置ticktext为原始的xData（避免被转换成数字）
|
|
|
+ // tickformat: this.isDateType(filteredData.xData)
|
|
|
+ // ? "%Y-%m-%d"
|
|
|
+ // : undefined,
|
|
|
+ tickmode: "array", // 精确控制刻度
|
|
|
},
|
|
|
yaxis: { title: this.chartData.yaixs },
|
|
|
showlegend: true,
|
|
|
};
|
|
|
-
|
|
|
- Plotly.newPlot(`plotDivBox-${this.index}`, [trace, trace2], layout);
|
|
|
+ // 使用 v-if 防止重新渲染
|
|
|
+ if (this.chartData.data && this.chartData.data.length > 0) {
|
|
|
+ Plotly.newPlot(`plotDivBox-${this.index}`, [trace, trace2], layout);
|
|
|
+ }
|
|
|
+ // Plotly.newPlot(`plotDivBox-${this.index}`, [trace, trace2], layout);
|
|
|
},
|
|
|
},
|
|
|
};
|
liujiejie