标签：radius meta XML hover center draw follow lap 技术分享
1.上次进程可视化由svg实现，本次改用echarts框架实现。
for(var i=0;i<process_num.length;i++){
var name=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
process[name]=new Object();
process[name].name=name;
var strfrom=String(xmlDoc.getElementsByTagName("from")[i].childNodes[0].nodeValue);
process[name].from=strfrom.split(" ");
var strto=String(xmlDoc.getElementsByTagName("to")[i].childNodes[0].nodeValue);
process[name].to=strto.split(" ");
process[name].finish=String(xmlDoc.getElementsByTagName("isfinish")[i].childNodes[0].nodeValue);
process[name].execT=String(xmlDoc.getElementsByTagName("execT")[i].childNodes[0].nodeValue);
process[name].x=String(xmlDoc.getElementsByTagName("startx")[i].childNodes[0].nodeValue);
process[name].y=String(xmlDoc.getElementsByTagName("starty")[i].childNodes[0].nodeValue);
process[name].flag=String(xmlDoc.getElementsByTagName("flag")[i].childNodes[0].nodeValue);
v[name]=new Object();
v[name].x=process[name].x;
v[name].y=process[name].y;
v[name].name=name;
v[name].flag=process[name].flag;
data.push(v[name]);
if(name==‘Father‘){continue;}
var center=[];
center.push(r);
center.push(t);
r+=200;
data2[name]=[ {value:0, name:name+‘ 未执行‘},{value:100, name:‘‘}];
series.push({
name:name,
type:‘pie‘,
radius: [‘5%‘, ‘10%‘],
//zlevel: 999,
avoidLabelOverlap: true,
hoverAnimation:false,
center:center,
size: ‘15‘,
label: {
normal: {
show: true,
color:‘red‘,
size:‘20‘,
position: ‘center‘
},
},
labelLine: {
normal: {
show: true
}
},
data:data2[name]
});
}
series.push( {
type: ‘graph‘,
layout: ‘none‘,
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: [‘circle‘, ‘arrow‘],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data:data,
links:links,
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
});
option = {
title: {
text: ‘进程可视化‘
},
tooltip: {},
animationDurationUpdate: 0,
animationEasingUpdate: ‘quinticInOut‘,
series :series
}for(i in process){
for(j in process[i].to){
if(process[i].name==process[i].to[j]){
break;
}
move[process[i].name+","+process[i].to[j]]={‘flag‘:process[process[i].to[j]].flag,‘startx‘:process[i].x,‘symbolSize‘: 50,‘name‘:process[i].name+","+process[i].to[j],‘x‘:0,‘y‘:0,‘label‘:{show:false},‘total‘:parseFloat(process[process[i].to[j]].x-process[i].x),‘speedx‘:parseFloat(process[process[i].to[j]].x-process[i].x)/process[process[i].to[j]].execT,‘speedy‘:parseFloat(process[process[i].to[j]].y-process[i].y)/process[process[i].to[j]].execT,‘itemStyle‘: {opacity: 0.0}};
route[process[i].name+","+process[i].to[j]]={‘source‘:process[i].name ,‘target‘:process[i].to[j]};
links.push(route[process[i].name+","+process[i].to[j]]);
}
}
setInterval(function(){
for(i in move){
var temp=move[i].name.split(",");
var ff=1;
for(j in move){
var temp2=move[j].name.split(",");
if(temp[1]==temp2[1]&&process[temp2[0]].finish!=1&&process[temp2[0]].flag!=1){
ff=0;
break;
}
}
if(ff==1&&process[temp[1]].finish!=1){
//alert(temp[1]+" "+move[i].speedx+" "+move[i].x);
move[i].x=parseFloat(move[i].x)+parseFloat(move[i].speedx);
//move[i].y=parseFloat(move[i].y)+parseFloat(move[i].speedy);
data2[temp[1]][0].value=move[i].x;
data2[temp[1]][0].name=temp[1]+‘ 执行中‘;
data2[temp[1]][1].value=move[i].total-move[i].x;
}
if(move[i].x>move[i].total){
//route[i].target=process[temp[1]].name;
data2[temp[1]][0].name=temp[1]+‘ 完毕‘;
process[temp[1]].finish=1;
}
}
myChart.setOption(option);
},1000);
</script>
</html>
标签：radius meta XML hover center draw follow lap 技术分享
原文地址：http://blog.51cto.com/13958494/2286012
