vue使用echarts画流程图

要使用 Echarts 画流程图，可以使用 Echarts 的关系图（graph）来实现。具体步骤如下：

1. 引入 Echarts 库和主题：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

2. 准备容器：

<div id="main" style="width: 100%; height: 600px;"></div>

3. 初始化 Echarts 实例：

var myChart = echarts.init(document.getElementById('main'), 'macarons');

4. 设置 Echarts 的 option：

option = {
    tooltip: {},
    legend: {
        data: ['流程图'],
        show: false
    },
    series: [{
        type: 'graph',
        layout: 'none',
        roam: true,
        symbolSize: 50,
        label: {
            show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            fontSize: 20
        },
        data: [{
            name: '节点1',
            x: 300,
            y: 300
        }, {
            name: '节点2',
            x: 800,
            y: 300
        }, {
            name: '节点3',
            x: 550,
            y: 100
        }, {
            name: '节点4',
            x: 550,
            y: 500
        }],
        // links 表示节点之间的连线
        links: [{
            source: 0,
            target: 1,
            symbolSize: [5, 20],
            label: {
                show: true
            },
            lineStyle: {
                width: 5,
                curveness: 0.2
            }
        }, {
            source: 1,
            target: 2,
            label: {
                show: true
            },
            lineStyle: {
                curveness: 0.2
            }
        }, {
            source: 1,
            target: 3,
            label: {
                show: true
            },
            lineStyle: {
                curveness: 0.2
            }
        }]
    }]
};

myChart.setOption(option);

在以上的代码中，我们使用了 Echarts 的关系图（graph）来实现流程图，通过设置节点（data）和节点之间的连线（links）来实现。同时，我们还可以设置节点和连线的样式、标签等属性来美化流程图。

以上是一个简单的示例，你可以根据实际需求修改节点和连线的数量、位置、样式等属性，来绘制出更加复杂和美观的流程图。