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流程图可以有效提供更为清晰的数据展示方式，以及不同展示效果的定制化参数调整，实现材料精挑细选。