echarts人物关系图怎样从数据库中动态输出?

这是静态的源码

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>无标题文档</title>
</head>

<body>
<div id="main" style="height:500px;"></div>
<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js" ></script>
<script>
require.config({
    paths:{
        echarts:'./js'
        }
    });
require(
[
'echarts',
'echarts/chart/force'
],
function(ec){
    var myChart = ec.init(document.getElementById("main"));
    var option = {
        title : {
            text: '人物关系:葛优',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        legend: {
            x: 'left',
            data:['家人','朋友']
        },
        series : [
            {
                type:'force',
                name : "人物关系",
                ribbonType: false,
                categories : [
                    {
                        name: '人物'
                    },
                    {
                        name: '家人'
                    },
                    {
                        name:'朋友'
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                        },
                        linkStyle: {
                            type: 'curve'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                useWorker: false,
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1.1,
                roam: 'move',
                nodes:[
                    {category:0, name: '葛优', value : 5},
                    {category:1, name: '吕行',value : 3},
                    {category:1, name: '葛存壮',value : 3},
                    {category:1, name: '施文心',value : 3},
                    {category:1, name: '葛佳',value : 3},
                    {category:1, name: '贺聪',value : 4},
                    {category:2, name: '白百何',value : 1},
                    {category:2, name: '郑凯',value : 1},
                    {category:2, name: '冯小刚',value : 2},
                    {category:2, name: '宋丹丹',value : 1},
                    {category:2, name: '范冰冰',value : 1},
                    {category:2, name: '徐帆',value : 2},
                    {category:2, name: '陈道明',value : 2},
                ],
                links : [
                    {source : '葛优', target: '贺聪', weight : 5, name: '妻子'},
                    {source : '葛优', target: '葛佳', weight : 4, name: '妹妹'},
                    {source : '葛优', target: '施文心', weight : 6, name: '母亲'},
                    {source : '葛优', target: '葛存壮', weight : 6, name: '父亲'},
                    {source : '葛优', target: '吕行', weight : 3, name: '外甥'},
                    {source : '葛优', target: '陈道明', weight : 2, name: '好友'},
                    {source : '葛优', target: '徐帆', weight : 2, name: '好友'},
                    {source : '葛优', target: '范冰冰', weight : 1, name: '搭档'},
                    {source : '葛优', target: '宋丹丹', weight : 1, name: '搭档'},
                    {source : '葛优', target: '冯小刚', weight : 2, name: '好友'},
                    {source : '葛优', target: '郑凯', weight : 1, name: '搭档'},
                    {source : '葛优', target: '白百何', weight : 1, name: '搭档'}
                ]
            }
        ]
    };
    myChart.setOption(option);
    }
);
</script>
</body>
</html>

怎样将nodes:[]和likes:[]里面的数据从数据库中动态输出?
求源码,最好是PHP的。

1个回答

nodes,likes不就是2个JSON数组或对象数组么。
直接写一个请求,返回这2个数组给前台就好。
然后前台取数组的值到对应的配置项就行了。
怎么查数据,封装成数组,就不说了。

m0_46266360
果粒橘 老哥拼装数组的时候里面的没法弄成name:'某某',只能弄成'name':'某某'但这样生成不出图来
4 个月之前 回复
m0_46266360
果粒橘 如果要画成普通的二维图,坐标该如何表示呢?就是不要一个一个定义的那种
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问