投资企业持股比例 关系图echarts graph配置项内容和展示

数据差一个

                  
            
            
              var graph ={
　　"data":[
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"广发银行股份有限公司",
　　　　　　"subscribed_capital":"",
　　　　　　"id":"benefit0",
　　　　　　"category":0
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"中国人寿保险股份有限公司",
　　　　　　"subscribed_capital":"672875.6097",
　　　　　　"id":"benefit1",
　　　　　　"category":1
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"中央汇金资产管理有限责任公司",
　　　　　　"subscribed_capital":"",
　　　　　　"id":"benefit2",
　　　　　　"category":2
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"中央汇金投资有限责任公司",
　　　　　　"subscribed_capital":"500000",
　　　　　　"id":"benefit3",
　　　　　　"category":3
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"中国投资有限责任公司",
　　　　　　"subscribed_capital":"82820862.72",
　　　　　　"id":"benefit4",
　　　　　　"category":4
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"国务院1",
　　　　　　"subscribed_capital":"155",
　　　　　　"id":"benefit5",
　　　　　　"category":5
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"中国人寿保险（集团）公司",
　　　　　　"subscribed_capital":"",
　　　　　　"id":"benefit6",
　　　　　　"category":2
　　　　},
　　　　{
　　　　　　"symbol":"circle",
　　　　　　"symbolSize":"60",
　　　　　　"name":"国务院",
　　　　　　"subscribed_capital":"460000",
　　　　　　"id":"benefit7",
　　　　　　"category":3
　　　　}
　　],
　　"links":[
　　　　{
　　　　　　"source":"benefit1",
　　　　　　"id":"43.686%",
　　　　　　"target":"benefit0"
　　　　},
　　　　{
　　　　　　"source":"benefit6",
　　　　　　"id":"68.370%",
　　　　　　"target":"benefit1"
　　　　},
　　　　{
　　　　　　"source":"benefit2",
　　　　　　"id":"0.420%",
　　　　　　"target":"benefit1"
　　　　},
　　　　{
　　　　　　"source":"benefit3",
　　　　　　"id":"100.000%",
　　　　　　"target":"benefit2"
　　　　},
　　　　{
　　　　　　"source":"benefit4",
　　　　　　"id":"100.000%",
　　　　　　"target":"benefit3"
　　　　},
　　　　{
　　　　　　"source":"benefit5",
　　　　　　"id":"100.000%",
　　　　　　"target":"benefit4"
　　　　},
　　　　{
　　　　　　"source":"benefit7",
　　　　　　"id":"100.000%",
　　　　　　"target":"benefit6"
　　　　}
　　]
}
        var option = {
                tooltip : {
                    show : true,   //默认显示
                    showContent:false, //是否显示提示框浮层
                    trigger:'item',//触发类型，默认数据项触发
                    triggerOn:'click',//提示触发条件，mousemove鼠标移至触发，还有click点击触发
                    alwaysShowContent:true, //默认离开提示框区域隐藏，true为一直显示
                    showDelay:0,//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                    hideDelay:200,//浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
                    enterable:false,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
                    position:'right',//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
                    confine:false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
                    transitionDuration:10,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
                    formatter: function (params, ticket, callback) {
                        //判断数据，提供相应的url。
                        var path="";
                        var node=params.data; //当前选中节点数据
                        var category=params.data.category;  //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名
                        if(category==2){ //为jvm 虚拟机各类参数的路径
                            path = "${ctx}/weblogic.do?host=" + node.host + "&port="
                            + node.port + "&username=" + node.username
                            + "&pwd=" + node.pwd; //准备访问路径
                        }else if(category==4){ //为jdbc 数据库的路径
                            path = "${ctx}/oracle.do?host=" + node.host + "&port="
                            + node.port + "&username=" + node.username
                            + "&pwd=" + node.pwd + "&instance="
                            + node.instance; //准备访问路径
                        }





                        if(category==2||category==4){ //当选择端口号与用户名时提示加载
                            return "loading";
                        }else{                   //其他情况显示所属图例以及名称
                            return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
                        }

                    }
                },

                legend : { //=========圖表控件
                    show : false,
                    data : [ {
                        name : '负载',

                        icon : 'circle'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

                    },
                    {
                        name : 'A',

                        icon : 'circle'
                    }, {
                        name : 'B',

                        icon : 'circle'
                    }, {
                        name : 'C',

                        icon : 'circle'
                    },{
                        name : 'D',
                        icon : 'circle'
                    } ]
                },
                series : [ {
                    type : 'graph', //关系图
                    name : "关系结构图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                    layout : 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
                    legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
                    hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
                    coordinateSystem : null,//坐标系可选
                    xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
                    yAxisIndex : 0, //y轴坐标
                    force : { //力引导图基本配置
                        //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                        repulsion : 80,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                        gravity : 0.01,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        edgeLength :160,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                        layoutAnimation : false
                    //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                    },
                    roam : 'scale',//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    nodeScaleRatio : 0,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
                    draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
                    focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                    symbol:'triangle',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）  也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
                    //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
                    //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
                    //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
                    edgeSymbol : [ 'none', 'arrow' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
                    edgeSymbolSize : 12,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
                    itemStyle : {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
						normal : { //默认样式
                            label : {
                                show : true
                            },
                            borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                            borderColor : '#eee', //设置图形边框为淡金色,透明度为0.4
                            borderWidth : 5, //图形的描边线宽。为 0 时无描边。
                            opacity : 1
                        // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    lineStyle : { //==========关系边的公用线条样式。
                        normal : {

                        },
                        emphasis : {//高亮状态

                        }
                    },
                    label : { //=============图形上的文本标签
                        normal : {
                            show : true,//是否显示标签。
                            position : 'inside',//标签的位置。['50%', '50%'] [x,y]
                            textStyle : { //标签的字体样式
                                color : '#fff', //字体颜色
                                fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                                fontFamily : 'sans-serif', //文字的字体系列
                                fontSize : 12, //字体大小
                            }
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    edgeLabel : {//==============线条的边缘标签
                        normal : {
                            show : true
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    //别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
                    //label:标签样式。
                    data :graph.data,
                    categories : [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
                    {
                        name : 'A',
                        symbol : 'circle',
                        label : { //标签样式
                        }
                    }, {
                        name : 'B',
                        symbol : 'circle'
                    }, {
                        name : 'C',
                        symbol : 'circle'
                    }, {
                        name : 'D',
                        symbol : 'circle'
                    }, {
                        name : '用户名',
                        symbol : 'circle'
                    } ],
                    links :graph.links,
                } ]
            };