gmlx/project/public/tuPu/js/index.js

function anonymous() {
  const urlAll = window.location.href
  const isMobile = window.innerWidth <= 500

  if (!urlAll.includes('?id=')) return alert('参数错误')

  const id = urlAll.split('?id=')[1]

  const obj = cardNames.find(v => v.id == id)

  if (!obj) return alert('参数错误')

  let dom = document.getElementById('container')
  let myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  })

  let option

  const data1 = []
  const data2 = []

  if (obj.son) {
    const ids = []

    obj.son.forEach((c1, i) => {
      c1.forEach(c2 => {
        data2.push({
          source: c2.source + '',
          target: c2.target + '',
          value: c2.value
        })

        if (!ids.map(a => a.id).includes(c2.source + '')) {
          ids.push({
            id: c2.source + '',
            symbolSize: 200 - (i + 1) * 50,
            tit: i === obj.son.length - 1,
            value: c2.value
          })
        }
        if (!ids.map(a => a.id).includes(c2.target + '')) {
          ids.push({
            id: c2.target + '',
            symbolSize: 200 - (i + 1) * 50,
            tit: i === obj.son.length - 1,
            value: c2.value
          })
        }
      })
    })

    ids.forEach(v => {
      const isCenter = id == v.id
      const centerX = window.innerWidth / 2 // 中心坐标x
      const centerY = window.innerHeight / 2 // 中心坐标y

      const obj = cardNames.find(c => c.id == v.id)

      data1.push({
        fixed: isCenter, // 固定中心节点位置
        x: isCenter ? centerX : null, // 设置中心节点坐标
        y: isCenter ? centerY : null,
        // category: id == v.id ? '中心' : '',
        symbolSize: id == v.id ? 200 : v.symbolSize,
        id: v.id,
        name: obj.name,
        symbol: `image://../../three/assets/out/${v.id}.png`
        //  tit:v.tit
      })
    })
  }

  option = {
    tooltip: {
      show: true, // 默认显示
      showContent: true, // 是否显示提示框浮层
      trigger: 'item', // 触发类型，默认数据项触发
      triggerOn: 'mousemove', // 提示触发条件，mousemove鼠标移至触发，还有click点击触发
      alwaysShowContent: false, // 默认离开提示框区域隐藏，true为一直显示
      showDelay: 100, // 浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
      hideDelay: 2000, // 浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
      enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
      position: 'right', // 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
      confine: true, // 是否将 tooltip 框限制在图表的区域内。
      // 外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
      transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是秒，设置为 0 的时候会紧跟着鼠标移动。
      formatter: function (params) {
        // 判断当前节点是否为第三级节点
        // 假设层级信息可以通过 params.data.tit 获取，或者通过其他逻辑判断
        if (params.data.tit) {
          // 如果是第三级节点，返回自定义的悬浮框内容
          return params.name
        } else {
          // 如果不是第三级节点，返回默认的悬浮框内容或不显示
          return '' // 不显示悬浮框
        }
      },
      // 自定义提示框的样式
      borderColor: '#896a43',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#dfd5c5',
        fontFamily: 'sk'
      },
      blur: {
        itemStyle: {
          opacity: 0.2 // 非突出节点的透明度
        },
        label: {
          show: false // 非突出节点隐藏标签
        }
      }
    },

    series: [
      {
        type: 'graph', // 关系图
        symbolKeepAspect: true, // 保持图片宽高比
        // name: "Name:", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
        layout: 'force', // 图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
        legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
        hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
        coordinateSystem: null, // 坐标系可选
        // xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
        // yAxisIndex: 0, // y轴坐标
        force: {
          // 力引导图基本配置
          // initLayout: 'circular',
          // initLayout: , // 力引导的初始化布局，默认使用xy轴的标点
          repulsion: 600, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
          gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
          edgeLength: 240, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
          layoutAnimation: true, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
          // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
          // 防止节点重叠
          friction: 0.8, // 增加摩擦力
          // 增加防止重叠的参数
          nodeOverlap: 20, // 防止节点重叠的参数
          // 优化布局迭代
          coolingFactor: 0.99, // 冷却因子，使布局逐渐稳定
          minMovement: 0.5, // 最小移动距离
          maxIteration: 2000 // 增加最大迭代次数
        },
        roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启，true 为都开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'
        // zoom: 1,
        scaleLimit: {
          // 缩放限制，只在使用 force 布局时有效。
          min: isMobile ? 0.5 : 0.8, // 最小缩放比例
          max: isMobile ? 2 : 3 // 最大缩放比例
        },
        nodeScaleRatio: 0.6, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
        draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
        focusNodeAdjacency: !window.isMobile ? true : false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
        emphasis: {
          itemStyle: {
            opacity: 1 // 突出节点的透明度
          }
        },
        blur: {
          itemStyle: {
            opacity: 0.3 // 非突出节点的透明度
          },
          lineStyle: {
            opacity: 0.3 // 非突出节点的透明度
          },
          label: {
            opacity: 0.3 // 非突出节点的透明度
          }
        },
        // symbol:'roundRect', // 关系图节点标记的图形。
        // ECharts 提供的标记类型包括：'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）,
        // 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）
        // 也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
        // symbolSize: 10 , // 也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，
        // 可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
        // symbolRotate:, // 关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
        // symbolOffset:[0,0], // 关系图节点标记相对于原本位置的偏移。[0, '50%']
        edgeSymbol: ['circle', 'circle'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。
        // 默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
        edgeSymbolSize: [0, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。

        symbolSize: 120, // 关系图节点标记的大小，可以是一个数组分别指定两端，也可以是单个统一指定。
        itemStyle: {
          // ========图形样式，有 normal 和 emphasis 两个状态。
          // normal 是图形在默认状态下的样式；
          // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
          normal: {
            // 默认样式
            label: {
              show: true
            },
            borderType: 'solid', // 图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
            borderColor: '#fad166', // 设置图形边框为淡金色,透明度为0.4
            borderWidth: 2, // 图形的描边线宽。为 0 时无描边。
            opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
          },
          emphasis: {
            // 高亮状态
            // lineStyle: {
            //   width: 10,
            // },
          }
        },
        lineStyle: {
          // ========关系边的公用线条样式。
          normal: {
            color: '#fad166',
            width: '1', //线的粗细
            type: 'dashed', // 线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
            curveness: 0.3, // 线条的曲线程度，从0到1
            opacity: 0.5 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
          },
          emphasis: {
            // 高亮状态
          }
        },
        label: {
          // ========结点图形上的文本标签
          normal: {
            show: true, // 是否显示标签。
            position: 'bottom', // 标签的位置。['50%', '50%'] [x,y]
            textStyle: {
              // 标签的字体样式
              color: '#fad166', // 字体颜色
              fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
              fontWeight: 'normal', // 'normal'标准，'bold'粗的，'bolder'更粗的，'lighter'更细的，或100 | 200 | 300 | 400...
              fontFamily: 'sk', // 文字的字体系列
              fontSize: 16
            }
          }
        },
        edgeLabel: {
          // ========连接线上的文本标签
          normal: {
            show: true, // 不显示连接线上的文字，如果显示只能显示结点的value值，而不是连接线的值
            // position: "middle", // 标签的位置。['50%', '50%'] [x,y]
            textStyle: {
              color: '#f4e6bf',
              fontSize: 16
            },
            formatter: '{c}'
          }
        },

        data: data1,
        // 设置连线edges的数据,

        links: data2, // 设置连线edges的数据
        // 添加节点布局优化
        circular: {
          rotateLabel: false
        },
        // 优化节点间距
        categories: [
          {
            name: '中心',
            itemStyle: {
              color: '#ff6b6b'
            }
          }
        ]
      }
    ]
  }

  if (myChart) {
    if (option && typeof option === 'object') {
      setTimeout(function () {
        myChart.setOption(option)
      }, 500)
    }
  } else {
    console.error('ECharts 初始化失败')
  }

  // 点击节点跳转链接
  myChart.on('click', function (params, e) {
    // if (params.componentType === "series" && params.dataType === "node") {
    //   const nodeData = params.data;
    //   openDetail(nodeData.idinfo, e);
    // }
  })

  window.addEventListener('resize', myChart.resize)
}

anonymous()