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

tangjin

作者

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

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"></meta>
<scriptsrc="http://cdn.bootcss.com/echarts/3.2.2/echarts.js"></script>
<scriptsrc="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<scripttype="text/javascript">
functiondraw(){
vartext=$("#graph-input").val();
vardata=eval(text);
vargraph=data2Graph(data);
drawGraph(graph);
}
functiondata2Graph(data){
vargraph={}
varvertices={}
varlinks=[];
for(vari=0;i<data.length;i++){
vars=String(data[i][0]);
vart=String(data[i][1]);
varv=data[i][2];
vertices[s]=s;
vertices[t]=t;
links.push({'source':s,'target':t,'value':v});
}
varnodes=[];
$.each(vertices,function(k,v){
nodes.push({'name':v,'value':v});
});
graph['links']=links;
graph['data']=nodes;
returngraph;
}
functiondrawGraph(graph){
varmyChart=echarts.init(document.getElementById("echarts-main"));
varoption={
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){
returne['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>
<textareaid="graph-input">
[[0,1,10],[1,0,1],[1,2,5],[2,0,5]]
</textarea>
<p><buttonid="gen-btn">生成力导向图</button></p>
<divid="echarts-main"></div>
</body>
</html>

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

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