zoukankan      html  css  js  c++  java
  • Echarts中graph类型的运用求教

    以下是百度Echarts官网上关系图的源码,但是这个关系图的node节点和edge都是静态文件里规定好的,我现在想动态实现,点击其中一个节点A然后新产生一个新节点B,并且有A和B之间的edge,就类似于百度的人物关系图谱那种动态生成,怎么实现啊?求教

    myChart.showLoading();
    $.get('data/asset/data/les-miserables.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    var categories = [];
    for (var i = 0; i < 9; i++) {
    categories[i] = {
    name: '类目' + i
    };
    }
    graph.nodes.forEach(function (node) {
    node.itemStyle = null;
    node.value = node.symbolSize;
    node.label = {
    normal: {
    show: node.symbolSize > 30
    }
    };
    node.category = node.attributes.modularity_class;
    });
    option = {
    title: {
    text: 'Les Miserables',
    subtext: 'Default layout',
    top: 'bottom',
    left: 'right'
    },
    tooltip: {},
    legend: [{
    // selectedMode: 'single',
    data: categories.map(function (a) {
    return a.name;
    })
    }],
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
    {
    name: 'Les Miserables',
    type: 'graph',
    layout: 'none',
    data: graph.nodes,
    links: graph.links,
    categories: categories,
    roam: true,
    label: {
    normal: {
    position: 'right',
    formatter: '{b}'
    }
    },
    lineStyle: {
    normal: {
    curveness: 0.3
    }
    }
    }
    ]
    };

    myChart.setOption(option);
    }, 'xml');

  • 相关阅读:
    Git远程仓库
    Git操作
    Git理论基础
    Git的配置
    什么是Git
    oracle session_cached_cursors 与 open_cursors参数详解及配置语句
    Jersey的Filter详解
    Spring如何自动注入一个接口多个实现实例
    mave常用设置
    Windows系统-删除指定服务
  • 原文地址:https://www.cnblogs.com/penglinjiang/p/5290982.html
Copyright © 2011-2022 走看看