利用echarts的graph做流程图

效果图

<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>