主页 / 网络编程 /

jquery使用echarts实现有向图可视化功能示例

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了jquery使用echarts实现有向图可视化功能,结合完整实例形式分析了jquery的echarts.js插件实现有向图可视化相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了jquery使用echarts实现有向图可视化功能。分享给大家供大家参考，具体如下

先来看看效果图

源码如下（force-directed-graph.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"></meta>
<script src="http://cdn.bootcss./echarts/3.2.2/echarts.js"></script>
<script src="http://lib.sinaapp./js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
  function draw(){
    var text = $("#graph-input").val();
    var data = eval(text);
    var graph = data2Graph(data);
    drawGraph(graph);
  }
  function data2Graph(data) {
    var graph = {}
    var vertices = {}
    var links = [];
    for (var i = 0; i < data.length; i++) {
      var s = String(data[i][0]);
      var t = String(data[i][1]);
      var v = data[i][2];
      vertices[s] = s;
      vertices[t] = t;
      links.push({'source' : s, 'target' : t, 'value' : v});
    }
    var nodes = [];
    $.each(vertices, function(k, v) {
      nodes.push({'name' : v, 'value' : v});
    });
    graph['links'] = links;
    graph['data'] = nodes;
    return graph;
  }
  function drawGraph(graph) {
    var myChart = echarts.init(document.getElementById("echarts-main"));
    var option = {
      tooltip: {},
      series : [
        {
          type: 'graph',
          layout: 'force',
          symbolSize: 30,
          edgeSymbol: ['none', 'arrow'],
          data: graph.data,
          links: graph.links,
          roam: true,
          label: {
            normal: {
              show: true,
              formatter: function (e) {
                return e['data']['value'];
              }
            }
          },
          edgeLabel: {
            normal: {
              show: true,
              position: 'middle'
            }
          },
          force: {
            repulsion: 1000,
            edgeLength: 200
          }
        }
      ]
    };
    myChart.setOption(option);
  }
  $(document).ready(function(){
    draw();
    $("#gen-btn").on("click", function(){
      draw();
    });
  });
</script>
</head>
<body>
<p>在下方文本框内输入有向图JSON（[source, target, value]）</p>
<textarea id="graph-input" style="height:210px;width:500px">
[[0,1,10], [1,0,1], [1,2,5], [2,0,5]]
</textarea>
<p><button id="gen-btn">生成力导向图</button></p>
<div id="echarts-main" style="height:320px;width:500px;border:1px dashed;"></div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：JS实现点击下拉列表文本框中出现对应的网址,点 下一篇：如何优雅地在Node应用中进行错误异常处理

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by