echarts关系图 笔记（一）

前两天在做一个关系图时，一直报如下异常：

Uncaught TypeError: Cannot set property 'dataIndex' of undefined
    at r.s.update (echarts.min.js:36)
    at t.exports (echarts.min.js:30)
    at i.getInitialData (echarts.min.js:31)
    at init (echarts.min.js:11)
    at Function.a [as superApply] (echarts.min.js:11)
    at init (echarts.min.js:31)
    at i.<anonymous> (echarts.min.js:25)
    at Array.forEach (<anonymous>)
    at f (echarts.min.js:1)

 

问题背景：

异常情况是 一部分数据不提示上述异常，一部分数据会提示上述异常。显然是由于数据原因引起的，对比两者的数据 发现，节点有重复情况，导致了上述异常。经过资料查询了解到 需要为节点 增加 一个 id 属性，切必须是id 属性才行。将每个节点的id 处理成唯一的。在节点关系中，将原来的 由target ，source 指向节点名称name，换成target ，source 指向唯一的 id。因为节点名称name 有重复。

注：上述操作都是在 后端程序中完成。

如下即可是js 代码段实例：

                 //获取employer对象的信息 流入employer的人数和流出employer的人数

        function enterpriseTalentFlowGraph(employer) {
            $.post('你的url', {employer: employer}, function (data) {
                    var graph = data.data;
                    //节点设置
                    graph.nodes.forEach(function (node) {
                        if (node.nodeType == 0) {
                            //为当前节点设置显示图片
                            node.symbol = 'image://../../img/icon-21.png';
                            node.itemStyle = {
                                normal: {
                                    color: "#1aceb3",
                                }
                            };
                            node.label = {
                                normal: {
                                    show: true
                                }
                            };
                        }
                        if (node.nodeType == 1) {
                            node.itemStyle = {
                                normal: {
                                    color: "#1E8BDE",
                                }
                            };
                            node.label = {
                                normal: {
                                    show: false
                                }
                            };
                        }
                        if (node.nodeType == 2) {
                            node.itemStyle = {
                                normal: {
                                    color: "#ED7C30",
                                }
                            };
                            node.label = {
                                normal: {
                                    show: false
                                }
                            };
                        }

                    });

//节点关系设置
                    var employerId = employer + '0';
                    graph.links.forEach(function (link) {
                        if (employerId == link.target) {
                            link.lineStyle = {
                                normal: {
                                    curveness: -0.2,
                                    color: '#1E8BDE',
                                    width: 1//设置线条粗细
                                }
                            }
                        }

                        if (employerId == link.source) {
                            link.lineStyle = {
                                normal: {
                                    curveness: 0.2,
                                    color: '#ED7C30',
                                    width: 1//设置线条粗细
                                }
                            }

                        }
                    });

                    var option = {
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                if (params.dataType == 'edge') {
                                    var source = params.data.source;
                                    var target = params.data.target;
                                    source = source.substring(0, source.length - 1);
                                    target = target.substring(0, target.length - 1);
                                    return '从 ' + source + ' 流出到 ' + target + ' 的人数量为 ' + params.data.value;
                                }
                                else {
                                    return params.name;
                                }
                            }
                        },
                        series: [{
                            type: 'graph',
                            layout: 'none',
                            draggable: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'bottom',
                                    color: '#ffffff'
                                }
                            },
                            //线条边缘图形（箭头）
                            edgeSymbol: ['none', 'arrow'],
                            //线条边缘图形大小
                            edgeSymbolSize: 3,
                            data: graph.nodes,
                            links: graph.links
                        }]
                    };

                    var myChart = echarts.init(document.getElementById('enterpriseTalentFlowGraph'));
                    myChart.setOption(option);
                }
            );
        }