力导图——节点平均分布（通过固定节点坐标）

最新推荐文章于 2024-04-04 09:41:52 发布

Jimmy1996

最新推荐文章于 2024-04-04 09:41:52 发布

阅读量3.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript Echarts 前端

本文链接：https://blog.csdn.net/JM491987631/article/details/78013227

版权

力导图——节点平均分布（通过固定节点坐标）

效果图

这里写图片描述

需要的工具包：Echarts.js、force.js (可从Echarts的官网下载)

也可以下载完整的demo

步骤

html模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定节点，子节点平均分布</title>
    <script src="echarts.js"></script>   
    <!--  这里的ecarts.js用的是2.2.7版本的，新版本也是可以的 -->
</head>
<body>

    <div id="chart" style="width: 1000px; height: 600px"></div>  

<!--  这里的div块为图表占位符，id必须要-->           
    <script src="relation_graph.js"></script>   
    <!-- 实现力导图的js-->
</body>
</html>

demo的中force.js的存放路径为：dist/chart/force.js

js模块

require.config({
    paths : {
        echarts : 'dist'   //存放Echarts 的路径  
        //强调，这里用的Echarts.js是2.2.7版本的，新版本的，可能不行。
    }
});

require([ "echarts", "echarts/chart/force"], 
//echarts/chart/force
function(ec) {
   
var myChart = ec.init(document.getElementById('chart'), 'macarons');

最低0.47元/天解锁文章

Jimmy1996

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
力导图——节点平均分布（通过固定节点坐标）

力导图——节点平均分布（通过固定节点坐标）效果图需要的工具包：Echarts.js、force.js (可从Echarts的官网下载)也可以下载完整的demo步骤html模块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定节点，子节点平均分布</title> <script src
复制链接

扫一扫