使用echarts创建流程图

使用echarts创建流程图

为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。

首先创建一个div，为echarts准备一个具备大小的Dom

<div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

然后指定图表的配置项和数据

var option = {
				title: {
					text: '流程'
				},
				series: [{
					type: 'graph',
					layout: 'none',
					symbolSize: 100,
					roam: true,
					color: '#6A5ACD',
					label: {
						show: true,
						fontSize: 16,
						color: '#FFF',
						//backgroundColor:'white'
					},
					symbol: 'roundRect',
					edgeSymbol: ['circle', 'arrow'],
					edgeSymbolSize: [4, 10],
					edgeLabel: {
						fontSize: 25
					},

其中，symbol参数可以修改元素的样式，‘roundRect’为圆角矩形，还有’circle’, ‘rect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’这几种样式，也可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI
例如：
symbol:‘image://https://tse3-mm.cn.bing.net/th/id/OIP.EUApg_eTs1xbeOlcQ2HuTAHaHl?pid=Api&rs=1’

edgeSymbol：连线的参数，为了做成流程图的样式，建议设置成带箭头的线的格式，即edgeSymbol: [‘circle’, ‘arrow’]

然后需要对流程图中的每个节点进行设计。

data: [{
							name: 'A',
							x: 100,
							y: 100,
						}, {
							name: 'B',
							x: 100,
							y: 200,
							tooltip: {
								show: true,
								position: 'right',
								textStyle: {
									width: 20
								},
								formatter: function(params) {
									return params.dataType == 'node' ? '鼠标悬停的显示的内容' : '';
								},

							},
						}, 

其中，每一个{}中的内容表示一个节点，name为节点显示的内容，tooltip为鼠标悬停在节点上时显示的内容，如果不设置tooltip，则默认悬停的内容为name的值。
关于tooltip，其中有一项formatter，要进行一下特殊说明。
formatter这个参数是用来设置鼠标悬停时显示的内容的。
如果不做特殊的显示，一般写作：

formatter:'悬停显示的内容'

这种方式下，鼠标悬停到流程节点或者连接流程节点上的线的时候，都会显示对应的内容。
如果只希望鼠标悬停在流程节点时显示内容，而不希望停在线上的时候也显示，可以用文中所写的方法：

formatter: function(params) {
		return params.dataType == 'node' ? '鼠标悬停的显示的内容' : '';

其中dataType 的值只会是 ‘node’ 或者 ‘edge’，表示当前点击在节点是连接线上。
如果只希望鼠标悬停在连接线时显示内容，而不希望停在节点的时候也显示，可以使用如下方法：

formatter: function(params) {
		return params.dataType == 'edge' ? '鼠标悬停的显示的内容' : '';
//或者，尽量选择第一种方式
formatter: function(params) {
		return params.dataType == 'node' ? '' : '鼠标悬停的显示的内容';

如果不想显示鼠标悬停，可以选择将show置为false。

当对节点做完设置后，可以开始设置连接线。

links: [{
						source: 'A',
						target: 'B',
						lineStyle: {
							color: '#473C8B',
							width: 3,
						},

					}, {
						source: 'B',
						target: 'C',
						lineStyle: {
							color: '#473C8B',
							width: 3,
						},
						label: {
							show: true,
							position: 'middle',
							formatter: '有疑问',
							fontSize: 15,
						},
					}, {
						source: 'B',
						target: 'D',
						lineStyle: {
							color: '#473C8B',
							width: 3,
						},
						label: {
							show: true,
							position: 'middle',
							formatter: '完成',
							fontSize: 15
						},
					}]

其中，必须要设置的是source和target，表示连接线的起点和终点。注意，source和target的值必须和节点中的name值一致，否则无法画出线。
如果想要在连接线上面显示内容，可以通过label来进行设置，formatter即为线上显示的内容。
当完成所有节点和连接线的设置后，输入

myChart.setOption(option);

即可显示流程图。

如果想要在流程图中，进行其他操作，如点击节点A，跳转到test.html

myChart.on('click', {
		name: 'A'
	}, function() {
		window.location.href = "test.html"
	});