效果图
<template>
<div class="steps">
<dse-detail-box :oper-type="operType" name="工单配置流程">
<div class="box">
<div id="main" style="width:1000px;height:400px"></div>
</div>
</dse-detail-box>
</div>
</template>
dse-detail-box为自己的组件,可去掉
<script>
import lcglApi from '@/api/lcgl/lcglApi'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/chart/graph')
export default {
data() {
return {
operType: 'detail',
id: this.$route.query.id,
option: {
title: {
// text: '工单配置流程',
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 80,
roam: true,
tooltip: {
show: false,
},
label: {
show: true,
},
edgeSymbol: ['circle', 'arrow'],
symbol: 'roundRect',
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
data: [
{
name: '开始',
x: 300,
y: 300,
symbol: '',
itemStyle: {
color: '#28cad8',
},
},
],
links: [],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
},
],
},
nodeList: [],
}
},
methods: {
initEacherts() {
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
this.option
// option && myChart.setOption(option)
this.option && myChart.setOption(this.option)
},
// 获取组织机构树
getNodeList() {
let params = this.id
lcglApi
.getNodeList(params)
.then((res) => {
if (res.data.status === 1) {
this.nodeList = res.data.data
// console.log('nodeList', nodeList)
let xNum = 0
this.nodeList.forEach((item, index) => {
xNum = 300 * (index + 2)
this.option.series[0].data.push({
name: item.nodenm,
x: xNum,
y: 300,
})
})
this.option.series[0].data.push({
name: '结束',
x: xNum + 300,
y: 300,
symbol: '',
itemStyle: {
color: '#28cad8',
},
})
this.option.series[0].data.forEach((item, index) => {
this.option.series[0].links.push({
source: this.option.series[0].data[index],
target: this.option.series[0].data[index + 1],
})
})
this.option.series[0].links.pop()
this.option.series[0].links = this.option.series[0].links.map(
(item) => {
return {
source: item.source.name,
target: item.target.name,
}
}
)
// console.log(
// 'this.option.series[0].links',
// this.option.series[0].links
// )
// console.log('this.option.series', this.option.series)
this.initEacherts()
}
})
.catch((err) => {
console.log(err)
})
},
},
mounted() {
// this.initEacherts()
this.getNodeList()
},
}
</script>