|
@@ -21,7 +21,6 @@ export function handleScatterChartLogic(
|
|
|
: val;
|
|
|
}),
|
|
|
}));
|
|
|
-
|
|
|
const filterList = filterResult.map((filteredItem, index) => {
|
|
|
const filter = formFilterAlign[index];
|
|
|
const { filterType1, filterType2, number1, number2 } = filter;
|
|
@@ -110,78 +109,75 @@ export function handleScatterChartLogic(
|
|
|
});
|
|
|
|
|
|
// 记录选中的散点
|
|
|
- const selectedPoints = [];
|
|
|
-
|
|
|
- // 点击事件的处理函数
|
|
|
- function handleClick(event) {
|
|
|
- const selectedIndex = event.dataIndex;
|
|
|
- const scatterData = item.option.series[0].data;
|
|
|
-
|
|
|
- // 获取点击点的坐标
|
|
|
- const xClick = event.data[0];
|
|
|
- const yClick = event.data[1];
|
|
|
-
|
|
|
- // 判断该点是否已经被选中
|
|
|
- const existingIndex = selectedPoints.findIndex(
|
|
|
- (point) => point.index === selectedIndex
|
|
|
- );
|
|
|
-
|
|
|
- if (existingIndex === -1) {
|
|
|
- // 如果没有选中,则加入
|
|
|
- selectedPoints.push({
|
|
|
- index: selectedIndex,
|
|
|
- x: xClick,
|
|
|
- y: yClick,
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 如果已经选中,则取消选中
|
|
|
- selectedPoints.splice(existingIndex, 1);
|
|
|
- }
|
|
|
-
|
|
|
- // 更新选中点的样式
|
|
|
- const newColors = scatterData.map((point, index) => {
|
|
|
- // 如果该点在 selectedPoints 中,则改变其颜色
|
|
|
- if (
|
|
|
- selectedPoints.some((selectedPoint) => selectedPoint.index === index)
|
|
|
- ) {
|
|
|
- return "red"; // 选中点为红色
|
|
|
- }
|
|
|
- return point[0] && point[1] ? "#000" : "transparent"; // 默认颜色,未选中点为黑色
|
|
|
- });
|
|
|
-
|
|
|
- const newSizes = scatterData.map((point, index) => {
|
|
|
- // 如果该点在 selectedPoints 中,则增大其大小
|
|
|
- if (
|
|
|
- selectedPoints.some((selectedPoint) => selectedPoint.index === index)
|
|
|
- ) {
|
|
|
- return 10; // 选中点大小为 10
|
|
|
- }
|
|
|
- return 5; // 默认大小
|
|
|
- });
|
|
|
-
|
|
|
- // 更新图表的颜色和大小
|
|
|
- item.option.series[0].itemStyle = {
|
|
|
- color: newColors,
|
|
|
- size: newSizes,
|
|
|
- };
|
|
|
-
|
|
|
- // 通过重新设置 `option` 来更新图表
|
|
|
- if (item.chartInstance) {
|
|
|
- item.chartInstance.setOption(item.option);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ // const selectedPoints = [];
|
|
|
+ // // 点击事件的处理函数
|
|
|
+ // function handleClick(event) {
|
|
|
+ // const selectedIndex = event.dataIndex;
|
|
|
+ // const scatterData = item.option.series[0].data;
|
|
|
+
|
|
|
+ // // 获取点击点的坐标
|
|
|
+ // const xClick = event.data[0];
|
|
|
+ // const yClick = event.data[1];
|
|
|
+
|
|
|
+ // // 判断该点是否已经被选中
|
|
|
+ // const existingIndex = selectedPoints.findIndex(
|
|
|
+ // (point) => point.index === selectedIndex
|
|
|
+ // );
|
|
|
+
|
|
|
+ // if (existingIndex === -1) {
|
|
|
+ // // 如果没有选中,则加入
|
|
|
+ // selectedPoints.push({
|
|
|
+ // index: selectedIndex,
|
|
|
+ // x: xClick,
|
|
|
+ // y: yClick,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // // 如果已经选中,则取消选中
|
|
|
+ // selectedPoints.splice(existingIndex, 1);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 更新选中点的样式
|
|
|
+ // const newColors = scatterData.map((point, index) => {
|
|
|
+ // // 如果该点在 selectedPoints 中,则改变其颜色
|
|
|
+ // if (
|
|
|
+ // selectedPoints.some((selectedPoint) => selectedPoint.index === index)
|
|
|
+ // ) {
|
|
|
+ // return "red"; // 选中点为红色
|
|
|
+ // }
|
|
|
+ // return point[0] && point[1] ? "#000" : "transparent"; // 默认颜色,未选中点为黑色
|
|
|
+ // });
|
|
|
+
|
|
|
+ // const newSizes = scatterData.map((point, index) => {
|
|
|
+ // // 如果该点在 selectedPoints 中,则增大其大小
|
|
|
+ // if (
|
|
|
+ // selectedPoints.some((selectedPoint) => selectedPoint.index === index)
|
|
|
+ // ) {
|
|
|
+ // return 10; // 选中点大小为 10
|
|
|
+ // }
|
|
|
+ // return 5; // 默认大小
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // 更新图表的颜色和大小
|
|
|
+ // item.option.series[0].itemStyle = {
|
|
|
+ // color: newColors,
|
|
|
+ // size: newSizes,
|
|
|
+ // };
|
|
|
+
|
|
|
+ // // 通过重新设置 `option` 来更新图表
|
|
|
+ // if (item.chartInstance) {
|
|
|
+ // item.chartInstance.setOption(item.option);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
// 绑定点击事件
|
|
|
item.option.series[0].emphasis = {
|
|
|
itemStyle: {
|
|
|
color: "red",
|
|
|
},
|
|
|
};
|
|
|
-
|
|
|
// 添加点击事件
|
|
|
- if (item.chartInstance) {
|
|
|
- item.chartInstance.off("click"); // 先移除之前的事件
|
|
|
- item.chartInstance.on("click", handleClick); // 然后绑定新的点击事件
|
|
|
- }
|
|
|
+ // if (item.chartInstance) {
|
|
|
+ // item.chartInstance.off("click"); // 先移除之前的事件
|
|
|
+ // item.chartInstance.on("click", handleClick); // 然后绑定新的点击事件
|
|
|
+ // }
|
|
|
}
|
|
|
}
|