记录改改直接拿来用的echarts force layout

最新推荐文章于 2024-03-21 17:12:00 发布

patricia_xiao

最新推荐文章于 2024-03-21 17:12:00 发布

阅读量1.8k

点赞数 2

分类专栏：工具文章标签： html javascript echarts

本文链接：https://blog.csdn.net/pku1200012850/article/details/78261754

版权

工具专栏收录该内容

5 篇文章 0 订阅

订阅专栏

其实echarts自由度不是很大的科学可视化还是老老实实用D3比较妥帖

不过案例倒是挺多的 (https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-graph)

学习成本基本是零

基本上我改了改这个例子就拿来直接用了

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = 'Force Layout';

myChart.showLoading();
$.get('influence_data.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    var categories = [
      {name: 'Horror'},
      {name: 'Romance'},
      {name: 'Both'},
      {name: 'None'}
    ];
    graph.links.forEach(function (link) {
        link.lineStyle.normal.width = 2 * Math.sqrt(link.lineStyle.normal.width)
    });
    graph.nodes.forEach(function (node) {
        node.symbolSize = 10 * Math.sqrt(node.symbolSize);
        node.value = node.symbolSize;
        node.category = node.attributes.modularity_class;
        // Use random x, y
        node.x = node.y = null;
        node.draggable = true;
    });
    option = {
        title: {
            text: 'Social Influence',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            // data: categories.map(function (a) {
            //     return a.name;
            // })
            data: categories.map(function (a) {
                return {
                  name: a.name,
                  icon: 'circle'
                  /*icon: {
                    name: 'circle'//'roundRect'
                  }*/
                };
            }),
            show: false
        }],
        animation: false,
        series : [
            {
                name: 'Les Miserables',
                type: 'graph',
                layout: 'force',
                data: graph.nodes,
                links: graph.links,
                edgeSymbol: ['none', 'arrow'], //['circle', 'arrow'],
                edgeSymbolSize: 10,
                categories: categories,
                roam: true,
                label: {
                    normal: {
                        position: 'right'
                    }
                },
                force: {
                    repulsion: 120, // 100
                    gravity: 0.01, //0.1,
                    edgeLength: 30,
                    layoutAnimation: true
                }
            }
        ]
    };

    myChart.setOption(option);
}, 'xml');;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

至于gexf怎么生成看贫尼之前的碎碎念

你要是没我这么懒对样式要求不多的话也许这个就够用吧

对了虽然我觉得大家都已经知道

但是还是多废话两句

直接打开这个html （假设名字是graph-force.html）是跑不出数据来的，你需要python的httpserver

打开terminal (或者command line, whatever)，cd 到包含这个html的目录底下，输入

python -m SimpleHTTPServer

即可在chrome输入url

http://localhost:8000/graph-force.html

然后就能看到图

不谢