echarts之樹形圖改變節點之間連線顏色以及結點的顏色

　　首先來看一下效果圖：

　　

 

 　　首先需要用到echarts的樹形圖組件；

　　思路：首先分別去改變根節點下第一層子節點的顏色以及它們之間的連線顏色。

　　改變一個子節點的顏色之后，再通過遍歷去改變這個子節點下的子節點的顏色，以及他們之間的顏色。

　　需要用到得起就是兩個屬性：

　　　　在data中設置lineStyle是邊的樣式，itemStyle是節點樣式

　　下面貼出js代碼：

　　需要注意的是：改變顏色，因為大致過程是一樣的，只是第一層子節點的名稱，以及要設置的顏色不一樣，其他的沒有任何改變。所以我們提取出來一個方法：function yanse(obj,color)，將兩個變量作為參數傳遞。使用時多次調用函數即可。

　　看上圖，改變過程是（函數執行一次的效果）：先找到股東----->中國林業學院研究院、凌雲、王玉曇。

　　多次調用函數，傳參數即可。

var dom = document.getElementById("main");
var myChart = echarts.init(dom);

myChart.showLoading();
$.get("MessageServlet?method=qiye", function (data) {
    myChart.hideLoading();

    data.children.forEach(function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });    
    var color = "blue";
    yanse(data.children[0],color); color = "red"; yanse(data.children[1],color); color = "green"; yanse(data.children[2],color); color = "yellow"; yanse(data.children[3],color); color = "pink"; yanse(data.children[4],color);
   
   
   
  myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],

                    top: '18%',
                    bottom: '14%',

                    layout: 'radial',

                    symbol: 'emptyCircle',

                    symbolSize: 7,

                    initialTreeDepth: 3,

                    animationDurationUpdate: 750,

                    emphasis: {
                        focus: 'descendant'
                    }
                }
            ]
        });
    });
function yanse(obj,color) { obj.itemStyle = { color : color, borderColor:color }; obj.lineStyle = { color : color, borderColor:color }; //去實現第一層某個子節點下的所有節點 for (var i = 0; i < obj.children.length; i++) { obj.children[i].itemStyle = { color : color, borderColor:color }; obj.children[i].lineStyle = { color : color, borderColor:color }; }
}