Skip to content

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>

Comments