Zhang_Da_Xin_
Zhang_Da_Xin_
2020-04-29 10:10
采纳率: 57.1%
浏览 652

echarts绘制关系图,是通过Ajax获取后台数据,结果关系图死活显示不出来,救救孩子吧!

前端代码如下

第一个Ajax获取的数据为 Map类型

第二个Ajax获取的数据为 Map,Double>

死活画不出来关系图,救救孩子吧!

var getNodes = function(){
        var result = [];
        var temp = {};
        $.ajax({
            url: "toFPtree2",
            type: "post",
            dataType: "json",
            contentType : "json",
            success : function(data){
                for(var k in data){
                    temp = { name:k, value:data[k]};
                    result.push(temp);
                }
            }
        });
        return result;
    };

    var getLinks = function(){
        var result = [];
        var temp = {};
        $.ajax({
            url: "toFPtree",
            dataType: "json",
            type: "post",
            success : function(data){
                for (var k in data){
                    temp =  {source : k.k, target : k[k], value : data[k]};
                    result.push(temp);
                }
            }
        });
        return result;
    };
    //生成节点所需的数据对象
    var data1 = getNodes().map(function (node) {
        return {
            //x: node.x,
            //y: node.y,
            name: node.name,
            value : node.value,
            symbolSize: node.value//支持度越大,节点越大
        };
    });

    //生成连线所需的数据对象
    var link1 = getLinks().map(function (node) {
        return {
            source: node.source,
            target: node.target,
            value: node.value+'(可信度)',
            label: {
                normal: {
                    show: false,
                    formatter: function (x) {
                        return node.value;
                    }
                }
            },
            lineStyle: {
                normal: {
                    width : 20*(node.value - 0.4),//可信度越高,连线越粗
                    color : 'source'
                }
            }

        };
    });


    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '关联分析结果'
        },
        legend: {
        },

        tooltip: {
        },

        series : [
            {
                type: 'graph',
                layout:'force',//'circular','force'
                focusNodeAdjacency:true,//当鼠标移动到节点上,突出显示节点以及节点的边和邻接节点
                draggable: true,//指示节点是否可以拖动
                roam: true,
                data: getNodes(),
                links: [],
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbol: ['none', 'arrow'],
                edgeSymbolSize: 12,
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 8
                        }
                    }
                },

                force: {
                    repulsion: 50,
                    gravity:0.1,
                    edgeLength: [100,400]
                },
                itemStyle:{
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        shadowBlur: 10,
                        layoutAnimation: true
                    }

                },
                lineStyle: {
                    normal: {
                        curveness: 0.3
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • qq_28199467
    已采纳

    1、先检查你的json是否错误

    2、 把你的json放在官网的实例里面看能不能显示
    如果说在在官网都不能显示效果则说明你的json 是错误的,如果能显示则拷贝他的代码

    在就是你的请求是否是异步的 是否是图表先执行 你的ajax是后执行 则会导致图表没数据

    点赞 评论
  • weixin_44554530
    weixin_44554530 2020-04-29 14:42

    把给表图设值和myChart.setOption(option);放在ajax的success里面就行

    点赞 评论
  • weixin_43842660
    纳路透 2020-04-29 17:33

    PROMISE可以了解一下,新版的jquery都有封装。 异步问题

    点赞 评论
  • DK_ing
    DK_ing 2020-04-30 14:23

    https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
    打log,输出的json在官网上跑下,看有没有报错。

    点赞 评论

相关推荐