ECHARTS 实现graph拖拽自定义增删links

最新推荐文章于 2024-05-24 08:54:16 发布

大圣收了你的神通吧

最新推荐文章于 2024-05-24 08:54:16 发布

阅读量7.5k

点赞数 1

文章标签： echarts HTML

本文链接：https://blog.csdn.net/weixin_40686590/article/details/79936980

版权

这篇博客分享了一个纯前端的DEMO，演示了如何在ECharts中实现Graph图的节点拖拽以及动态增删links（连接线）。博主提供了DEMO的成品展示，并附带了相关代码片段，详细介绍了如何实现这一功能。

摘要由CSDN通过智能技术生成

自己做的一个小DEMO（第一次写）存存的新手不要喷我啊！

ECHARTS网上有拖拽的例子，但始终没有增删LINKS（两点之间的连接线）的DEMO，在这里分享一个自己做的纯前端的DEMO。

成品展示

以下是干货(扒了好多别人的东西)

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<button type="button" id="button">Click Me!</button>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="js/esl/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">

    //以上依赖包必须有，总体设计思想为，本身甘特图不能进行拖拽（设其自带原点为A），我们设置与图中data相同的点（点B）， A点不动
    //B点动，B点变化后改变data、的值，从而逼迫A点从新画图，下图是B点没隐藏这样方便我们看。


    //指定布局相当于FindViewById()
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    //设置点的大小
    var symbolSize = 20;
    //    var positionSource ;
    //   var positionTarget ;
    //没啥用好像
    option = null;
    //var axisData = ['0','1','2','3','4','5','6'];
    //var data = axisData.map(function (item, i) {
    //    return Math.round(Math.random() * 1000 * (i + 1));
    //});
    //设置个个点坐标
    var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40], [10, 0]];
    //设置连接线终点以及起点的位置（排序数值是坐标点在data里的序号）
    var xydata = [[1, 2], [3, 0], [2, 0], [1, 3], [4, 1]]
    //当0时候表示输入起点坐标，其他值输入终点坐标
    var position = 0;
    //起点
    var positionSource;
    //钟点
    var positionTarget;
    //设置判断点击线还是点击点

最低0.47元/天解锁文章

大圣收了你的神通吧

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
ECHARTS 实现graph拖拽自定义增删links

自己做的一个小DEMO（第一次写）存存的新手不要喷我啊！ECHARTS网上有拖拽的例子，但始终没有增删LINKS（两点之间的连接线）的DEMO，在这里分享一个自己做的纯前端的DEMO。成品展示以下是干货(扒了好多别人的东西)&lt;!DOCTYPE html&gt;&lt;html style="height: 100%"&gt;&lt;head&gt; &lt;meta charse...
复制链接

扫一扫