|
@@ -1,12 +1,134 @@
|
|
-/*
|
|
|
|
- * @Author: your name
|
|
|
|
- * @Date: 2024-11-28 10:31:21
|
|
|
|
- * @LastEditTime: 2024-12-26 09:56:47
|
|
|
|
- * @LastEditors: bogon
|
|
|
|
- * @Description: In User Settings Edit
|
|
|
|
- * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/Heatmap.js
|
|
|
|
- */
|
|
|
|
|
|
+// /*
|
|
|
|
+// * @Author: your name
|
|
|
|
+// * @Date: 2024-11-28 10:31:21
|
|
|
|
+// * @LastEditTime: 2024-12-26 17:26:25
|
|
|
|
+// * @LastEditors: bogon
|
|
|
|
+// * @Description: In User Settings Edit
|
|
|
|
+// * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/Heatmap.js
|
|
|
|
+// */
|
|
|
|
+// import { filterData } from "../dargChartFIlter";
|
|
|
|
+// export function handleHeatmapPlotChartLogic(
|
|
|
|
+// item,
|
|
|
|
+// formLabelAlign,
|
|
|
|
+// formFilterAlign,
|
|
|
|
+// isFilter,
|
|
|
|
+// type
|
|
|
|
+// ) {
|
|
|
|
+// // 数据筛选逻辑
|
|
|
|
+// if (isFilter === "filter") {
|
|
|
|
+// const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
|
|
|
|
+// label: yItem.label,
|
|
|
|
+// id: yItem.id,
|
|
|
|
+// data: yItem.data.map((val) => {
|
|
|
|
+// const filters = formFilterAlign[index]?.filters || [];
|
|
|
|
+// // 排除 null 数据和不符合筛选条件的数据
|
|
|
|
+// return val === null ||
|
|
|
|
+// (filters.length > 0 && !filters.includes(val[yItem.label]))
|
|
|
|
+// ? null
|
|
|
|
+// : val;
|
|
|
|
+// }),
|
|
|
|
+// }));
|
|
|
|
+// // 条件筛选逻辑
|
|
|
|
+// const filterList = filterResult.map((filteredItem, index) => {
|
|
|
|
+// const filter = formFilterAlign[index];
|
|
|
|
+// const { filterType1, filterType2, number1, number2 } = filter;
|
|
|
|
+
|
|
|
|
+// if (
|
|
|
|
+// (number1 === null || number1 === "") &&
|
|
|
|
+// (number2 === null || number2 === "")
|
|
|
|
+// ) {
|
|
|
|
+// return {
|
|
|
|
+// label: filteredItem.label,
|
|
|
|
+// id: filteredItem.id,
|
|
|
|
+// data: filteredItem.data,
|
|
|
|
+// };
|
|
|
|
+// } else {
|
|
|
|
+// const filterDatas = filterData(
|
|
|
|
+// filter,
|
|
|
|
+// filteredItem.data,
|
|
|
|
+// filteredItem.label
|
|
|
|
+// );
|
|
|
|
+// return {
|
|
|
|
+// label: filteredItem.label,
|
|
|
|
+// id: filteredItem.id,
|
|
|
|
+// data: [...filterDatas],
|
|
|
|
+// };
|
|
|
|
+// }
|
|
|
|
+// });
|
|
|
|
+// item.Xdata = formLabelAlign.Xdata;
|
|
|
|
+// item.Ydata = filterList;
|
|
|
|
+// } else {
|
|
|
|
+// item.Xdata = formLabelAlign.Xdata;
|
|
|
|
+// item.Ydata = formLabelAlign.Ydata;
|
|
|
|
+// }
|
|
|
|
+// // 生成数据
|
|
|
|
+// if (
|
|
|
|
+// item.Xdata.length > 1 &&
|
|
|
|
+// item.Xdata[1]?.data?.length > 0 &&
|
|
|
|
+// item.Ydata.length > 0 &&
|
|
|
|
+// item.Ydata[0]?.data?.length > 0
|
|
|
|
+// ) {
|
|
|
|
+// // 初始化 series 数据
|
|
|
|
+// item.option.series = [];
|
|
|
|
+// const xAxisData = item.Xdata[0].data
|
|
|
|
+// .map((xitem) => xitem[item.Xdata[0].label])
|
|
|
|
+// .filter((val) => val !== null && val !== "" && val !== undefined);
|
|
|
|
+// const yAxisData = item.Xdata[1].data
|
|
|
|
+// .map((xitem) => xitem[item.Xdata[1].label])
|
|
|
|
+// .filter((val) => val !== null && val !== "" && val !== undefined);
|
|
|
|
+// // 设置 x 和 y 轴标签
|
|
|
|
+// item.option.xAxis = {
|
|
|
|
+// ...item.option.xAxis,
|
|
|
|
+// name: formLabelAlign.Xlable,
|
|
|
|
+// data: xAxisData,
|
|
|
|
+// };
|
|
|
|
+// item.option.yAxis = {
|
|
|
|
+// ...item.option.yAxis,
|
|
|
|
+// name: formLabelAlign.Ylable,
|
|
|
|
+// data: yAxisData,
|
|
|
|
+// };
|
|
|
|
+// // 初始化热力图数据
|
|
|
|
+// const data1 = [];
|
|
|
|
+// for (let z = 0; z < xAxisData.length; z++) {
|
|
|
|
+// for (let i = 0; i < yAxisData.length; i++) {
|
|
|
|
+// // 在 Ydata[0].data 中查找匹配的值
|
|
|
|
+// const matchedValue = item.Ydata[0].data.find(
|
|
|
|
+// (yval) =>
|
|
|
|
+// yval !== null &&
|
|
|
|
+// yval[item.Xdata[0].label] === xAxisData[z] &&
|
|
|
|
+// yval[item.Xdata[1].label] === yAxisData[i]
|
|
|
|
+// );
|
|
|
|
+// // 如果找到匹配值,则取 Ydata[0].label 的值,否则为 null
|
|
|
|
+// const value = matchedValue ? matchedValue[item.Ydata[0].label] : null;
|
|
|
|
+// // 将值推入 data1
|
|
|
|
+// data1.push([i, z, value]);
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// // 转换数据结构(如有必要)
|
|
|
|
+// const formattedData = data1.map((item) => [
|
|
|
|
+// item[1],
|
|
|
|
+// item[0],
|
|
|
|
+// item[2] || "-",
|
|
|
|
+// ]);
|
|
|
|
+
|
|
|
|
+// item.option.series = [
|
|
|
|
+// {
|
|
|
|
+// type: "heatmap",
|
|
|
|
+// data: formattedData,
|
|
|
|
+// progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
|
|
|
|
+// progressive: true, // 启用渐进式渲染
|
|
|
|
+// emphasis: {
|
|
|
|
+// itemStyle: {
|
|
|
|
+// shadowBlur: 10,
|
|
|
|
+// shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
|
+// },
|
|
|
|
+// },
|
|
|
|
+// },
|
|
|
|
+// ];
|
|
|
|
+// }
|
|
|
|
+// }
|
|
import { filterData } from "../dargChartFIlter";
|
|
import { filterData } from "../dargChartFIlter";
|
|
|
|
+
|
|
export function handleHeatmapPlotChartLogic(
|
|
export function handleHeatmapPlotChartLogic(
|
|
item,
|
|
item,
|
|
formLabelAlign,
|
|
formLabelAlign,
|
|
@@ -14,6 +136,7 @@ export function handleHeatmapPlotChartLogic(
|
|
isFilter,
|
|
isFilter,
|
|
type
|
|
type
|
|
) {
|
|
) {
|
|
|
|
+ console.log("1");
|
|
// 数据筛选逻辑
|
|
// 数据筛选逻辑
|
|
if (isFilter === "filter") {
|
|
if (isFilter === "filter") {
|
|
const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
|
|
const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
|
|
@@ -28,10 +151,11 @@ export function handleHeatmapPlotChartLogic(
|
|
: val;
|
|
: val;
|
|
}),
|
|
}),
|
|
}));
|
|
}));
|
|
|
|
+ console.log("2");
|
|
// 条件筛选逻辑
|
|
// 条件筛选逻辑
|
|
const filterList = filterResult.map((filteredItem, index) => {
|
|
const filterList = filterResult.map((filteredItem, index) => {
|
|
- const filter = formFilterAlign[index];
|
|
|
|
- const { filterType1, filterType2, number1, number2 } = filter;
|
|
|
|
|
|
+ const { filterType1, filterType2, number1, number2 } =
|
|
|
|
+ formFilterAlign[index];
|
|
|
|
|
|
if (
|
|
if (
|
|
(number1 === null || number1 === "") &&
|
|
(number1 === null || number1 === "") &&
|
|
@@ -44,7 +168,7 @@ export function handleHeatmapPlotChartLogic(
|
|
};
|
|
};
|
|
} else {
|
|
} else {
|
|
const filterDatas = filterData(
|
|
const filterDatas = filterData(
|
|
- filter,
|
|
|
|
|
|
+ formFilterAlign[index],
|
|
filteredItem.data,
|
|
filteredItem.data,
|
|
filteredItem.label
|
|
filteredItem.label
|
|
);
|
|
);
|
|
@@ -55,12 +179,14 @@ export function handleHeatmapPlotChartLogic(
|
|
};
|
|
};
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+
|
|
item.Xdata = formLabelAlign.Xdata;
|
|
item.Xdata = formLabelAlign.Xdata;
|
|
item.Ydata = filterList;
|
|
item.Ydata = filterList;
|
|
} else {
|
|
} else {
|
|
item.Xdata = formLabelAlign.Xdata;
|
|
item.Xdata = formLabelAlign.Xdata;
|
|
item.Ydata = formLabelAlign.Ydata;
|
|
item.Ydata = formLabelAlign.Ydata;
|
|
}
|
|
}
|
|
|
|
+ console.log(item.Xdata, item.Ydata, "3");
|
|
// 生成数据
|
|
// 生成数据
|
|
if (
|
|
if (
|
|
item.Xdata.length > 1 &&
|
|
item.Xdata.length > 1 &&
|
|
@@ -70,53 +196,59 @@ export function handleHeatmapPlotChartLogic(
|
|
) {
|
|
) {
|
|
// 初始化 series 数据
|
|
// 初始化 series 数据
|
|
item.option.series = [];
|
|
item.option.series = [];
|
|
- const xAxisData = item.Xdata[0].data
|
|
|
|
- .map((xitem) => xitem[item.Xdata[0].label])
|
|
|
|
- .filter((val) => val !== null && val !== "" && val !== undefined);
|
|
|
|
- const yAxisData = item.Xdata[1].data
|
|
|
|
- .map((xitem) => xitem[item.Xdata[1].label])
|
|
|
|
- .filter((val) => val !== null && val !== "" && val !== undefined);
|
|
|
|
- // 设置 x 和 y 轴标签
|
|
|
|
|
|
+
|
|
|
|
+ // 提取 X 和 Y 轴数据
|
|
|
|
+ // 提取 X轴 和 Y轴 数据
|
|
|
|
+ const xAxisData = item.Xdata[0].data.map(
|
|
|
|
+ (xItem) => xItem[item.Xdata[0].label]
|
|
|
|
+ );
|
|
|
|
+ const yAxisData = item.Xdata[1].data.map(
|
|
|
|
+ (yItem) => yItem[item.Xdata[1].label]
|
|
|
|
+ );
|
|
|
|
+ console.log("4");
|
|
|
|
+ // 设置 ECharts 的 x 和 y 轴
|
|
item.option.xAxis = {
|
|
item.option.xAxis = {
|
|
...item.option.xAxis,
|
|
...item.option.xAxis,
|
|
|
|
+ type: "category",
|
|
name: formLabelAlign.Xlable,
|
|
name: formLabelAlign.Xlable,
|
|
data: xAxisData,
|
|
data: xAxisData,
|
|
};
|
|
};
|
|
|
|
+
|
|
item.option.yAxis = {
|
|
item.option.yAxis = {
|
|
...item.option.yAxis,
|
|
...item.option.yAxis,
|
|
|
|
+ type: "category",
|
|
name: formLabelAlign.Ylable,
|
|
name: formLabelAlign.Ylable,
|
|
data: yAxisData,
|
|
data: yAxisData,
|
|
};
|
|
};
|
|
- // 初始化热力图数据
|
|
|
|
- const data1 = [];
|
|
|
|
- for (let z = 0; z < xAxisData.length; z++) {
|
|
|
|
- for (let i = 0; i < yAxisData.length; i++) {
|
|
|
|
- // 在 Ydata[0].data 中查找匹配的值
|
|
|
|
- const matchedValue = item.Ydata[0].data.find(
|
|
|
|
- (yval) =>
|
|
|
|
- yval !== null &&
|
|
|
|
- yval[item.Xdata[0].label] === xAxisData[z] &&
|
|
|
|
- yval[item.Xdata[1].label] === yAxisData[i]
|
|
|
|
- );
|
|
|
|
- // 如果找到匹配值,则取 Ydata[0].label 的值,否则为 null
|
|
|
|
- const value = matchedValue ? matchedValue[item.Ydata[0].label] : null;
|
|
|
|
- // 将值推入 data1
|
|
|
|
- data1.push([i, z, value]);
|
|
|
|
|
|
+ // 设置 x 和 y 轴标签
|
|
|
|
+ // 准备热力图数据
|
|
|
|
+ const heatmapData = [];
|
|
|
|
+
|
|
|
|
+ // 遍历每个 SalesID 和 PrdctID 的组合
|
|
|
|
+ for (let i = 0; i < yAxisData.length; i++) {
|
|
|
|
+ for (let j = 0; j < xAxisData.length; j++) {
|
|
|
|
+ // 找到对应的 Amount 值
|
|
|
|
+ const amountValue =
|
|
|
|
+ item.Ydata[0].data[j] && item.Ydata[0].data[i]
|
|
|
|
+ ? item.Ydata[0].data[j][item.Ydata[0].label]
|
|
|
|
+ : null;
|
|
|
|
+
|
|
|
|
+ // 如果找到有效值,则将其加入热力图数据中
|
|
|
|
+ if (amountValue !== null || amountValue !== undefined) {
|
|
|
|
+ heatmapData.push([i, j, amountValue]); // [yIndex, xIndex, value]
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- // 转换数据结构(如有必要)
|
|
|
|
- const formattedData = data1.map((item) => [
|
|
|
|
- item[1],
|
|
|
|
- item[0],
|
|
|
|
- item[2] || "-",
|
|
|
|
- ]);
|
|
|
|
|
|
+ console.log(heatmapData, "heatmapData");
|
|
|
|
|
|
|
|
+ // 生成热力图数据
|
|
item.option.series = [
|
|
item.option.series = [
|
|
{
|
|
{
|
|
type: "heatmap",
|
|
type: "heatmap",
|
|
- data: formattedData,
|
|
|
|
|
|
+ data: heatmapData,
|
|
progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
|
|
progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
|
|
progressive: true, // 启用渐进式渲染
|
|
progressive: true, // 启用渐进式渲染
|
|
|
|
+ renderMode: "webgl", // 启用 WebGL 渲染
|
|
emphasis: {
|
|
emphasis: {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowBlur: 10,
|