feat(关系图): 优化关系图交互并增加点击高亮功能
- 增加点击表格行高亮相关节点的功能 - 优化关系图布局和样式，根据选中状态调整参数 - 为图表元素添加指针样式提升交互体验 - 清理调试用的console.log语句 - 扩展颜色数组和月份选项
This commit is contained in:
parent
34f0b3eba9
commit
1241191f38
@ -485,15 +485,15 @@ const navigation = ref({
|
||||
// 在modules加入要使用的模块
|
||||
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
|
||||
const prevEl = () => {
|
||||
console.log("上一张");
|
||||
// console.log("上一张");
|
||||
};
|
||||
const nextEl = () => {
|
||||
console.log("下一张");
|
||||
// console.log("下一张");
|
||||
};
|
||||
// 更改当前活动swiper
|
||||
const onSlideChange = (swiper: any) => {
|
||||
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
|
||||
console.log(swiper.activeIndex, "活动swiper更改");
|
||||
// console.log(swiper.activeIndex, "活动swiper更改");
|
||||
};
|
||||
|
||||
const swiperBoxHeight = ref("300px");
|
||||
@ -555,35 +555,35 @@ const monthOptions = [
|
||||
value: "5",
|
||||
label: "五月",
|
||||
},
|
||||
// {
|
||||
// value: "6",
|
||||
// label: "六月",
|
||||
// }
|
||||
// ,
|
||||
// {
|
||||
// value: "7",
|
||||
// label: "七月",
|
||||
// },
|
||||
// {
|
||||
// value: "8",
|
||||
// label: "八月",
|
||||
// },
|
||||
// {
|
||||
// value: "9",
|
||||
// label: "九月",
|
||||
// },
|
||||
// {
|
||||
// value: "10",
|
||||
// label: "十月",
|
||||
// },
|
||||
// {
|
||||
// value: "11",
|
||||
// label: "十一月",
|
||||
// },
|
||||
// {
|
||||
// value: "12",
|
||||
// label: "十二月",
|
||||
// },
|
||||
{
|
||||
value: "6",
|
||||
label: "六月",
|
||||
}
|
||||
,
|
||||
{
|
||||
value: "7",
|
||||
label: "七月",
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
label: "八月",
|
||||
},
|
||||
{
|
||||
value: "9",
|
||||
label: "九月",
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "十月",
|
||||
},
|
||||
{
|
||||
value: "11",
|
||||
label: "十一月",
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "十二月",
|
||||
},
|
||||
];
|
||||
|
||||
//下拉框"市区"值
|
||||
@ -664,15 +664,26 @@ const districtOptions = [
|
||||
const webPageBackgroundColor = "#F0F0F0";
|
||||
//图表颜色
|
||||
const echartsColorArray = [
|
||||
"#5470c6",
|
||||
"#91cc75",
|
||||
"#fac858",
|
||||
"#ee6666",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#fc8452",
|
||||
"#9a60b4",
|
||||
"#ea7ccc",
|
||||
'#5470C6',
|
||||
'#91CC75',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3BA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#EA7CCC',
|
||||
'#27727B',
|
||||
'#FE8463',
|
||||
'#9BCA63',
|
||||
'#FAD860',
|
||||
'#F3A43B',
|
||||
'#60C0DD',
|
||||
'#D7504B',
|
||||
'#C6E579',
|
||||
'#F4E001',
|
||||
'#F0805A',
|
||||
'#26C0C0'
|
||||
];
|
||||
// const echartsColorArray = ['#FF00FF', '#00FF00'];
|
||||
|
||||
@ -1576,7 +1587,7 @@ const echarts2 = () => {
|
||||
var svg = d3
|
||||
.select(main2.value)
|
||||
.append("svg")
|
||||
.attr("width", windowWidth.value * 0.23)
|
||||
.attr("width", windowWidth.value * 0.24)
|
||||
.attr("height", (windowHeight.value - 100 - 3 * 4) / 3);
|
||||
|
||||
// 创建布局
|
||||
@ -1648,6 +1659,7 @@ const echarts2 = () => {
|
||||
return echartsColorArray[randomIndex];
|
||||
})
|
||||
.style("opacity", 0.7)
|
||||
.style("cursor", "pointer")
|
||||
// 鼠标悬停事件
|
||||
.on("mousemove", function (event, d: any) {
|
||||
isTooltipVisible.value = true;
|
||||
@ -1659,6 +1671,8 @@ const echarts2 = () => {
|
||||
tooltip.transition().duration(200).style("opacity", 0.9);
|
||||
tooltip
|
||||
.html(d.data.name + "：" + d.data.value)
|
||||
.style("color", "gray")
|
||||
.style("border", "1px solid " + echartsColorArray[Math.floor(Math.random() * echartsColorArray.length)])
|
||||
.style("left", x + "px") // 设置 tooltip 的位置为左侧
|
||||
.style("top", y + "px"); // 设置 tooltip 的垂直位置
|
||||
})
|
||||
@ -1745,7 +1759,7 @@ const echarts2 = () => {
|
||||
svg
|
||||
.append("text")
|
||||
.attr("class", "subtitle")
|
||||
.attr("x", 5) // 根据需要调整副标题的水平位置
|
||||
.attr("x", 0) // 根据需要调整副标题的水平位置
|
||||
.attr(
|
||||
"y",
|
||||
((windowHeight.value - 100 - 3 * 4) / 3 - 198) / 2 + 78 + 14 * index
|
||||
@ -3613,6 +3627,9 @@ const initStreetChart = () => {
|
||||
|
||||
// 新增初始化方法
|
||||
const initRelationshipChart = () => {
|
||||
if (chartRelationship) {
|
||||
chartRelationship.dispose();
|
||||
}
|
||||
// return;
|
||||
const chartDom = main9.value;
|
||||
if (!chartDom) return;
|
||||
@ -3620,24 +3637,60 @@ const initRelationshipChart = () => {
|
||||
chartRelationship = echarts.init(chartDom);
|
||||
|
||||
getRelationshipNetwork().then((res) => {
|
||||
let nodes;
|
||||
let links;
|
||||
// 处理节点数据，为每个节点设置初始样式
|
||||
const nodes = res.data.nodes.map((node: any) => ({
|
||||
...node,
|
||||
symbolSize: 10, // 节点大小
|
||||
value: 15, // 节点权重（可用于布局）
|
||||
draggable: false, // 节点不可拖动
|
||||
itemStyle: {
|
||||
opacity: 0.8, // 节点初始透明度
|
||||
},
|
||||
}));
|
||||
if (handleRowValue.value == "") {
|
||||
// 处理连线数据，为每条连线设置初始样式
|
||||
links = res.data.links.map((link: any) => ({
|
||||
...link,
|
||||
lineStyle: {
|
||||
opacity: 0.3, // 连线初始透明度
|
||||
},
|
||||
}));
|
||||
|
||||
// 处理连线数据，为每条连线设置初始样式
|
||||
const links = res.data.links.map((link: any) => ({
|
||||
...link,
|
||||
lineStyle: {
|
||||
opacity: 0.3, // 连线初始透明度
|
||||
},
|
||||
}));
|
||||
nodes = res.data.nodes.map((node: any) => ({
|
||||
...node,
|
||||
symbolSize: 10, // 节点大小
|
||||
value: 15, // 节点权重（可用于布局）
|
||||
draggable: false, // 节点不可拖动
|
||||
itemStyle: {
|
||||
opacity: 0.8, // 节点初始透明度
|
||||
},
|
||||
}));
|
||||
} else {
|
||||
|
||||
// 处理连线数据，为每条连线设置初始样式
|
||||
links = res.data.links.filter((link: any) => link.target === handleRowValue.value || link.source === handleRowValue.value)
|
||||
.map((link: any) => ({
|
||||
...link,
|
||||
lineStyle: {
|
||||
opacity: 1, // 连线初始透明度
|
||||
},
|
||||
}))
|
||||
|
||||
nodes = res.data.nodes
|
||||
// 筛选出存在于任何连线中的节点
|
||||
.filter((node: any) =>
|
||||
links.some(link =>
|
||||
link.target === node.name || link.source === node.name
|
||||
)
|
||||
)
|
||||
// 为筛选后的节点设置样式
|
||||
.map((node: any) => ({
|
||||
...node,
|
||||
symbolSize: 10, // 节点大小
|
||||
value: 15, // 节点权重（可用于布局）
|
||||
draggable: false, // 节点不可拖动
|
||||
itemStyle: {
|
||||
opacity: 0.8, // 节点初始透明度
|
||||
},
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// console.log(nodes, links, "------------");
|
||||
|
||||
// ECharts 配置项
|
||||
const option: echarts.EChartsOption = {
|
||||
@ -3660,10 +3713,10 @@ const initRelationshipChart = () => {
|
||||
{
|
||||
type: "graph", // 图类型为关系图
|
||||
layout: "force", // 使用力引导布局
|
||||
zoom: 0.8,
|
||||
zoom: handleRowValue.value == "" ? 0.8 : 1.2,
|
||||
force: {
|
||||
repulsion: 1000, // 节点之间的斥力
|
||||
edgeLength: 1000, // 边的长度
|
||||
edgeLength: handleRowValue.value == "" ? 1000 : 200, // 边的长度
|
||||
gravity: 10, // 重力系数
|
||||
},
|
||||
emphasis: {
|
||||
@ -4279,15 +4332,19 @@ const highlightGraphNodeByName = (nodeName: string) => {
|
||||
name: nodeName,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRowValue = ref("");
|
||||
const handleRowClick = (item: any, index: number) => {
|
||||
console.log(item, index);
|
||||
// console.log(item, index);
|
||||
|
||||
// 将当前行数据移到首行
|
||||
if (index !== 0) {
|
||||
jubaoGaofaData.value.splice(index, 1); // 删除当前行
|
||||
jubaoGaofaData.value.unshift(item); // 插入到首行
|
||||
}
|
||||
|
||||
handleRowValue.value = "投诉举报-" + item.huanjie.slice(0, 2) + "-" + item.zhonglei;
|
||||
console.log(handleRowValue.value);
|
||||
initRelationshipChart();
|
||||
};
|
||||
|
||||
|
||||
@ -4435,6 +4492,7 @@ const handleFancyClick = (e: MouseEvent) => {
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user