echarts 关系图谱配置示例

配置项实例

 

 option = {
                grid: {
                    left: '3%',
                    right: '40%',
                    top: '30%',
                },
                itemStyle: {
                    normal: {
                        color: '#000',
                    },
                    shadowBlur: 10
                },
                legend: {
                    // data: [/* '生活场景服务', */
                    //     // '-2级',
                    //     // '-1级',
                    //     // '0级',
                    //     // '1级',
                    //     // '2级',
                    //     // '3级',
                    //     "正常用户",
                    //     "不正常用户",
                    //     "危险用户"
                    // ],
                    top: "3%",
                    right: '4%',
                    left: '80%',
                    data: th.legendArr,

                    selected: {
                        // 选中'系列1'
                        // '本人': true,
                    }
                },
                // color:  ["#f2f2f2","#ceffce",'#a2f1b7','#95c5ab','#c48827','#FF5722', '#b83d2f',      ] ,
                // color: ["#1da351", "#d06e2a", "#e2260b", '#6ad28a', '#b83d2f', '#8a6d3b', '#FF5722',],
                series: [{
                    type: 'graph',
                    layout: 'force',
                    animation: false,
                    //symbolSize:45,//节点大小
                    roam: true,//鼠标漫游(是否可以拖动)
                    legendHoverLink:true,
                    focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                    //  symbol:'rect',
                    // draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。
                    lineStyle: {
                        normal: {
                            color: 'source',
                            curveness: 0,
                            type: "dashed",
                            opacity: 0.9,
                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: false,
                            textStyle: {
                                fontSize: 10,
                            },
                            formatter: "{c}"
                        }
                    },
                    label: {
                        normal: {
                            //position: 'right',//节点文字位置
                            formatter: '{b}',
                            show: false,
                            textStyle: {
                                fontSize: 9
                            },
                        }
                    },
                    data: th.dataarr
                    /*  [  {category: 5, name: "15816547842"}]  */,
                    categories: th.categories,// [
                    // {name: '-2级',},
                    // {name: '-1级',},
                    // {name: '0级',},
                    // {name: '1级',},
                    // {name: '2级',},

                    // {name: '正常用户',},
                    // {name: '不正常用户',},
                    // {name: '危险用户',},

                    // ],
                    force: {
                        repulsion: 200,
                        edgeLength: [0, 0], 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
                        gravity: 0.1,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        layoutAnimation:false,
                    },
                    links: th.linksarr
                }],


            };

前端完整脚本，只是vue格式，可简单写成普通脚本

