AntV-G6 Tooltip基础配置

官方网址： G6 图可视化引擎 | AntV

图表示例： 所有图表 | G6

    init() {
      /**
       * 计算字符串的长度
       * @param {string} str 指定的字符串
       */
      var calcStrLen = function calcStrLen(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
          if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
            len++;
          } else {
            len += 2;
          }
        }
        return len;
      };

      /**
       * 计算显示的字符串
       * @param {string} str 要裁剪的字符串
       * @param {number} maxWidth 最大宽度
       * @param {number} fontSize 字体大小
       */
      var fittingString = function fittingString(str, maxWidth, fontSize) {
        var fontWidth = fontSize * 1.3; //字号+边距
        maxWidth = maxWidth * 2; // 需要根据自己项目调整
        var width = calcStrLen(str) * fontWidth;
        var ellipsis = '…';
        if (width > maxWidth) {
          var actualLen = Math.floor((maxWidth - 10) / fontWidth);
          var result = str.substring(0, actualLen) + ellipsis;
          return result;
        }
        return str;
      };
      const tooltip = new G6.Tooltip({
        getContent(e) {
          const outDiv = document.createElement("div");
          if (e.item._cfg.type == "node") {
            outDiv.style.width = "200px";
            outDiv.innerHTML = `
                  <div style="border: 1px solid #06a6db;position: relative;z-index:12">
                    <div style="background-color: #0786e0;padding: 10px 20px; font-size:20px;">标题</div>
                    <div style="padding: 20px;position: relative;z-index:12">
                      <p>测试1</p>
                      <p>测试2</p>
                      <p>测试3</p>
                      <p>测试4</p>
                    </div>
                  </div>  
                `;
            return outDiv;
          } else {
            outDiv.style.display = "none";
            return outDiv;
          }
        },
      });
      let graph = new G6.Graph({
        container: "mountNode",
        width: 800,
        height: 800,
        // layout: { // 布局样式配置
        //   type: 'radial',
        //   unitRadius: 50,
        //   center: [500, 300]
        // },
        modes: {
          default: ["drag-canvas", "drag-node"], // 是否可以拖动画布、是否可以拖动node框
        },
        // 全局-框配置项
        defaultNode: {
          size: [80, 40], // 框内padding
          type: 'ellipse', // 框样式
          color: "#5B8FF9", // 边框颜色
          style: {
            lineWidth: 2,
            fill: "#C6E5FF", // 框背景色
            cursor: "pointer", // hover样式
          },
          labelCfg: {
            // 文字下方偏移
            style: {
              fill: "#f36c21", //文字颜色
              fontSize: 14, // 文字大小
            },
            // position: "bottom", // 文字位置
          },
        },
        // 全局-线配置项
        defaultEdge: {
          style: {
            endArrow: true, // 是否箭头
            stroke: "red", // 线颜色
            lineWidth: 2, // 线宽
            lineAppendWidth: 6,
            opacity: 1 // 透明度
          }
        },
        plugins: [tooltip], //浮框样式
      });
      // 循环处理各框样式 --- 必须放在render渲染前
      graph.node(node => {
        return {
          id: node.id,
          // type: 'ellipse',
          // style: {
          //   fill: '#fff',
          // },
        };
      });
      // 循环处理各线样式 --- 必须放在render渲染前
      graph.edge((edge) => {
        return {
          id: edge.id,
          type: 'cubic-horizontal', // 线的类型
          style: {
            stroke: 'green' // 颜色
          }
        }
      })
      // 直接修改原生数据中的label字段
      this.G6TooltipData.nodes.forEach(function(node) {
        if(node.label) node.label = fittingString(node.label, 25, 12);
      });
      this.G6TooltipData.edges.forEach(function(edge) {
        if(edge.label) edge.label = fittingString(edge.label, 100, 12);
      });
      
      graph.data(this.G6TooltipData); // 数据写入
      graph.render(); // 渲染

      // 节点上的点击事件
      graph.on("node:click", function(e) {
        console.log('节点点击',e)
      });
      // 路径点击事件
      graph.on("edge:click", function (e) {
        console.log('线路点击',e)
      });
      // 点击画布事件
      graph.on("canvas:click", function (e) {
        console.log('画布点击',e);
      });
    },