脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery echarts有向图可视化

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

 更新时间：2019年11月25日 11:55:52   作者：在线疯狂  
这篇文章主要介绍了jquery使用echarts实现有向图可视化功能,结合完整实例形式分析了jquery的echarts.js插件实现有向图可视化相关实现技巧与操作注意事项,需要的朋友可以参考下

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

先来看看效果图：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"></meta>
<script src="http://cdn.bootcss.com/echarts/3.2.2/echarts.js"></script>
<script src="http://lib.sinaapp.com/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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • jquery判断输入密码两次是否相等

    jquery判断输入密码两次是否相等

    这篇文章分别介绍了Jquery框架easyui判断输入密码两次是否相等，以及使用jQuery.validate验证表单中两次密码是否一致的问题，需要的朋友可以参考下
    2015-12-12
  • jQuery+Ajax实现无刷新操作

    jQuery+Ajax实现无刷新操作

    这篇文章主要介绍了jQuery+Ajax实现无刷新操作，分享了采用Ashx+jQuery Ajax实现“无刷新登录”的例子，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 基于jquery实现放大镜效果

    基于jquery实现放大镜效果

    大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下
    2015-08-08
  • jQuery中hover与mouseover和mouseout的区别分析

    jQuery中hover与mouseover和mouseout的区别分析

    这篇文章主要介绍了jQuery中hover与mouseover和mouseout的区别,结合实例分析了jQuery中hover与mouseover和mouseout的区别与使用技巧,需要的朋友可以参考下
    2015-12-12
  • Jquery 快速构建可拖曳的购物车DragDrop

    Jquery 快速构建可拖曳的购物车DragDrop

    拖曳功能早已经成为各个网站吸引用户的一大亮点，那有没有想过如何把拖曳功能应用到电子商务网站的购物车功能模块中呢？
    2009-11-11
  • jquery密码强度校验

    jquery密码强度校验

    这篇文章主要介绍了jquery密码强度校验，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。
    2015-12-12
  • jquery ztree实现右键收藏功能

    jquery ztree实现右键收藏功能

    最近做项目需要使用ztree做一个右键收藏功能，下面小编给大家分享实例代码，需要的朋友参考下吧
    2017-11-11
  • JQuery对ASP.NET MVC数据进行更新删除

    JQuery对ASP.NET MVC数据进行更新删除

    这篇文章主要介绍了JQuery对ASP.NET MVC数据进行更新删除的相关资料,需要的朋友可以参考下
    2016-07-07
  • jQuery关键词说明插件cluetip使用指南

    jQuery关键词说明插件cluetip使用指南

    我们在做web项目的时候，经常会使用到提示效果。html自带的提示效果是label标签的title，但是这个效果过于简单和难看，并且不方便调整样式。今天我偶然发现个jQuery的插件，可以很方便的做出漂亮的提示效果。
    2015-04-04
  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    jQuery实现等比例缩放大图片让大图片自适应页面布局

    遇到大图片将页面容器“撑破”的情况在进行页面布局时会经常遇到吧，在本文将为大家讲述使用jQuery实现按比例缩放大图片，让大图片自适应页面布局
    2013-10-10

最新评论