H_jsen 2016-07-14 08:21 采纳率: 0%
浏览 3943
已采纳

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条回答 默认 最新

  • 微风吹过的夏天2016 2016-07-14 08:40
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？