var vm = new Vue({
    el: '#zsvm',
    data: {
        param: {//搜索参数
            mobile: null,
            uid: null,
            idCode: null,
            sonLevel:2,
        },
        echart: null,
        dataarr: [],
        linksarr: [],
        sonMin: 0,//儿子最少多少
        legendArr: [],
        categories: [],
        lengs: [20, 10, 10, 5, 10, 5, 4, 3, 2, 1],
        allMsgJSON: {},
        text: {},
        again: true,
        allMsg: {}

    },
    methods: {

        load: function (level) {//查询
            var th = this;
            th.param.level = level;

            zs_post({
                url: '../../api/consumer/relationSons?_' + $.now(),
                param: th.param,
                success: function (r) {
                    if (r.code != 0) {
                        zs_error(th, r.msg)
                        return;
                    }
                    th.allMsg = r.msg;
                    th.dealData(r.msg);
                }
            })
        },
        dealData: function () {
            // console.log(rs);
            var th = this;
            var rs = th.allMsg;
            var points = rs.points;
            var allRelations = rs.relations;

            th.again = false;
            th.again = true;
            th.linksarr = [];
            th.dataarr = [];
            th.legendArr = [];
            // th.categories=[];
            $("#relationMap").height(window.screen.height*0.4)

            for (i in points) {
                var relation = points[i];
                var len = relation.sonLength;
                if (len == null)
                    len = 0;

                if (len < th.sonMin)
                    continue;

                // var li = relation.level;
                // if (li < 0)
                //     li = -li;
                var one = {
                    id: relation.id,
                    name: relation.name,
                    category: relation.type,//relation.level + "级",
                    symbolSize: (relation.size>50?50:relation.size) + 15,//th.lengs[li]
                }

                th.allMsgJSON[relation.id] = relation;


                if (th.legendArr.indexOf(relation.type) == -1) {
                    th.legendArr.push(relation.type);
                    var colorstr = "#1da351";
                    if (relation.type.indexOf("不正常用户") != -1)
                        colorstr = "#d06e2a";
                    if (relation.type.indexOf("危险用户") != -1)
                        colorstr = "#ec1804";
                    if (relation.type.indexOf("ip") != -1)
                        colorstr = "#0b2f6c";

                    if (relation.type.indexOf("设备") != -1)
                        colorstr = "#1ab5c4";

                    if (relation.type.indexOf("游客") != -1)
                        colorstr = "#aebaba";

                    if (relation.type.indexOf("微信分享未登陆") != -1)
                        colorstr = "#a7e0bd";


                    th.categories.push(
                        {
                            name: relation.type,
                            itemStyle: {color: colorstr}
                        }
                    );
                }
                th.dataarr.push(one);
            }
            th.linksarr = allRelations;

            console.log(th.linksarr, th.dataarr)
            th.drawer()
        },

        drawer: function () {

            var th = this;

            if (this.echart == null)
                this.echart = echarts.init(document.getElementById('relationMap'));

            var myChart = this.echart;
            myChart.showLoading();

            option = {
                grid: {
                    left: '3%',
                    right: '40%',
                    top: '30%',
                },
                itemStyle: {
                    normal: {
                        color: '#000',
                    },
                    shadowBlur: 10
                },
                legend: {
                    // data: [/* '生活场景服务', */
                    //     // '-2级',
                    //     // '-1级',
                    //     // '0级',
                    //     // '1级',
                    //     // '2级',
                    //     // '3级',
                    //     "正常用户",
                    //     "不正常用户",
                    //     "危险用户"
                    // ],
                    top: "3%",
                    right: '4%',
                    left: '80%',
                    data: th.legendArr,

                    selected: {
                        // 选中'系列1'
                        // '本人': true,
                    }
                },
                // color:  ["#f2f2f2","#ceffce",'#a2f1b7','#95c5ab','#c48827','#FF5722', '#b83d2f',      ] ,
                // color: ["#1da351", "#d06e2a", "#e2260b", '#6ad28a', '#b83d2f', '#8a6d3b', '#FF5722',],
                series: [{
                    type: 'graph',
                    layout: 'force',
                    animation: false,
                    //symbolSize:45,//节点大小
                    roam: true,//鼠标漫游(是否可以拖动)
                    legendHoverLink:true,
                    focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                    //  symbol:'rect',
                    // draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。
                    lineStyle: {
                        normal: {
                            color: 'source',
                            curveness: 0,
                            type: "dashed",
                            opacity: 0.9,
                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: false,
                            textStyle: {
                                fontSize: 10,
                            },
                            formatter: "{c}"
                        }
                    },
                    label: {
                        normal: {
                            //position: 'right',//节点文字位置
                            formatter: '{b}',
                            show: false,
                            textStyle: {
                                fontSize: 9
                            },
                        }
                    },
                    data: th.dataarr
                    /*  [  {category: 5, name: "15816547842"}]  */,
                    categories: th.categories,// [
                    // {name: '-2级',},
                    // {name: '-1级',},
                    // {name: '0级',},
                    // {name: '1级',},
                    // {name: '2级',},

                    // {name: '正常用户',},
                    // {name: '不正常用户',},
                    // {name: '危险用户',},

                    // ],
                    force: {
                        repulsion: 200,
                        edgeLength: [0, 0], 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
                        gravity: 0.1,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        layoutAnimation:false,
                    },
                    links: th.linksarr
                }],


            };
            myChart.setOption(option);
            myChart.hideLoading();
            myChart.on('click', function (params) {
                // 控制台打印数据的名称
                var id = params.data.id;
                if (id != undefined) {
                    th.text = th.allMsgJSON[id];
                }
            });

        },
    },
    mounted: function () {
        // this.load();
    }
})

后端查询方案和数据格式请自行设计，建议java和sql分别处理一部分逻辑，整段处理过程建议是sql查询尽量不join， 不建议只用sql(存储过程)处理，不采用读写分离情况下处理复制关系数据将影响其他业务处理，sql设计不好也有死锁的风险，这里主要分享option 配置