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+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python通过索引遍历列表的方法
2015/05/04 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
np.random.seed() 的使用详解
2020/01/14 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
2014年大学生就业规划书
2014/04/04 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
英语教师求职信范文
2015/03/20 职场文书
重温入党誓词主持词
2015/06/29 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL