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');

  • 相关阅读:
    rabbitmq
    mysql
    redis
    vue整理
    crawlspider和中间件
    日志等级与请求传参
    Scrapy框架初级篇
    验证码操作
    图片懒加载、selenium&phantomjs
    《信息安全系统设计基础》 第二周学习总结
  • 原文地址:https://www.cnblogs.com/penglinjiang/p/5290982.html
Copyright © 2011-2022 走看看