使用Echarts绘制力导向图

桃扇骨 2023-06-12 06:16 10阅读 0赞

### 文章目录 ###

*  使用Echarts绘制力导向图
 *   *  前言
     *  参考文档
     *  绘制力导向图
     *  准备图文件
     *  扩展阅读

# 使用Echarts绘制力导向图 #

## 前言 ##

本文介绍了在VS Code中使用百度Echarts来绘制力导向图（Force-directred graph）。

## 参考文档 ##

*  [https://www.echartsjs.com/zh/tutorial.html][https_www.echartsjs.com_zh_tutorial.html]
 *  [https://www.echartsjs.com/examples/zh/editor.html?c=graph-force][https_www.echartsjs.com_examples_zh_editor.html_c_graph-force]

## 绘制力导向图 ##

在VS Code中安装Live Server插件，用来做本地开发服务器，以解决异步加载图文件（.gexf）时的跨域问题。

准备需要用到的JavaScript文件放入`./dist/`目录下，包括Echarts, JQuery和dataTool：

*  [https://echarts.baidu.com/dist/echarts.min.js][https_echarts.baidu.com_dist_echarts.min.js]
 *  [https://code.jquery.com/jquery-3.4.1.min.js][https_code.jquery.com_jquery-3.4.1.min.js]
 *  [https://raw.githubusercontent.com/apache/incubator-echarts/master/dist/extension/dataTool.min.js][https_raw.githubusercontent.com_apache_incubator-echarts_master_dist_extension_dataTool.min.js]

下载图文件（.gexf）样例放入`./data/`目录下：

*  [http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf][http_echarts.baidu.com_gallery_data_asset_data_les-miserables.gexf]

在项目根目录下创建graph-force.html文件，例如：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        
        <script src="./dist/echarts.min.js"></script>
        
        <script src="./dist/jquery-3.4.1.min.js"></script>
        
        <script src="./dist/dataTool.min.js"></script>
    </head>
    
    <body>
        
        <div id="main" style="width: 1200px;height:800px;"></div>
        <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //app.title = '力引导布局'; myChart.showLoading(); // http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf // https://gephi.org/gexf/format/primer.html $.get('./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.symbolSize = 10; 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: 'Les Miserables', subtext: 'Default layout', top: 'bottom', left: 'right' }, tooltip: { }, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animation: false, series: [ { name: 'Les Miserables', type: 'graph', layout: 'force', data: graph.nodes, links: graph.links, categories: categories, roam: true, label: { normal: { position: 'right' } }, force: { repulsion: 100 } } ] }; myChart.setOption(option); }, 'xml'); </script>
    </body>
    
    </html>

在VS Code中，右键选择grah-force.html，选择Open with Live Server，将graph-force.html部署到Live Server开发服务器上，并在默认浏览器中打开。

如果页面加载有问题，按下`Ctrl` \+ `Shift` \+ `I` 来查看错误信息。

在VS Code中设置自动保存，在修改grap-force.html后，Live Server可以自动刷新页面。

## 准备图文件 ##

除了使用上面的示例图文件（.gexf）外，还可以自己生成图文件，然后通过Echarts进行可视化展示。

方法一：通过[Gephi][]生成图文件  
准备好点数据和边数据的CSV文件，输入到Gephi中，再输出为图文件（.gexf）。Gephi也可以作图的可视化展示。

方法二：通过[networkx][]生成图文件  
通过networkx读取点数据和边数据，再生成图文件（.gexf）。networkx也可以作图的可视化展示。

## 扩展阅读 ##

*  [https://gephi.org/gexf/format/primer.html][https_gephi.org_gexf_format_primer.html]

[https_www.echartsjs.com_zh_tutorial.html]: https://www.echartsjs.com/zh/tutorial.html
[https_www.echartsjs.com_examples_zh_editor.html_c_graph-force]: https://www.echartsjs.com/examples/zh/editor.html?c=graph-force
[https_echarts.baidu.com_dist_echarts.min.js]: https://echarts.baidu.com/dist/echarts.min.js
[https_code.jquery.com_jquery-3.4.1.min.js]: https://code.jquery.com/jquery-3.4.1.min.js
[https_raw.githubusercontent.com_apache_incubator-echarts_master_dist_extension_dataTool.min.js]: https://raw.githubusercontent.com/apache/incubator-echarts/master/dist/extension/dataTool.min.js
[http_echarts.baidu.com_gallery_data_asset_data_les-miserables.gexf]: http://echarts.baidu.com/gallery/data/asset/data/les-miserables.gexf
[Gephi]: https://gephi.org/
[networkx]: https://networkx.github.io/
[https_gephi.org_gexf_format_primer.html]: https://gephi.org/gexf/format/primer.html