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


Posted in jQuery onNovember 25, 2019

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

先来看看效果图:

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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
Jquery异步上传文件代码实例
Nov 13 #jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
浅析js封装和作用域
2013/07/09 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
详解Python验证码识别
2016/01/25 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python Http请求json解析库用法解析
2020/11/28 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
中英文自我评价常用句型
2013/12/19 职场文书
党性心得体会
2014/09/03 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
SQL Server中的游标介绍
2022/05/20 SQL Server
vue如何清除浏览器历史栈
2022/05/25 Vue.js