标签：function 拓扑图 show charts chart myChart dataIndex type 节点

就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。

拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。
参考
https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9
https://echarts.baidu.com/examples/editor.html?c=line-draggable&qq-pf-to=pcqq.group
这两篇文章结合，然后再自己调试出来的。

我这是在用vue项目调试的，所以demo是一个vue文件，echat版本应该是4.2的，不过只要版本不是太低应该都没啥问题

贴下主要的代码：

var option = {
              title: {
                text: '网络拓扑图'
              },
              backgroundColor: "#F5F5F5",
              xAxis: {
                min: 0,
                max: 12,
                show: false,
                type: 'value'
              },
              yAxis: {
                min: 0,
                max: 12,
                show: false,
                type: 'value'
              },
              series: [{
                type: 'graph',
                layout: 'none',
                id:'a',
                // coordinateSystem: 'cartesian2d',
                coordinateSystem: 'cartesian2d',
                edgeSymbol: ['','arrow'],
                // symbolSize: 20,
//                force: {
//                  repulsion: 1000,
//                  edgeLength: [150, 200],
//                  layoutAnimation: false
//                },
                label: {
                  normal: {
                    show: true,
                    position: 'bottom',
                    color: '#12b5d0'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    shadowColor: 'none'
                  }
                },
                xAxis: {
                  min: 0,
                  max: 12,
                  show: false,
                  type: 'value'
                },
                yAxis: {
                  min: 0,
                  max: 12,
                  show: false,
                  type: 'value'
                },
                // edgeSymbolSize: 8,
                draggable:true,
                data: charts.nodes,
                links: charts.links,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: function(item) {
                        return item.data.name
                      }
                    }
                  }
                }
              }, {
                name: 'A',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                edgeSymbol: ['circle', 'arrow'],
                effect: {
                  show: true,
                  trailLength: 0,
                  // constantSpeed: 30,
                  symbol: 'arrow',
                  // color: '#12b5d0',
                  color:'#FF0000',
                  symbolSize: 22
                },
                data: charts.linesData
              }]
            };
            myChart.setOption(option);

            // setTimeout(function () {
              // Add shadow circles (which is not visible) to enable drag.
              myChart.setOption({
                graphic: echarts.util.map(charts.nodes, function (item, dataIndex) {
                  return {
                    type: 'circle',
                    position: myChart.convertToPixel('grid', item.value),
                    shape: {
                      cx: 5,
                      cy: 5,
                      r: 20
                    },
                    invisible: true,
                    draggable: true,
                    ondrag: echarts.util.curry(onPointDragging, dataIndex),
                     onm ousemove: echarts.util.curry(showTooltip, dataIndex),
                     onm ouseout: echarts.util.curry(hideTooltip, dataIndex),
                    z: 100
                  };
                })
              });

              function onPointDragging(dataIndex, dx, dy) {
                var tempV = myChart.convertFromPixel('grid', this.position);
                charts.nodes[dataIndex].value = [tempV[0],tempV[1]];
                // Update data
                myChart.setOption({
                  series: [{
                    id: 'a',
                    data: charts.nodes
                  }]
                });
              }
              function showTooltip(dataIndex) {
                myChart.dispatchAction({
                  type: 'showTip',
                  seriesIndex: 0,
                  dataIndex: dataIndex
                });
              }

              function hideTooltip(dataIndex) {
                myChart.dispatchAction({
                  type: 'hideTip'
                });
              }
            // }, 50);


window.addEventListener('resize',function(){
  myChart.resize();
  myChart.setOption({
    series: [{
      id: 'a',
      data: charts.nodes
    }]
  });
});

还有的节点以及连线的代码参考第一篇文章，我这边的节点图片需要更换下自己项目中对应的图片地址，最好是在src外面层的其他目录下，比如外建一个static目录存放图片

最后附上demo文件下载地址：(原本是想把下载积分改为1最低的，但是现在上传资源时没得设置了，默认为5积分)
https://download.csdn.net/download/u012138137/11136186

标签：function,拓扑图,show,charts,chart,myChart,dataIndex,type,节点
来源： https://blog.csdn.net/u012138137/article/details/89456199

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。