前两天在做一个关系图时,一直报如下异常:
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);
}
);
}