|
@@ -26,93 +26,9 @@ export default {
|
|
|
chartData: {},
|
|
|
initData: [
|
|
|
{
|
|
|
- z: [
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- [
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0, 5.0,
|
|
|
- ],
|
|
|
- ],
|
|
|
- x: [
|
|
|
- "#01",
|
|
|
- "#02",
|
|
|
- "#03",
|
|
|
- "#04",
|
|
|
- "#05",
|
|
|
- "#06",
|
|
|
- "#07",
|
|
|
- "#08",
|
|
|
- "#09",
|
|
|
- "#10",
|
|
|
- "#11",
|
|
|
- "#12",
|
|
|
- "#13",
|
|
|
- "#14",
|
|
|
- "#15",
|
|
|
- "#16",
|
|
|
- "#17",
|
|
|
- "#18",
|
|
|
- "#19",
|
|
|
- "#20",
|
|
|
- "#21",
|
|
|
- ],
|
|
|
- y: [
|
|
|
- "2023-01",
|
|
|
- "2023-02",
|
|
|
- "2023-03",
|
|
|
- "2023-04",
|
|
|
- "2023-05",
|
|
|
- "2023-06",
|
|
|
- "2023-07",
|
|
|
- "2023-08",
|
|
|
- "2023-09",
|
|
|
- "2023-10",
|
|
|
- "2023-11",
|
|
|
- "2023-12",
|
|
|
- ],
|
|
|
+ z: [],
|
|
|
+ x: [],
|
|
|
+ y: [],
|
|
|
type: "heatmap",
|
|
|
colorscale: "Viridis", //分钟scads
|
|
|
colorscale: [
|
|
@@ -130,7 +46,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getData();
|
|
|
+ // this.getData();
|
|
|
if (this.fileAddr) {
|
|
|
this.getData();
|
|
|
}
|
|
@@ -145,9 +61,11 @@ export default {
|
|
|
const resultChartsData = await axios.get(this.fileAddr, {
|
|
|
cancelToken: this.cancelToken.token,
|
|
|
});
|
|
|
+ console.log(resultChartsData.data, "resultChartsData");
|
|
|
this.chartData = resultChartsData.data;
|
|
|
- this.initData[0].y = resultChartsData.data[0].xData;
|
|
|
- this.initData[0].z = resultChartsData.data[0].yData;
|
|
|
+ this.initData[0].x = this.chartData.data[0].xData;
|
|
|
+ this.initData[0].y = this.chartData.data[0].yData;
|
|
|
+ this.initData[0].z = this.chartData.data[0].ZData;
|
|
|
// 使用 nextTick 来确保 DOM 渲染完成后绘制图表
|
|
|
nextTick(() => {
|
|
|
this.initcharts();
|
|
@@ -194,12 +112,14 @@ export default {
|
|
|
ticktext: this.initData[0].y,
|
|
|
showticks: false,
|
|
|
showgrid: true,
|
|
|
+ showline: false, // 隐藏 y 轴的轴线
|
|
|
},
|
|
|
xaxis: {
|
|
|
tickvals: this.initData[0].x,
|
|
|
ticktext: this.initData[0].x,
|
|
|
showticks: false,
|
|
|
showgrid: true,
|
|
|
+ showline: false, // 隐藏 y 轴的轴线
|
|
|
},
|
|
|
plot_bgcolor: "white", // 背景颜色设置为白色,确保背景和网格线一致
|
|
|
gridcolor: "#d3d3d3", // 设置网格线颜色
|
|
@@ -208,35 +128,28 @@ export default {
|
|
|
responsive: true,
|
|
|
});
|
|
|
},
|
|
|
- // createAnnotations(zData) {
|
|
|
- // const annotations = [];
|
|
|
- // for (let row = 0; row < zData.length; row++) {
|
|
|
- // for (let col = 0; col < zData[row].length; col++) {
|
|
|
- // const x = this.initData[0].x[col];
|
|
|
- // const y = this.initData[0].y[row];
|
|
|
- // const value = zData[row][col];
|
|
|
-
|
|
|
- // // 打印 x, y, 和 value 检查是否为 NaN 或无效值
|
|
|
- // console.log(`x: ${x}, y: ${y}, value: ${value}`);
|
|
|
-
|
|
|
- // if (!isNaN(value)) {
|
|
|
- // annotations.push({
|
|
|
- // x: x,
|
|
|
- // y: y,
|
|
|
- // text: value.toString(),
|
|
|
- // showarrow: false,
|
|
|
- // font: {
|
|
|
- // size: 10,
|
|
|
- // color: "black",
|
|
|
- // },
|
|
|
- // align: "center",
|
|
|
- // });
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return annotations;
|
|
|
- // },
|
|
|
-
|
|
|
+ createAnnotations(zData) {
|
|
|
+ const annotations = [];
|
|
|
+ for (let row = 0; row < zData.length; row++) {
|
|
|
+ for (let col = 0; col < zData[row].length; col++) {
|
|
|
+ if (!isNaN(zData[row][col])) {
|
|
|
+ // 确保值不是 NaN
|
|
|
+ annotations.push({
|
|
|
+ x: this.initData[0].x[col],
|
|
|
+ y: this.initData[0].y[row],
|
|
|
+ text: zData[row][col].toString(),
|
|
|
+ showarrow: false,
|
|
|
+ font: {
|
|
|
+ size: 10,
|
|
|
+ color: "black",
|
|
|
+ },
|
|
|
+ align: "center",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return annotations;
|
|
|
+ },
|
|
|
createShapesBorder(rows, cols, borderWidth, borderColor, offset) {
|
|
|
var shapes = [];
|
|
|
for (var row = 0; row < rows; row++) {
|