echarts力导向关系图

实现一个简单的echarts关系图
1、引入echarts3.0.js
2、给echarts创建一个dom空间

<div id="main" style="width=1000px;height:600px;"></div>

3、初始化echarts

  var myChart = echarts.init(document.getElementById("main"), "macarons");

第一个参数是dom容器，第二个参数是主题配置，配置主题需要引入主题js，官网有下
4、设置option参数

var option={
 title: {
            text:"echarts关系图demo"
            },
             series: [{
                itemStyle: {                
                    normal: {
                        label: {
                            position: 'top',
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle: {
                            brushType: 'both',
                            borderColor: 'rgba(255,215,0,0.4)',
                            borderWidth: 1
                        },
                        linkStyle: {
                            normal: {
                                color: 'source',
                                curveness: 0,
                                type: "solid"
                            }
                        }
                    },

                },
                     force:{
                    initLayout: 'circular',//初始布局
                    repulsion:100,//斥力大小
                },

                animation: false,
                name:"",
                type: 'graph',//关系图类型
                layout: 'force',//引力布局
                roam: true,//可以拖动
              //  legendHoverLink: true,//是否启用图例 hover(悬停) 时的联动高亮。
               // hoverAnimation: false,//是否开启鼠标悬停节点的显示动画
               // coordinateSystem: null,//坐标系可选
              //  xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
              //  yAxisIndex: 0, //y轴坐标 
               // ribbonType: true,
                useWorker: false,
                minRadius: 15,
                maxRadius: 25,
                gravity: 1.1,

                scaling: 1.1,
                nodes: [{ "id": 0, "category": 0, "name": "深水稻【60D】", "label": "深水稻【60D】", "symbolSize": 40, "ignore": false, "flag": true },
                    { "id": "1", "category": 1, "name": "Deep减water rice", "label": "Deep减water rice", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": "r", "category": 1, "name": "D浮稻", "label": "D浮稻", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": "f", "category": 1, "name": "D淀稻", "label": "D淀稻", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": "k", "category": 1, "name": "S1水稻", "label": "S1水稻", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": 5, "category": 2, "name": "S2不育系 ", "label": "S2不育系 ", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": 6, "category": 2, "name": "S2不育系", "label": "S2不育系", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": 7, "category": 2, "name": "S2人为土", "label": "S2人为土", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": 8, "category": 2, "name": "S2 土壤类型(人为）", "label": "S2 土壤类型(人为）", "symbolSize": 20, "ignore": true, "flag": true },
                    { "id": 9, "category": 2, "name": "S2稻", "label": "S2稻", "symbolSize": 20, "ignore": true, "flag": true }
                ],//数据内容
                //接收格式均为json对象数组
                [{ "source": 1, "target": 0, "name": "EnglishName" },
                    { "source": 2, "target": 0, "name": "equipment" },
                    { "source": 3, "target": 0, "name": "equipment" },
                    { "source": 5, "target": "k", "name": "superClass" },
                    { "source": 6, "target": 4, "name": "superClass" },
                    { "source": 7, "target": 4, "name": "superClass" },
                    { "source": 8, "target": 4, "name": "superClass" },
                    { "source": 9, "target": 4, "name": "superClass" },
                    { "source": 4, "target": 0, "name": "superClass" }
                ]//关系对应
            } ]            
}
   myChart.setOption(option);//将option添加到mychart中

这样一个简单的关系图就OK了