echarts这种效果是哪个选项的配置

Question

求问各位，本人最近使用echarts来绘制neo4j数据库中的结点信息，遇到一些问题，1，如何像官方示例这样，鼠标悬浮状态时有悬浮框。2，节点的name太长，换行显示后还是和背景的白色融为一体，有没有更好的解决方案，其实解决1的话就可以把name放进悬浮框，也就解决2了

Answer 1

qq_26083679 晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

在 ECharts 中实现鼠标悬浮时显示提示框（tooltip）以及节点名称过长的换行显示，可以通过以下配置选项来解决：

1. 鼠标悬浮时显示提示框（tooltip）： 在 series 的节点图（graph）配置项中，开启并自定义 tooltip 配置。例如：

   tooltip: {
       trigger: 'item', // 激活方式设置为'item'，表示数据项图形触发
       formatter: function(params) { // 自定义提示框内容格式
           return params.data.name + ': ' + (params.data.value || ''); // 显示节点名称和其值
       },
       backgroundColor: 'rgba(0,0,0,0.7)', // 设置背景颜色
       borderColor: '#333', // 设置边框颜色
       padding: [5, 10], // 设置内边距
       textStyle: { // 设置文本样式
           color: '#fff',
           fontSize: 14,
       }
   },
   

2. 节点名称换行显示： 节点名称换行可通过 CSS 设置 word-break 或 white-space 属性来实现。但在 ECharts 中，节点标签（name）默认是根据空间自动调整布局的，如果需要强制换行，可以在节点的 label 配置项中进行设置：

   series: [{
       type: 'graph',
       // 其他配置...
       nodes: [
           // 节点数据...
           {
               name: '类目6\n类目7\n类目8', // 使用反斜杠n来插入换行符
               symbolSize: ...,
               itemStyle: {
                   normal: {
                       label: {
                           show: true,
                           position: 'right', // 设置标签位置
                           formatter: '{b}', // 显示节点名称
                           align: 'left', // 对齐方式
                           verticalAlign: 'middle', // 垂直对齐方式
                           lineHeight: 20, // 行高，有助于控制换行效果
                           overflow: 'breakAll', // 文本超出部分截断并换行
                           ...
                       },
                       ...
                   }
               }
           },
           // 更多节点数据...
       ],
       // 其他配置...
   }]
   

总结解决方案如下：

1. 配置 tooltip：

   • 设置 tooltip.trigger 为 'item'
   • 自定义 formatter 函数以展示节点详细信息

2. 节点名称换行：

   • 直接在节点的 name 字段中使用 \n 进行换行
   • 配置节点的 label 项，确保其支持换行，并可调整样式以提高阅读体验