2021-09-22

最新推荐文章于 2024-03-14 18:17:15 发布

变强就秃头

最新推荐文章于 2024-03-14 18:17:15 发布

阅读量317

点赞数

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/cnlinxingan/article/details/120411468

版权

echarts关系图自定义节点tooltip和节点间连线tooptip内容

最近在做echarts关系图的一些功能，随手记录一下在完成过程遇到的一些问题。产品提的需求是在节点的tooptip上保留echarts自带的样式与内容, 并且内容超过38个字需要换行：这是节点上的tooltip
连线上的tooptip需求为展示两个节点的名称并且文字过长换行：在这里插入图片描述
在看了echarts的配置项后，我们发现有一个tooltip属性可以控制悬浮展示的内容，tooltip里有一个formatter属性可以修改悬浮框里面的内容（大家可以仔细阅读一下配置文件，可以解决大多数问题），但是如果我们为你直接设置的话两个框都会受影响，所以我们需要用到formatter里的回调函数来分别设置节点的tooltip和线上的tooltip。通过观察回调函数我们可以发现鼠标悬浮在节点上的回调函数内容和鼠标悬浮在线上的回调函数是不同的:这是悬浮在节点上回调函数返回的内容，data里面为我们传值时nodes的数据我们可以拿到使用在这里插入图片描述

 formatter: function(params) {
            // 关系节点上的toolTip
            if (params.data.name) {
              let str = params.data.name
              let arr = str.split('')
              for (
                let i = 38;
                i < arr.length;
                i += 38 // 38字换行
              ) {
                arr[i] += '</br>'
              }
              str = arr.join('')

              let tipHtml = ''
              tipHtml =
                '<div style="display:flex;align-items: center;">' +
                '<div style="display:inline-block;width:8px;height:8px;background:' +
                params.color +
                ';border-radius:40px;">' +
                '</div>' +
                '<div style="margin-left:10px;color:#303133;font-size:12px;">' +
                str +
                '</div>' +
                '<div style="margin-left:10px;color:#303133;font-size:14px;font-weight:bolder;">' +
                params.value +
                '</div>' +
                '</div>'
              return tipHtml

悬浮在线上的回调内容：我们可以发现data里返回的是我们所有返回值钟links里面的内容，也就是索引值，这样我们就可以通过索引拿到我们所需要的内容在这里插入图片描述
下面的代码和上面的差不多，就不贴了。主要是通过source和target这两个节点来拿到线两端的两个节点的内容展示，再使用html将他们拼接起来。如有什么不完整或者错误的地方欢迎大家指正