echarts --流程图模型
使用echarts可以根据后台传输的数据生成简单的流程图模型
//echarts
forceOption = {
title: {
text: '生产停电两票操作流程',
x:'center',
y:'20',
textStyle:{
fontWeight:'normal',
}
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
textStyle: {
color:'#000'
},
series : [
{
type: 'graph',
tooltip: {
backgroundColor:'skyblue',
// formatter: "{b}
{a} : {c} h "
},
layout: 'none',
symbolSize: 10,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 12
},
}
},
data: [{
name: 'Start',
x: 100,
y: 300,
value:35,
//symbol:'rect', //让节点为矩形显示
symbolSize: 40,//节点的长和宽
itemStyle: {
normal: {
color: '#369'
}
}
}, {
name: '签发',
x: 200,
y: 300,
//symbol:'rect',
symbolSize: 40,
value:45,
itemStyle: {
normal: {
color: '#633'
}
}
}, {
name: '单专业会签',
x: 300,
y: 300,
value:5,
//symbol:'rect',
symbolSize: [40, 40],
itemStyle: {
normal: {
color: '#963'
}
}
}, {
name: '运行接收',
x: 400,
y: 300,
//symbol:'rect',
symbolSize: [40, 40],
value:45,
itemStyle: {
normal: {
color: '#399'
}
}
}, {
name: '运行班许可',
x: 500,
y: 300,
value:25,
//symbol:'rect',
symbolSize: [40, 40],
itemStyle: {
normal: {
color: '#ee5255'
}
}
},
{
name: '运行执行',
x: 600,
y: 300,
value:35,
//symbol:'rect',
symbolSize: [40, 40],
itemStyle: {
normal: {
color: '#399'
}
}
},
{
name: '运行终结工作票',
x: 700,
y: 300,
value:105,
//symbol:'rect',
symbolSize: [40, 40],
itemStyle: {
normal: {
color: '#ee5255'
}
}
},
{
name: 'END',
x: 800,
y: 300,
value:15,
//symbol:'rect',
symbolSize: 40,
itemStyle: {
normal: {
color: '#399'
}
}
},
],
// links: [],
links: [
{
source: 0,
target: 1
},
{
source: 1,
target: 2
},
{
source: 2,
target: 3
},
{
source: 3,
target: 4
},
{
source: 3,
target: 4
},
{
source: 4,
target: 5
},
{
source: 5,
target: 6
},
{
source: 6,
target: 7
},
{
source: 7,
target: 8
},
],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0.2
}
}
}
]
};
var forceChart = echarts.init(document.getElementById('forceChart'));
forceChart.setOption(forceOption);其中 data 的 x 和 y 属性设置图形在页面的偏移量，links 设置节点之间的连接顺序。
效果大致如果所示，这里数据有些许更改。
