echarts单击节点高亮显示

最新推荐文章于 2026-05-05 11:04:44 发布

原创最新推荐文章于 2026-05-05 11:04:44 发布 · 1.3w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

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

React-echarts 专栏收录该内容

5 篇文章

订阅专栏

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

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({

            type:
 'focusNodeAdjacency',

            seriesId:
 seriesModel.id,

            edgeDataIndex:
 edge.dataIndex

          });

        });

        el.on('mouseout',
 el.__unfocusNodeAdjacency = function () {

          api.dispatchAction({

            type:
 'unfocusNodeAdjacency',

            seriesId:
 seriesModel.id

          });

        });

      }

    });
 */

若想在单击节点时高亮节点，再次单击节点时停止高亮节点，需要对此文件做如下修改：

步骤1：注释掉原有节点和边线的放大与停止放大

/*   
 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({

            type:
 'focusNodeAdjacency',

            seriesId:
 seriesModel.id,

            edgeDataIndex:
 edge.dataIndex

          });

        });

        el.on('mouseout',
 el.__unfocusNodeAdjacency = function () {

          api.dispatchAction({

            type:
 'unfocusNodeAdjacency',

            seriesId:
 seriesModel.id

          });

        });

      }

    });
 */

步骤2：将注释掉的文件用如下文件替换。

    var nodeName="" //顶部申明即可

    el.off('click',
 el.__focusNodeAdjacency);

    el.off('click',
 el.__unfocusNodeAdjacency);

    if (itemModel.get('focusNodeAdjacency'))
 {

        el.on('click',function(){

        if (nodeName!=
 itemModel.option.name) { //判断是否是连续点击同一个节点

            el.__focusNodeAdjacency
 = api.dispatchAction({

                type: 'focusNodeAdjacency',

                seriesId:
 seriesModel.id,

                dataIndex:
 el.dataIndex

            });

            nodeName=
 itemModel.option.name;

        } else {//如果是连续点击同一个节点，则取消高亮效果

            el.__unfocusNodeAdjacency
 = api.dispatchAction({

                type: 'unfocusNodeAdjacency',

                seriesId:
 seriesModel.id

            });

            nodeName= "";

        }

    });

    }

}, this);

步骤3：在文件中找到focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {}函数，将函数做如下修改，将原有单击节点呈现与节点相关的多层，改为仅高亮呈现其本身，其他节点和边线的透明度改为0.5即可。

focusNodeAdjacency: function (seriesModel,
 ecModel, api, payload) {

    var data
 = this._model.getData();

    var graph
 = data.graph;

    var dataIndex
 = payload.dataIndex;

    //
 var edgeDataIndex = payload.edgeDataIndex;

    //
 var node = graph.getNodeByIndex(dataIndex);

    //
 var edge = graph.getEdgeByIndex(edgeDataIndex);

    var el
 = data.getItemGraphicEl(dataIndex);

    var dataType
 = el.dataType;

    //
 if (!node && !edge) {

    //  
 return;

    //
 }

    if (!el)
 {

      return;

  }

  if (dataIndex
 !== null &&
 dataType !== 'edge')
 {

    graph.eachNode(function (node)
 {

      fadeOutItem(node,
 nodeOpacityPath, 0.5);

    });

    graph.eachEdge(function (edge)
 {

      fadeOutItem(edge,
 lineOpacityPath, 0.5);

    });

    var node
 = graph.getNodeByIndex(dataIndex);

    fadeInItem(node,
 nodeOpacityPath);

  }

},

    //
 if (node) {

    //  
 fadeInItem(node, nodeOpacityPath);

    //  
 zrUtil.each(node.edges, function (adjacentEdge) {

    //    
 if (adjacentEdge.dataIndex < 0) {

    //      
 return;

    //    
 }

 

    //    
 fadeInItem(adjacentEdge, lineOpacityPath);

    //    
 fadeInItem(adjacentEdge.node1, nodeOpacityPath);

    //    
 fadeInItem(adjacentEdge.node2, nodeOpacityPath);

    //  
 });

    //
 }

 

  //  
 if (edge) {

  //    
 fadeInItem(edge, lineOpacityPath);

  //    
 fadeInItem(edge.node1, nodeOpacityPath);

  //    
 fadeInItem(edge.node2, nodeOpacityPath);

  // 
 }

  //}