|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2025-07-24 10:33:42
|
|
|
- * @LastEditTime: 2025-07-24 16:56:39
|
|
|
+ * @LastEditTime: 2025-08-01 13:49:41
|
|
|
* @LastEditors: bogon
|
|
|
* @Description: In User Settings Edit
|
|
|
* @FilePath: /performance-test/src/views/performance/components/chartsCom/Time3DBarChart.vue
|
|
|
@@ -68,14 +68,14 @@ import { colorSchemes } from "@/views/overview/js/colors";
|
|
|
import { mapState } from "vuex";
|
|
|
export default {
|
|
|
props: {
|
|
|
- fileAddr: {
|
|
|
- default: "",
|
|
|
- type: String,
|
|
|
- },
|
|
|
index: {
|
|
|
default: "",
|
|
|
type: String,
|
|
|
},
|
|
|
+ chartData: {
|
|
|
+ default: () => {},
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
setUpImgData: {
|
|
|
default: () => [],
|
|
|
type: Array,
|
|
|
@@ -85,7 +85,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
color1: [], // 默认颜色
|
|
|
- chartData: {},
|
|
|
+ // chartData: {},
|
|
|
chartType: "scatter", // 当前图表类型（默认是散点图）
|
|
|
colorSchemes: [...colorSchemes],
|
|
|
pointSize: 1, // 默认点大小
|
|
|
@@ -115,65 +115,23 @@ export default {
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
+ chartData: {
|
|
|
+ handler(newType) {
|
|
|
+ console.log(newType, "newType");
|
|
|
+ this.renderChart();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
async mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.getData();
|
|
|
+ // this.getData();
|
|
|
this.color1 = this.colorSchemes[0].colors;
|
|
|
+ this.renderChart();
|
|
|
});
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- async getData() {
|
|
|
- if (this.fileAddr !== "") {
|
|
|
- try {
|
|
|
- this.loading = true;
|
|
|
- this.cancelToken = axios.CancelToken.source();
|
|
|
- const resultChartsData = await axios.get(this.fileAddr, {
|
|
|
- cancelToken: this.cancelToken.token,
|
|
|
- });
|
|
|
- if (typeof resultChartsData.data === "string") {
|
|
|
- let dataString = resultChartsData.data;
|
|
|
- dataString = dataString.trim(); // 去除前后空格
|
|
|
- dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 处理无效字符
|
|
|
- try {
|
|
|
- const parsedData = JSON.parse(dataString);
|
|
|
- this.chartData = parsedData;
|
|
|
- } catch (error) {
|
|
|
- console.error("JSON 解析失败:", error);
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.chartData = resultChartsData.data;
|
|
|
- // this.chartData = {
|
|
|
- // xaixs: "故障代码",
|
|
|
- // yaixs: "时间",
|
|
|
- // zaixs: "出现次数",
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // xData: ["A01", "A01", "A02", "A02", "A03", "A03"],
|
|
|
- // yData: [
|
|
|
- // "2024-01-01",
|
|
|
- // "2024-02-01",
|
|
|
- // "2024-03-01",
|
|
|
- // "2024-04-01",
|
|
|
- // "2024-05-01",
|
|
|
- // "2024-06-01",
|
|
|
- // ],
|
|
|
- // zData: [100, 120, 90, 150, 110, 130],
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // };
|
|
|
- }
|
|
|
- this.renderChart();
|
|
|
- this.isError = false;
|
|
|
- this.loading = false;
|
|
|
- } catch (error) {
|
|
|
- this.isError = true;
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 格式化日期为 YY-MM 格式
|
|
|
formatDate(dateString) {
|
|
|
const date = new Date(dateString);
|
|
|
const year = date.getFullYear(); // 获取年份后两位
|
|
|
@@ -181,83 +139,58 @@ export default {
|
|
|
return `${year}-${month}`;
|
|
|
},
|
|
|
renderChart() {
|
|
|
- // 提取 Y 轴数据中的月份，并去重
|
|
|
- const uniqueMonths = Array.from(
|
|
|
- new Set(
|
|
|
- this.chartData.data[0].yData.map((date) => this.formatDate(date))
|
|
|
- )
|
|
|
- );
|
|
|
+ const colorMap = {}; // 记录每个 fault_detail 分配的颜色
|
|
|
+ const colorPalette = [...colorSchemes[0].colors];
|
|
|
+
|
|
|
+ let colorIndex = 0;
|
|
|
+ const traces = [];
|
|
|
+
|
|
|
if (!this.color1) {
|
|
|
this.color1 = colorSchemes[0].colors;
|
|
|
}
|
|
|
- // 设置每个月份对应的颜色
|
|
|
- const monthColors = this.color1;
|
|
|
- // 为每个月份生成独立的 trace，每个 trace 对应一个月份
|
|
|
- const barTraces = [];
|
|
|
- const borderTraces = [];
|
|
|
|
|
|
- uniqueMonths.forEach((month, monthIndex) => {
|
|
|
- const monthData = this.chartData.data[0].yData
|
|
|
- .map((date, index) => (this.formatDate(date) === month ? index : -1))
|
|
|
- .filter((index) => index !== -1);
|
|
|
+ this.chartData.data.forEach((item) => {
|
|
|
+ const fault = item.fault_detail;
|
|
|
+ const yVal = item.fault_time_sum;
|
|
|
+ const zVal = item.count;
|
|
|
|
|
|
- const x = [],
|
|
|
- y = [],
|
|
|
- z = [];
|
|
|
- const bx = [],
|
|
|
- by = [],
|
|
|
- bz = [];
|
|
|
-
|
|
|
- monthData.forEach((index) => {
|
|
|
- const xVal = this.chartData.data[0].xData[index];
|
|
|
- const yVal = this.chartData.data[0].yData[index];
|
|
|
- const zVal = this.chartData.data[0].zData[index];
|
|
|
-
|
|
|
- // 数据柱体
|
|
|
- x.push(xVal, xVal, null);
|
|
|
- y.push(yVal, yVal, null);
|
|
|
- z.push(0, zVal, null);
|
|
|
- });
|
|
|
+ // 分配唯一颜色
|
|
|
+ if (!colorMap[fault]) {
|
|
|
+ colorMap[fault] = colorPalette[colorIndex % colorPalette.length];
|
|
|
+ colorIndex++;
|
|
|
+ }
|
|
|
|
|
|
- // 柱体 trace
|
|
|
- barTraces.push({
|
|
|
+ const trace = {
|
|
|
type: "scatter3d",
|
|
|
mode: "lines",
|
|
|
- x,
|
|
|
- y,
|
|
|
- z,
|
|
|
+ x: [fault, fault, null],
|
|
|
+ y: [yVal, yVal, null],
|
|
|
+ z: [0, zVal, null],
|
|
|
line: {
|
|
|
- color: monthColors[monthIndex],
|
|
|
+ color: colorMap[fault],
|
|
|
width: 16,
|
|
|
},
|
|
|
- name: month,
|
|
|
- legendgroup: `month-${monthIndex}`,
|
|
|
+ name: fault,
|
|
|
hovertemplate:
|
|
|
- `${this.chartData.xaixs}: %{x}<br>` +
|
|
|
- `${this.chartData.yaixs}: %{y}<br>` +
|
|
|
- `${this.chartData.zaixs}: %{z}<extra></extra>`,
|
|
|
- });
|
|
|
- });
|
|
|
+ `故障代码: %{x}<br>` +
|
|
|
+ `累计时间: %{y}<br>` +
|
|
|
+ `出现次数: %{z}<extra></extra>`,
|
|
|
+ showlegend: true,
|
|
|
+ };
|
|
|
|
|
|
- // 合并 trace 并绘图
|
|
|
- const traces = [...borderTraces, ...barTraces]; // 边框放前面绘制
|
|
|
+ traces.push(trace);
|
|
|
+ });
|
|
|
|
|
|
const layout = {
|
|
|
title: {
|
|
|
- text: this.chartData.data[0].title,
|
|
|
- font: {
|
|
|
- size: 16,
|
|
|
- weight: "bold",
|
|
|
- },
|
|
|
+ text: "故障代码出现次数",
|
|
|
+ font: { size: 16, weight: "bold" },
|
|
|
},
|
|
|
scene: {
|
|
|
xaxis: {
|
|
|
- showgrid: true, // 显示网格
|
|
|
- zeroline: false, // 不显示零线
|
|
|
- title: {
|
|
|
- text: this.chartData.xaixs,
|
|
|
- standoff: 100,
|
|
|
- },
|
|
|
+ title: { text: "故障代码", standoff: 100 },
|
|
|
+ showgrid: true,
|
|
|
+ zeroline: false,
|
|
|
gridcolor: "#fff",
|
|
|
backgroundcolor: "#e0e7f1",
|
|
|
showbackground: true,
|
|
|
@@ -265,56 +198,33 @@ export default {
|
|
|
ticks: "outside",
|
|
|
ticklen: 10,
|
|
|
tickcolor: "black",
|
|
|
- zeroline: false,
|
|
|
- tickangle: -10,
|
|
|
- dtick: this.chartData.xaixs === "风速（m/s）" ? 1 : undefined,
|
|
|
+ // tickangle: -10,
|
|
|
},
|
|
|
- // 对 Y 轴不显示默认标题，只保留 tick 标签，并适当加大 standoff 以防止标签挤在一起
|
|
|
yaxis: {
|
|
|
- title: {
|
|
|
- text: this.chartData.yaixs, // 隐藏默认标题
|
|
|
- },
|
|
|
- showgrid: true, // 显示网格
|
|
|
- zeroline: false, // 不显示零线
|
|
|
- type: "category", // 让 Y 轴按类别均匀分布
|
|
|
- categoryorder: "category ascending", // 按类别字母顺序排列
|
|
|
- type: "date",
|
|
|
- tickformat: "%Y-%m",
|
|
|
- // dtick: "M3",//显式设置每3个月一个刻度
|
|
|
+ title: { text: "累计时间" },
|
|
|
+ showgrid: true,
|
|
|
+ zeroline: false,
|
|
|
gridcolor: "#fff",
|
|
|
- tickcolor: "#e5ecf6",
|
|
|
backgroundcolor: "#e0e7f1",
|
|
|
showbackground: true,
|
|
|
linecolor: "black",
|
|
|
ticks: "outside",
|
|
|
- tickcolor: "black",
|
|
|
- zeroline: false,
|
|
|
tickangle: 25,
|
|
|
- nticks: 3,
|
|
|
},
|
|
|
zaxis: {
|
|
|
- title: {
|
|
|
- text: this.chartData.zaixs,
|
|
|
- },
|
|
|
+ title: { text: "出现次数" },
|
|
|
+ showgrid: true,
|
|
|
+ zeroline: false,
|
|
|
gridcolor: "#fff",
|
|
|
- tickcolor: "#fff",
|
|
|
backgroundcolor: "#e0e7f1",
|
|
|
showbackground: true,
|
|
|
linecolor: "black",
|
|
|
ticks: "outside",
|
|
|
- tickcolor: "black",
|
|
|
- zeroline: false,
|
|
|
tickangle: -90,
|
|
|
- nticks: 3,
|
|
|
},
|
|
|
bgcolor: "#e5ecf6",
|
|
|
- aspectratio: {
|
|
|
- x: 2.2,
|
|
|
- y: 1.7,
|
|
|
- z: 1,
|
|
|
- },
|
|
|
+ aspectratio: { x: 2.2, y: 1.7, z: 1 },
|
|
|
aspectmode: "manual",
|
|
|
- gridcolor: "#fff",
|
|
|
camera: {
|
|
|
up: {
|
|
|
x: 0.200292643688136,
|
|
|
@@ -340,20 +250,21 @@ export default {
|
|
|
staticPlot: false,
|
|
|
showlegend: true,
|
|
|
legend: {
|
|
|
- itemsizing: "constant", // ✅ 统一图例 marker 大小
|
|
|
+ x: 1.02,
|
|
|
+ y: 1,
|
|
|
+ marker: { size: 10 },
|
|
|
font: {
|
|
|
- size: 12,
|
|
|
- },
|
|
|
- marker: {
|
|
|
size: 10,
|
|
|
},
|
|
|
+ itemsizing: "constant",
|
|
|
+ itemwidth: 2, // 设置图例项的宽度
|
|
|
},
|
|
|
};
|
|
|
|
|
|
const config = {
|
|
|
modeBarButtonsToAdd: [
|
|
|
{
|
|
|
- name: "还原", // 自定义按钮
|
|
|
+ name: "还原",
|
|
|
icon: Plotly.Icons.home,
|
|
|
click: () => this.resetCamera(),
|
|
|
},
|
|
|
@@ -363,46 +274,52 @@ export default {
|
|
|
"resetCameraLastSave3d",
|
|
|
"resetCameraDefault3d",
|
|
|
"resetCameraLastSave",
|
|
|
- "sendDataToCloud",
|
|
|
- "zoom2d", // 缩放按钮
|
|
|
+ "zoom2d",
|
|
|
"zoom3d",
|
|
|
"plotlylogo2D",
|
|
|
"plotlylogo3D",
|
|
|
],
|
|
|
responsive: true,
|
|
|
- displaylogo: false, // 可选：隐藏 Plotly logo
|
|
|
+ displaylogo: false,
|
|
|
};
|
|
|
- // 获取x轴和y轴的设置
|
|
|
+
|
|
|
+ // 设置轴范围和间距（如果配置了）
|
|
|
const getChartSetUp = (axisTitle) => {
|
|
|
return this.setUpImgData.find((item) => item.text.includes(axisTitle));
|
|
|
};
|
|
|
- // 更新x轴和y轴的范围与步长
|
|
|
- const xChartSetUp = getChartSetUp(layout.scene.xaxis.title);
|
|
|
- if (xChartSetUp) {
|
|
|
- layout.scene.xaxis.dtick = xChartSetUp.dtick;
|
|
|
- layout.scene.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
|
|
|
+
|
|
|
+ const xSetup = getChartSetUp(layout.scene.xaxis.title.text);
|
|
|
+ if (xSetup) {
|
|
|
+ layout.scene.xaxis.dtick = xSetup.dtick;
|
|
|
+ layout.scene.xaxis.range = [xSetup.min, xSetup.max];
|
|
|
}
|
|
|
- const yChartSetUp = getChartSetUp(layout.scene.yaxis.title);
|
|
|
- if (yChartSetUp) {
|
|
|
- layout.scene.yaxis.dtick = yChartSetUp.dtick;
|
|
|
- layout.scene.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
|
|
|
+
|
|
|
+ const ySetup = getChartSetUp(layout.scene.yaxis.title.text);
|
|
|
+ if (ySetup) {
|
|
|
+ layout.scene.yaxis.dtick = ySetup.dtick;
|
|
|
+ layout.scene.yaxis.range = [ySetup.min, ySetup.max];
|
|
|
}
|
|
|
- const zChartSetUp = getChartSetUp(layout.scene.zaxis.title);
|
|
|
- if (zChartSetUp) {
|
|
|
- layout.scene.zaxis.dtick = zChartSetUp.dtick;
|
|
|
- layout.scene.zaxis.range = [zChartSetUp.min, zChartSetUp.max];
|
|
|
+
|
|
|
+ const zSetup = getChartSetUp(layout.scene.zaxis.title.text);
|
|
|
+ if (zSetup) {
|
|
|
+ layout.scene.zaxis.dtick = zSetup.dtick;
|
|
|
+ layout.scene.zaxis.range = [zSetup.min, zSetup.max];
|
|
|
}
|
|
|
+
|
|
|
Plotly.newPlot(
|
|
|
- `plotly-3d-chart-` + this.index,
|
|
|
+ `plotly-3d-chart-${this.index}`,
|
|
|
traces,
|
|
|
layout,
|
|
|
config
|
|
|
- ).then(function (gd) {
|
|
|
- // 获取工具栏按钮
|
|
|
+ ).then((gd) => {
|
|
|
const toolbar = gd.querySelector(".modebar");
|
|
|
const buttons = toolbar.querySelectorAll(".modebar-btn");
|
|
|
+ const legends = document.querySelectorAll(".legendtext");
|
|
|
|
|
|
- // 定义一个映射对象，方便修改按钮提示
|
|
|
+ legends.forEach((el) => {
|
|
|
+ const fullText = el.textContent;
|
|
|
+ el.setAttribute("data-fulltext", fullText);
|
|
|
+ });
|
|
|
const titleMap = {
|
|
|
"Download plot as a png": "保存图片",
|
|
|
Autoscale: "缩放",
|
|
|
@@ -417,21 +334,18 @@ export default {
|
|
|
"Orbital rotation": "轨道式旋转",
|
|
|
};
|
|
|
|
|
|
- // 遍历所有按钮，修改它们的 title
|
|
|
- buttons.forEach(function (button) {
|
|
|
- const dataTitle = button.getAttribute("data-title");
|
|
|
- // 如果标题匹配，修改属性值
|
|
|
+ buttons.forEach((btn) => {
|
|
|
+ const dataTitle = btn.getAttribute("data-title");
|
|
|
if (titleMap[dataTitle]) {
|
|
|
- button.setAttribute("data-title", titleMap[dataTitle]);
|
|
|
+ btn.setAttribute("data-title", titleMap[dataTitle]);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
- // 监听图表的 relayout 事件，获取并输出相机视角
|
|
|
+
|
|
|
const plotElement = document.getElementById(
|
|
|
- `plotly-3d-chart-` + this.index
|
|
|
+ `plotly-3d-chart-${this.index}`
|
|
|
);
|
|
|
- plotElement.on("plotly_relayout", function (eventData) {
|
|
|
- // 在每次布局变更时，打印当前相机视角
|
|
|
+ plotElement.on("plotly_relayout", (eventData) => {
|
|
|
if (eventData["scene.camera"]) {
|
|
|
console.log(
|
|
|
"当前相机视角:",
|
|
|
@@ -441,7 +355,6 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- // 还原视角
|
|
|
resetCamera() {
|
|
|
Plotly.relayout(`plotly-3d-chart-` + this.index, {
|
|
|
"scene.camera": {
|
|
|
@@ -501,4 +414,32 @@ export default {
|
|
|
::v-deep canvas {
|
|
|
/* height: 400px !important; */
|
|
|
}
|
|
|
+/* 放在你页面的样式中 */
|
|
|
+.legendtext {
|
|
|
+ max-width: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: top;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.legendtext:hover::after {
|
|
|
+ content: attr(data-fulltext);
|
|
|
+ position: absolute;
|
|
|
+ left: 100%;
|
|
|
+ top: 0;
|
|
|
+ transform: translateX(6px);
|
|
|
+ max-width: 300px;
|
|
|
+ background: rgba(0, 0, 0, 0.85);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 6px;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 9999;
|
|
|
+ white-space: normal;
|
|
|
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
</style>
|
liujiejie