温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在jquery中使用echarts实现可视化

发布时间:2021-03-23 15:13:11 来源:亿速云 阅读:423 作者:Leah 栏目:web开发

如何在jquery中使用echarts实现可视化?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<!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" > [[0,1,10], [1,0,1], [1,2,5], [2,0,5]] </textarea> <p><button id="gen-btn">生成力导向图</button></p> <div id="echarts-main" ></div> </body> </html>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI