1、效果

echart自帶的效果如圖，滑鼠覆蓋到關係邊上時，預設顯示source > target。

修改之後可顯示自定義的任何內容。

2、程式碼

額……其實就是上一篇的程式碼，只不過多了一個tooltip，設定自定義顯示名稱就是在這裡。
也可以參考api裡的tooltip。

$(function() {
    showChart();
});

var myChart;

option = {
    title : {
        text : '示例'
    },
    animationDurationUpdate : 1500,
    animationEasingUpdate : 'quinticInOut'
 
,
    //trigger : 'item' 表示資料項圖形觸發
    //triggerOn : 'mousemove' 滑鼠覆蓋時觸發
    tooltip : {
        trigger : 'item',
        triggerOn : 'mousemove',
        formatter : function(params) {
        //我這裡用不到返回值，因此只有params一個引數
        //params的含義看後文的說明。

        //attribute是我給關係邊自定義的一個引數
        //所以params.data.attribute只有在關係邊裡才存在
 

            if (params.data.attribute) {
            //如果這個資料有attribute引數，那麼返回attribute引數的內容
            //這個內容就是提示時顯示的內容。
                return params.data.attribute;
            } else {
            //否則顯示name引數的內容。
            //在關係圖裡，能進到這裡的資料項，應該只有節點和關係兩種，所以不是關係就只能是節點……
                return params.name;
            }
        }
    },
    series : [ {
        type : 'graph'
 
,
        layout : 'force',
        data : [],
        edges : [],
        label : {
            emphasis : {
                position : 'right',
                show : true
            }
        },
        force : {
            repulsion : 1000
        },
        roam : true,
        focusNodeAdjacency : true,
        lineStyle : {
            normal : {
                width : 0.5,
                curveness : 0.3,
                opacity : 0.7
            }
        },
        draggable : true
    } ]
};

function showChart() {
    myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    $.ajax({
        url : 'echartsDisplay',
        type : 'POST',
        data : "{}",
        dataType : 'json',
        success : function(data) {
            myChart.hideLoading();
            option.series[0].data = data.nodes.map(function(node) {
                return {
                    name : node.name,
                    itemStyle : {
                        normal : {
                            color : node.color
                        }
                    },
                    symbolSize : node.size,
                };
            });
            option.series[0].edges = data.links.map(function(edge) {
                return {
                    source : edge.source,
                    target : edge.target,
                    attribute : edge.value,
                };
            });
            myChart.setOption(option, true);
        },
        error : function(errorMsg) {
            alert("請求資料失敗!");
        }
    });
};

params 是多個系列的資料陣列。其中每項內容格式同上，並且，

{
    componentType: 'series',
    // 系列型別
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 資料名，類目名
    name: string,
    // 資料在傳入的 data 陣列中的 index
    dataIndex: number,
    // 傳入的原始資料項
    data: Object,
    // 傳入的資料值
    value: number|Array,
    // 資料圖形的顏色
    color: string,

}