使用echarts的Simple Graph 来画任务流程图

最新推荐文章于 2025-07-12 15:41:42 发布

转载

最新推荐文章于 2025-07-12 15:41:42 发布 · 4.5k 阅读

14 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bd00dc86fb9a05d151ce429

文章标签：

#javascript #后端 #webpack #ViewUI

本文介绍了如何在React项目中使用ECharts绘制任务流程图。首先，通过npm安装echarts，然后设置画布，包括准备DOM元素和初始化画布。接着进行数据分析，接收后端的节点和路径数据。计算节点坐标时，根据数据层级和数量确定每个节点的位置。最后，使用echarts的setOption方法绘制图表，并添加节点点击事件以显示详细信息。

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

一、引入 ECharts

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>
复制代码

我是在react项目中直接npm了echarts，所以在入口文件直接按需加载需要使用的Graph图

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入思维图
import  'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
复制代码

二、设置基础画布

1.为画布准备一个dom元素设置宽高

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div

最低0.47元/天解锁文章

200万优质内容无限畅学