echarts单击节点高亮显示

最新推荐文章于 2025-06-05 14:01:47 发布

原创

最新推荐文章于 2025-06-05 14:01:47 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#React-echarts #节点单击高亮呈现

本文介绍了如何在React应用中利用echarts实现节点单击时高亮显示的效果。通过修改`GraphView.js`文件，注释掉原有的鼠标经过放大节点的代码，替换为新的处理方式，调整`focusNodeAdjacency`函数，使得单击节点只高亮该节点，其他节点和边线变为半透明。详细步骤包括echarts的安装、源码目录解析以及关键文件的修改位置和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、echarts源码结构

echarts安装

npm install echarts --save

源码目录说明

dist（编译后生成的文件夹）

extension （扩展中使用）

lib （源码中没有，执行webpack编译后才存在）

map （世界地图，中国地图及中国各个省份地图的js和json两种格式的文件）

src （核心源码）

theme （主题）

修改文件位置

node_modules/echarts/lib/chart/GraphView.js

2、修改内容

 
          el.__focusNodeAdjacency  
          //控制节点放大 
         
          el.__unfocusNodeAdjacency  
          //控制节点定制放大

下面注释代码的含义是，在鼠标经过时放大节点，在鼠标离开时，停止放大。

 
          /* 
         
          el.off('mouseover', el.__focusNodeAdjacency); 
         
          el.off('mouseout', el.__unfocusNodeAdjacency); 
         
          if (itemModel.get('focusNodeAdjacency')) { 
            
          el.on('mouseover', el.__focusNodeAdjacency = function () { 
            
          api.dispatchAction({ 
            
          type: 'focusNodeAdjacency', 
         
          seriesId: seriesModel.id, 
         
          dataIndex: el.dataIndex 
         
          }); 
         
          }); 
         
          el.on('mouseout', el.__unfocusNodeAdjacency = function () { 
            
          api.dispatchAction({ 
            
          type: 'unfocusNodeAdjacency', 
         
          seriesId: seriesModel.id 
         
          }); 
         
          }); 
         
          } 
         
          }, this); 
         
          data.graph.eachEdge(function (edge) { 
            
          var el = edge.getGraphicEl(); 
         
          el.off('mouseover', el.__focusNodeAdjacency); 
         
          el.off('mouseout', el.__unfocusNodeAdjacency); 
         
          if (edge.getModel().get('focusNodeAdjacency')) { 
            
          el.on('mouseover', el.__focusNodeAdjacency = function () { 
            
          api.dispatchAction({