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], // 框内paddingtype: '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);});},

AntV-G6 Tooltip基础配置相关推荐

Vuex和antv/g6实现在线绘制分析流程图功能
流程图绘制在项目中实际是一个复杂的应用,但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来,所以本文章仅抽取最基础的部分简单介绍流程图创建. ...
关系图 antv G6
1.安装antv G6 npm install --save @antv/g6 # 或者 # pnpm install --save @antv/g6 2.引入antv G6 import G6 fr ...
01 【介绍使用步骤引入方式基础配置】
1.Echarts-介绍常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数 ...
AntV G6 的坑之——从卡掉渣到满帧需要几步
AntV G6 是一款图可视化与分析开源引擎.<AntV G6 的坑之--XXX>系列文章持续更新中,总结常见问题及神坑解决方案.任何问题可在 GitHub Issue 中提问,求 Git ...
AntV G6设置连线箭头
效果如下: 主要代码: defaultEdge: {style: {lineWidth: 2, // 线宽stroke: '#778899', // 线的颜色endArrow: { // 设置终点箭头 ...
在 Vue3 中优雅使用 antV G6 的流程总结
在 Vue3 中使用 antV G6 的流程 1. 在项目中引入 G6 import G6 from '@antv/g6'; 2. 创建挂载容器 <div id="mountNode& ...
AntV G6的相关使用总结
本文是对AntV G6目前研究到的内容的一个总结,目前实现了以下几点内容: 1.拖拽.缩放: 2.修改节点样式--即:将节点修改成图片显示: 3.修改节点的连线长度: 4.节点防碰撞设置: 5.鼠标悬 ...
antv G6绘制流程图
先贴上实现的效果图 G6官网,关于G6的使用,可以自行进入官网查看. 按照官网可以绘制出简单的流程但是当实际绘制流程图时,简直是要被连接线的折点给搞崩溃. 节点配置项 anchorPoints:指定 ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...

AntV-G6 Tooltip基础配置

AntV-G6 Tooltip基础配置相关推荐

最新文章

热门文章