Echart是可視化圖表庫之一，能夠將數(shù)據(jù)用圖表的形式表現(xiàn)出來。而流程圖則是Echart中常見的一種圖表類型，可以幫助我們更加直觀地展示流程。

然而在實際的項目中，我們往往需要展示的流程數(shù)據(jù)并不止一條，因此需要找到一種方法來處理多條json數(shù)據(jù)，使之可以在Echart中展示。

//假設我們有兩條流程數(shù)據(jù)json，分別是FlowData1和FlowData2
var FlowData1 = [
{
"name":"起點",
"type":"start",
"left":"50",
"top":"50",
"symbolSize":50,
"id":"1"
},
{
"name":"節(jié)點1",
"type":"node",
"left":"300",
"top":"50",
"symbolSize":50,
"id":"2"
},
{
"name":"節(jié)點2",
"type":"node",
"left":"300",
"top":"250",
"symbolSize":50,
"id":"3"
},
{
"name":"終點",
"type":"end",
"left":"550",
"top":"150",
"symbolSize":50,
"id":"4"
},
{
"source":"1",
"target":"2",
"type":"line"
},
{
"source":"2",
"target":"3",
"type":"line"
},
{
"source":"3",
"target":"4",
"type":"line"
}
];
var FlowData2 = [
{
"name":"起點",
"type":"start",
"left":"50",
"top":"50",
"symbolSize":50,
"id":"5"
},
{
"name":"節(jié)點A",
"type":"node",
"left":"300",
"top":"50",
"symbolSize":50,
"id":"6"
},
{
"name":"節(jié)點B",
"type":"node",
"left":"300",
"top":"250",
"symbolSize":50,
"id":"7"
},
{
"name":"終點",
"type":"end",
"left":"550",
"top":"150",
"symbolSize":50,
"id":"8"
},
{
"source":"5",
"target":"6",
"type":"line"
},
{
"source":"6",
"target":"7",
"type":"line"
},
{
"source":"7",
"target":"8",
"type":"line"
}
];

我們可以通過以下方法將多條json數(shù)據(jù)進行處理：

var option = {
series : []
};
var flow1 = {
type: 'graph',
layout: 'none',
data: FlowData1,
lineStyle: {
normal: {
color: '#2f4554'
}
}
};
var flow2 = {
type: 'graph',
layout: 'none',
data: FlowData2,
lineStyle: {
normal: {
color: '#fcce10'
}
}
};
option.series.push(flow1);
option.series.push(flow2);
myChart.setOption(option);

上述代碼中，我們分別定義了flow1和flow2兩個對象，分別存儲了FlowData1和FlowData2的信息，同時通過option.series.push()方法將兩個對象存儲到同一個series數(shù)組中，最后通過myChart.setOption()方法將option配置賦值到Echart圖表中。這樣就能夠在一個Echart圖表中同時展示多條流程數(shù)據(jù)了。