用echarts绘制流程图

这篇具有很好参考价值的文章主要介绍了用echarts绘制流程图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

用echarts绘制流程图,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();
            });
        },

用echarts绘制流程图,echarts,流程图,前端

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文章来源地址https://www.toymoban.com/news/detail-601909.html

<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();
                }
            })

        },

到了这里,关于用echarts绘制流程图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 论文的技术路线流程图如何绘制?

      本文介绍基于 Visio 软件绘制 技术路线图 、 流程图 、 工作步骤图 等的方法。   首先打开 Visio 。我们可以直接选择“ 基本框图 ”进行绘制。   也可以选用一些模板。   本次我们就以“流程图”为例来绘制。   因为要绘制论文的技术路线图,因此各种形状简

    2024年02月05日
    浏览(45)
  • 如何在 XMind 中绘制流程图

    XMind 是专业强大的思维导图软件,由于其结构没有任何限制,很多朋友特别喜欢用它来绘制流程图。禁不住大家的多次询问,今天 XMind 酱就将这简单的流程图绘图方法分享给大家。 在 XMind 中,绘制流程图的主角是「自由主题」和「联系」。它们可以打破思维导图的限制,让

    2024年02月10日
    浏览(50)
  • markdown绘制流程图相关代码片段记录

    有时候会使用typora来绘制一些流程图,进行编码之类的工作,在网络搜集了一些笔记,做个记录,方便日后进行复习,相关的记录如下: 每次作图时,代码以「graph 布局方向」开头,如: TB(Top Bottom)表示从上向下布局,另外三种是 BT LR(Left Right) RL 不同种类的括号对应不

    2024年02月19日
    浏览(49)
  • 推荐两款开源的绘制流程图软件

            目前流程图绘制软件非常多,包括本机安装的、web端的都有,如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的开源免费的流程图绘制软件。 目录 一句话导读 一、draw.io 二、Meta2d.js ​1.为什么使用 2.开发文档 官网:draw.io (drawio.com) 开源

    2024年02月10日
    浏览(56)
  • BPMNJS插件使用及汉化(Activiti绘制流程图插件)

    BPMNJS插件运行最重要的就是需要安装nodejs插件,这 一定要安装和测试好 。 主要是使用npm命令 1.1.1、下载nodejs 下载地址:https://nodejs.org/en  1.1.2、安装nodejs,傻瓜式安装 安装之后在安装目录下创建node_cache和node_global两个目录 如果目录已经存在可以不创建 node_cache:作为缓存路

    2024年02月14日
    浏览(41)
  • Springboot +Flowable,通过代码绘制流程图并设置高亮

    通过代码绘制一张流程图,并设置成高亮。 首先先来看一下绘制出来的效果图,截图如下: 已经执行的节点和连线用红色标记出来,大致上就是这么一个效果。 将一个流程图绘制成图片,相关的 API 在 flowable 中其实都是有提供的,流程图片的绘制,是根据流程的定义来绘制

    2024年02月02日
    浏览(52)
  • Vue使用AntV X6绘制流程图(组态呈现)

    先上几个网址 AntV | 蚂蚁数据可视化 AntV X6 图编辑引擎 AntV X6文档 AntV X6 API AntV X6图表示例 上面是一些用到的网址,先说下我项目中的需求,就是要自己绘制出一个我们想要的图,组态化呈现出来,然后这个图中会有很多节点,每个节点都会有自己的状态 ,状态会实时改变,

    2024年02月06日
    浏览(70)
  • Selenium 学习(0.17)——软件测试之流程图绘制方法

            病假5天,出去野20天,成功错过了慕课网上的期末考试。         害,都怪玩乐太开心了……         反正咱又不指着全靠这个行当来吃饭,错过也就错过了,立的Flag能抢救一下还是要抢救一下吧。【这个其实早都会画了,而且基本也正确,既然是学习,还

    2024年02月03日
    浏览(60)
  • vue3+ts 绘制流程图 vueflow 附代码及效果图

    已完成渲染流程图,自定义模板内容(上下分级),自定义样式,新增节点addRandomNode,点击修改节点nodeClickHandler(从父组件传值) 官网:https://vueflow.dev/guide/node.html#node-template 文档比较复杂,很多想找的方法没法一下就找到需要注意 我装了三个,如果npm安装报错可以试试yarn add

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包