echart graph动态添加数据
tips:数据是前台写的假数据
自己写的demo，更改数据后直接就能用
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
var josnarr=[];
var jsonarrlink=[];
for (var i=0;i<3;i++) {
var json={};
json.id=i;
json.name="name"+i;
json.data=json.name+"data"+i;
if(i!=2){
json.rely="name"+(i+1);
}
json.x=i*50+300;
json.y=300;
josnarr.push(json);
}
console.log(josnarr);
for (var i=0;i<3;i++){
var json={};
json.source=josnarr[i].rely;
json.target=josnarr[i].name;
jsonarrlink.push(json);
}
console.log(jsonarrlink);
var jsondata=[];
for(var i=0;i<josnarr.length;i++){
var json={};
json.name=josnarr[i].name;
json.x=josnarr[i].x;
json.y=josnarr[i].y;
jsondata.push(json);
}
console.log(jsondata);
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: jsondata,
// links: [],
links: jsonarrlink,
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>