diff --git a/src/views/shanghaiStreetMapDasai.vue b/src/views/shanghaiStreetMapDasai.vue index 5efe279..bd277cb 100644 --- a/src/views/shanghaiStreetMapDasai.vue +++ b/src/views/shanghaiStreetMapDasai.vue @@ -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 {