Zhang_Da_Xin_ 2020-04-29 10:10 采纳率: 0%
浏览 954
已采纳

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

  • 关注

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

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 我这模型写的不对吗?为什么lingo解出来的下面影子价格这一溜少一个变量
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波