echarts 树节点加图片 边框

效果图如下:

修改思路

 1、找到节点创建的方法

2、对于节点是图片类型的，做特殊处理，多加一个外边框

主要代码说明：

a、边框设置

 itemStyle:{// 设置边框的颜色和宽度                     borderColor:"red",                     borderWidth:2                                     }

b、echarts-4.0.js创建节点代码调整

 搜索函数：symbolProto._createSymbol 

 替换为下面代码

symbolProto._createSymbol = function (     symbolType,     data,     idx,     symbolSize,     keepAspect ) {       this.removeAll();

    var color = data.getItemVisual(idx, 'color');

  //如果节点类型是图片的处理      if(symbolType.indexOf("image")>-1){              var tempsymbolType="rect";         var symbolPathCir = createSymbol(             tempsymbolType, -1, -1, 2, 2, color, keepAspect         );          symbolPathCir.attr({             lineWidth: 100,             z2: 100,             culling: true,             scale: getScale(symbolSize)         });         // Rewrite drift method         symbolPathCir.drift = driftSymbol;

        this._symbolType = tempsymbolType;

        this.add(symbolPathCir);                  this._symbolType = tempsymbolType;

        this.add(symbolPathCir);                   var symbolPath = createSymbol(             symbolType, -1, -1, 2, 2, color, keepAspect         );          symbolPath.attr({             lineWidth: 100,             z2: 100,             culling: true,             scale: getScale(symbolSize)         });         // Rewrite drift method         symbolPath.drift = driftSymbol;

        this._symbolType = symbolType;

        this.add(symbolPath);                       }else{         var symbolPath = createSymbol(             symbolType, -1, -1, 2, 2, color, keepAspect         );          symbolPath.attr({             lineWidth: 100,             z2: 100,             culling: true,             scale: getScale(symbolSize)         });         // Rewrite drift method         symbolPath.drift = driftSymbol;

        this._symbolType = symbolType;

        this.add(symbolPath);      }

};

源代码下载：

链接: https://pan.baidu.com/s/17-1mWLbbn0FjRAbn2PbCWw  提取码: k978