使用Echarts绘制力导向图

最新推荐文章于 2025-06-23 11:37:51 发布

原创

最新推荐文章于 2025-06-23 11:37:51 发布 · 6.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #力导向图 #gxef

本文详细介绍了如何在Visual Studio Code中利用Echarts库绘制力导向图，包括安装Live Server解决跨域问题，引入所需JavaScript文件，加载.gexf图文件，以及通过Gephi和networkx生成自定义图文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

使用Echarts绘制力导向图

使用Echarts绘制力导向图

前言

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

参考文档

https://www.echartsjs.com/zh/tutorial.html
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://code.jquery.com/jquery-3.4.1.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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- https://echarts.baidu.com/dist/echarts.js -->
    <!-- https://echarts.baidu.com/dist/echarts.min.js -->
    <script src="./dist/echarts.min.js"></script>
    <!-- https://code.jquery.com/jquery-3.4.1.min.js -->
    <script src=