首页 前端知识 用echarts绘制流程图

用echarts绘制流程图

2024-03-15 10:03:37 前端知识 前端哥 26 392 我要收藏

 

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

<div class="flow">
                <div class="flow_title">
                    <div class="flow_tabbar" @click="flow(0)"
                        :class="[flowIndex == 0 ? 'flow_title_act' : 'flow_title_act1']">资源申请流程</div>
                    <div class="flow_tabbar" @click="flow(1)"
                        :class="[flowIndex == 1 ? 'flow_title_act' : 'flow_title_act1']">资源发布流程</div>
                </div>
                <div class="flow_con" v-show="flowIndex == 0">
                    <div id="echart1">
                    </div>
                </div>
                <div class="flow_con" v-show="flowIndex == 1">
                    <div id="echart2"></div>
                </div>
            </div>
flow(index) {
            this.flowIndex = index;
            this.$nextTick(() => {
                if (index == 1) {
                    this.getEchart2();
                } else if (index == 0) {
                    this.getEchart1();
                }
            })

        },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3848.html
标签
流程图
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!