echarts自定义节点名称和关系名称

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,

}