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

自己做的一个小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;
    //设置判断点击线还是点击点
    var ok = 1;
    //删除数组的索引位置
    var del;
    //用于定义点与点之间的连线（根据官方的DEMO写的所以好多东

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

悦读