用echarts绘制流程图
getEchart1() {
echarts.init(document.getElementById('echart1')).dispose();
var chartDom = document.getElementById('echart1');
this.myChart = echarts.init(chartDom);
var charts = {
nodes: [ // 节点
{
name: '开始', value: [0, 500],
label: {
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#7856FF',
color: '#fff',
padding: [8, 5, 7, 5],
}
},
{
name: '查找资源', value: [88, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '资源申请', value: [180, 500],
label: {
borderColor: '#E6E6E6', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '资源提供方审核', value: [300, 500],
label: {
borderColor: '#E6E6E6', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '平台审核', value: [420, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '资源使用', value: [520, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服务', value: [620, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '认证对接', value: [720, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '接口调用', value: [820, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '数据使用', value: [920, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '结束', value: [1000, 500],
label: {
backgroundColor: '#13C2C2',
color: '#fff',
borderRadius: [4, 4, 4, 4],
padding: [10, 8, 10, 8],
},
},
{
name: '文件', value: [520, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '文件下载', value: [800, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '库表', value: [520, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '前置库填写', value: [650, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '生成推送任务', value: [800, 200],
label: {
borderColor: '#E6E6E6', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '数据推送', value: [1000, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
],
linesData: [ // 连线
{ name: '', coords: [[0, 500], [60, 500]] },
{ name: '', coords: [[80, 500], [155, 500]] },
{ name: '', coords: [[180, 500], [250, 500]] },
{ name: '', coords: [[320, 500], [390, 500]] },
{ name: '', coords: [[420, 500], [490, 500]] },
{ name: '', coords: [[520, 500], [600, 500]] },
{ name: '', coords: [[620, 500], [690, 500]] },
{ name: '', coords: [[720, 500], [790, 500]] },
{ name: '', coords: [[820, 500], [890, 500]] },
{ name: '', coords: [[920, 500], [990, 500]] },
{
name: '', coords: [ // 关于折线要分两个方向，第一个方向无symbol
[530, 500],
[530, 710]
],
},
{
name: '', coords: [
[530, 800],
[770, 800]
]
},
{
name: '', coords: [
[800, 800],
[1000, 800]
], symbol: 'none'
},
{
name: '', coords: [
[1000, 800],
[1000, 600]
]
},
{
name: '', coords: [ // 关于折线要分两个方向，第一个方向无symbol
[530, 500],
[530, 300]
]
},
{
name: '', coords: [ // 关于折线要分两个方向，第一个方向无symbol
[530, 200],
[620, 200]
],
},
{
name: '', coords: [ // 关于折线要分两个方向，第一个方向无symbol
[650, 200],
[750, 200]
]
},
{
name: '', coords: [
[800, 200],
[970, 200]
],
},
{
name: '', coords: [
[1000, 200],
[1000, 400]
],
},
]
}
var option = {
xAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
yAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
grid: {
left: '1%',
right: '0',
bottom: 0,
top: 0
},
tooltip: {
show: false,
axisPointer: {
type: "shadow",
},
borderColor: "white",
backgroundColor: "white",
borderWidth: 1,
padding: 0,
textStyle: {
fontSize: 14,
color: '#333',
},
},
series: [
{
type: "graph",
coordinateSystem: "cartesian2d",
symbol: "rect",
// symbolSize: [80, 40],
// edgeSymbol: ['', 'arrow'],
// edgeSymbolSize: [1, 10],
lineStyle: {
normal: {
width: 0,
color: '#387DFF'
}
},
itemStyle: {
color: "rgb(194, 194, 194)",
},
symbolOffset: [10, 0],
force: {
edgeLength: 10,//连线的长度
repulsion: 50 //子节点之间的间距
},
label: {
show: true,
color: '#387DFF', // 节点文字颜色
},
data: charts.nodes
},
{
type: "lines",
polyline: false,
coordinateSystem: "cartesian2d",
lineStyle: {
// type: "dashed",
opacity: 0.5,
width: 1,
color: '#08979C',
},
symbol: ['', 'arrow'],
symbolSize: 10,
label: {
show: true,
position: "middle",
fontSize: 16,
color: '#08979C',
formatter: function (args) {
let val = args.data.name;
var strs = val.split("");
var str = "";
if (args.data.linkView) {
for (var i = 0, s; (s = strs[i++]);) {
str += s;
if (!(i % 15)) str += "\n";
}
return str;
}
},
},
// lineStyle: {
// color: '#65B7E3',
// width: 2
// },
data: charts.linesData,
},
],
};
option && this.myChart.setOption(option);
let chart = this.myChart
window.addEventListener('resize', function () {
chart.resize();
});
},
getEchart2() {
echarts.init(document.getElementById('echart2')).dispose();
var chartDom = document.getElementById('echart2');
this.myChart = echarts.init(chartDom);
var charts = {
nodes: [ // 节点
{
name: '开始', value: [2, 500],
label: {
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#7856FF',
color: '#fff',
padding: [10, 8, 10, 8],
}
},
{
name: '资源注册', value: [150, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '数据', value: [200, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '数据源注册', value: [300, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '数据资产注册', value: [450, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '资源使用', value: [600, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '文件下载', value: [800, 800],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服务', value: [200, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服务注册', value: [300, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服务发布', value: [450, 200],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '平台审核', value: [800, 500],
label: {
borderColor: '#387DFF', // 边框颜色
borderWidth: 1, // 边框宽度
borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '结束', value: [1000, 500],
label: {
backgroundColor: '#13C2C2',
color: '#fff',
borderRadius: [4, 4, 4, 4],
padding: [10, 8, 10, 8],
},
},
],
linesData: [ // 连线
{ name: '', coords: [[0, 500], [120, 500]] },
{ name: '', coords: [[130, 500], [770, 500]] },
{ name: '', coords: [[790, 500], [980, 500]] },
{ name: '', coords: [[155, 500], [155, 800]] , symbol: 'none'},
{ name: '', coords: [[155, 800], [180, 800]] },
{ name: '', coords: [[200, 800], [270, 800]] },
{ name: '', coords: [[300, 800], [410, 800]] },
{ name: '', coords: [[450, 800], [570, 800]] },
{ name: '', coords: [[620, 800], [770, 800]] },
{ name: '', coords: [[810, 800], [810, 560]] },
{ name: '', coords: [[155, 800], [155, 200]] , symbol: 'none'},
{ name: '', coords: [[155, 200], [180, 200]] },
{ name: '', coords: [[210, 200], [270, 200]] },
{ name: '', coords: [[300, 200], [420, 200]] },
{ name: '', coords: [[460, 200], [810, 200]] , symbol: 'none'},
{ name: '', coords: [[810, 200], [810, 457]] },
]
}
var option = {
xAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
yAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
grid: {
left: '1%',
right: '0',
bottom: 0,
top: 0
},
tooltip: {
show: false,
axisPointer: {
type: "shadow",
},
borderColor: "white",
backgroundColor: "white",
borderWidth: 1,
padding: 0,
textStyle: {
fontSize: 14,
color: '#333',
},
},
series: [
{
type: "graph",
coordinateSystem: "cartesian2d",
symbol: "rect",
// symbolSize: [80, 40],
// edgeSymbol: ['', 'arrow'],
// edgeSymbolSize: [1, 10],
lineStyle: {
normal: {
width: 0,
color: '#387DFF'
}
},
itemStyle: {
color: "rgb(194, 194, 194)",
},
symbolOffset: [10, 0],
force: {
edgeLength: 10,//连线的长度
repulsion: 50 //子节点之间的间距
},
label: {
show: true,
color: '#387DFF', // 节点文字颜色
},
data: charts.nodes
},
{
type: "lines",
polyline: false,
coordinateSystem: "cartesian2d",
lineStyle: {
// type: "dashed",
opacity: 0.5,
width: 1,
color: '#08979C',
},
symbol: ['', 'arrow'],
symbolSize: 10,
label: {
show: true,
position: "middle",
fontSize: 16,
color: '#08979C',
formatter: function (args) {
let val = args.data.name;
var strs = val.split("");
var str = "";
if (args.data.linkView) {
for (var i = 0, s; (s = strs[i++]);) {
str += s;
if (!(i % 15)) str += "\n";
}
return str;
}
},
},
// lineStyle: {
// color: '#65B7E3',
// width: 2
// },
data: charts.linesData,
},
],
};
option && this.myChart.setOption(option);
let chart = this.myChart
window.addEventListener('resize', function () {
chart.resize();
});
},当这两个流程图进行切换展示时，一定要使用v-show
flow(index) {
this.flowIndex = index;
this.$nextTick(() => {
if (index == 1) {
this.getEchart2();
} else if (index == 0) {
this.getEchart1();
}
})
},