Echarts流程圖——用數據可視化呈現流程

隨着信息時代的到來，數據處理變得越來越重要，數據的處理與展示工具也愈加成熟、分化。Echarts是一款基於JavaScript的開源數據可視化庫，它支持多種圖表類型的繪製，其中流程圖可以用於展示複雜的流程、交互、狀態圖等，讓數據之間的關係如網站表述更加清晰。

一、創建基礎流程圖

Echarts流程圖的API比較簡單，創建這種圖表只需要依照“節點node”與“連接link”兩個主要概念組成。以下給出創建一個簡單流程圖的代碼:

var myChart = echarts.init(document.getElementById('main')); 

var option = {
    title: {
        text: '簡單流程圖'
    },
    tooltip: {},
    series: [{
        type: 'graph',         // 指定圖表類型為流程圖
        data: [                // 使用 nodes: 來定義節點數組
            {id: '0', name: '起始點'}, 
            {id: '1', name: '第一個節點'},
            {id: '2', name: '第二個節點'}
        ],
        links: [               // 使用 links: 來定義連線數組
            {source: '0', target: '1'}, 
            {source: '1', target: '2'}
        ]
    }]
};

myChart.setOption(option); 

代碼解析：數據部分主要由節點數組與連線數組兩部分組成，通過定義id、name等多個參數以及source和target參數來定義節點共性和區別，從而個性化設計不同的圖表展示風格。

二、定製化設置

除了基礎數據設置，Echarts流程圖還支持多種定製化的設置，從文本標籤、字體、顏色、節點尺寸等可以對此種圖表進行細化參數調整，下面給出一些可實際應用的代碼片段

1.節點形狀與標記

可以修改圖表中，節點的形狀和標記方式，如

    series: [{
    type: 'graph',
    layout: 'none',
    data: [
        {name: '開始', x: 100, y: 100, id:0},
        {name: 'A', x: 100, y: 200, id:1},
        {name: 'B', x: 200, y: 200, id:2},
        {name: '結束', x: 200, y: 100, id:3}
    ],
    edges: [
        {source: 0, target: 1, symbol:'arrow',symbolSize: '10', lineStyle: {width: 1,curveness: 0.2}},
        {source: 1, target: 2, symbol:'none', lineStyle: {width: 1, type: 'dashed', curveness: 0.2}},
        {source: 2, target: 3,  symbol:'circle',symbolSize: '10', lineStyle: {width: 1, curveness: 0.2}},
    ],
    edgeSymbol: ['none', 'arrow'],
    edgeSymbolSize: [4, 10]
}]

代碼解析：通過修改symbol屬性，可以更改節點顯示的形狀，如circle表示圓形，arrow方向表示箭頭，none表示無形狀。

2.顏色的設定

在Echarts中，樣式的統一性很重要，可以在series中設置全局的主題色，修改graph中個別樣式

  series: [{
    type: 'graph',
    layout: 'none',
    data: [
        {name: 'A', itemStyle: {color: '#FA8C16'}},
        {name: 'B', itemStyle: {color: '#FA8C16'}},
        {name: 'C', itemStyle: {color: '#7BBFEA'}}
    ],
    links: [{source: 0, target: 1}, {source: 1, target: 2}, {source: 2, target: 0}],
    lineStyle: {
        color: '#ccc'
    }
}]

代碼解析：可通過itemStyle屬性更改節點顯示顏色，在顏色的選擇上參照可視化表格，盡量圖樣式美觀。

3.節點大小調整

節點大小也可以隨時進行微調，如下所示

  series: [{
    type: 'graph',
    layout: 'none',
    data: [
        {id: '0', name: 'node', x: 100, y: 100,size:50},
        {id: '1', name: 'node', x: 500, y: 300, size:150}
    ]
}]

代碼解析：可以在每個節點的基礎上，增加size屬性，通過修改數值實現顯示大小的調整。

三、流程圖的交互性設計

Echarts流程圖也支持交互性設計，可以通過鼠標點擊、拖拽等操作，實現動態呈現、聯動查詢等。以點擊hover效果為例，以下代碼可進行點擊查詢節點信息

 myChart.on('click', function(params){    console.log(params.data);    alert(params.data.name);});

代碼解析：上面代碼通過在圖表上添加myChart.on的監聽事件，實現打印節點信息和彈窗提示的操作。

四、局部的異步加載

現實中的數據連接非常多，通常以關係、網狀、層級等結構呈現出來。Echarts提供了異步加載的方式，即只加載與當前視口相關的數據，循序滑動即可動態加載。給出代碼示例：

var option = {
    series : [
        {
            type : 'graph',
            roam : true,
            layout: 'force',
            symbolSize: 50,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion : 2500,
                edgeLength : 10,
                layoutAnimation : false
            },
            data: graph.nodes,
            links: graph.links
        }
    ]
};

myChart.setOption(option);

// 聚焦當前節點
myChart.dispatchAction({
    type: 'focusNodeAdjacency',
    seriesIndex: 0,
    dataIndex: 0
});

代碼解析：上文示例修改node和link數組後，通過dispatchAction中的focusNodeAdjacency屬性，可以讓圖表鼠標聚焦並實現異步加載。

五、結論

總的來說，使用Echarts流程圖可以有效提供更為清晰的數據展示方式，以及不同展示效果的定製化參數調整，實現材料精挑細選。