【Echarts】基于Echarts4.0修改树图连接线(由曲线转为直角线)

树图连接线曲线改为直角线

前言

Echarts (http://echarts.baidu.com/)是百度公司出品的一个开源制作图标的js插件，可以说是百度不可多得的良心产品了。我写这篇文章的时候是19年的11月。echarts已经出到4.x的版本，想要更深入了解echarts以及下载echarts的话，直接百度就可以去官网或者github上下载了。

问题/需求

直接进入主题，至于要写这篇文章，主要是因为在公司中也会有使用echarts这个插件，并且遇到一个需求就是要将echarts的树图的曲线转为直角线。其实这个问题在2017年就是echarts2.x的时候，当时的树图就是由直角线组成的，但是不知道为什么升级到3.x的时候，连接线就改为了曲线了，并且连连接点也删除了。

解决办法

直接上手，官网上下载echarts4.x的插件，然后导入echarts4.x的插件直接修改源码，主要就是修改两个方法就好，方法并不复杂，并且也可以根据自身的情况进行调整。暂时测试来说的话，对其他图形没有太大的影响。

源码修改

下载echarts.js，打开直接修改源码部分

/*
* 直接ide搜索updateNode这个方法，然后根据情况找到下面的代码
* 由于echarts3.x以及4.x使用的都是曲线，所以我们可以修改当前的渲染方式修改为直角线
* 修改getEdgeShape方法，生成多边形折线的各个点坐标
*/
function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope){
   
   
	~~~
	if (node.parentNode && node.parentNode !== virtualRoot){
   
   
        var edge = symbolEl.__edge;
//      if (!edge) {
   
   
//          edge = symbolEl.__edge = new BezierCurve({
   
   
//              shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
//              style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
//          });
//      }