echarts单击节点高亮显示

来源：互联网发布：中秋节数据编辑：程序博客网时间：2024/05/18 03:06

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);
  //  }
  //}

3、结束

经过如下修改，此时你的echarts图便可单击高亮呈现，再次单击便可取消高亮呈现。

阅读全文

0 0