用echarts绘制流程图

最新推荐文章于 2025-05-14 10:16:55 发布
最新推荐文章于 2025-05-14 10:16:55 发布
阅读量6.6k 收藏 40
点赞数 11
CC 4.0 BY-SA版权
文章标签： echarts 流程图 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuli0927/article/details/131829543
这段代码展示了如何使用ECharts库创建并初始化两个不同的流程图，分别对应资源申请和资源发布的步骤。每个流程图包含多个节点和线条，节点有不同样式和颜色，线条表示流程连接。在窗口大小改变时，图表会自动调整大小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

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

        },

echarts 画流程图
张音乐的博客
08-01 2万+
先看效果图 标题 //渲染流程图 var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...
canvas绘制的流程图
01-03
canvas绘制的流程图 未实现交互 可用于熟悉html5中的canvas
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1753
echarts绘制流程图及自定义样式
ECharts 快速上手
最新发布
又双叒叕是你的博客
05-14 881
ECharts入门知识概述
echarts+流程图
weixin_44727080的博客
08-22 4465
前言： echarts+流程图 效果图： 实现源码： var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...
ECharts关系图、流程图、导向图(详细示例——满满的注释)
2401_84141337的博客
04-17 2220
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
weixin_44006009的博客
03-22 575
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
echarts绘制流程图
YLiu77的博客
11-02 4173
先上效果图： js代码： // 图标坐标，预先调好每个点的坐标 var nodes = [{ x: 100, y: 950, nodeName: '', svgPath: './Images/tank.png', symbolSize: 80, position: 'inside' }, { x: 300, y: 950, nodeName: '', svgPath: './Images/tank.png',
echars实现全流程图
weixin_51935690的博客
01-08 5991
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 1.vue引入echars 终端下载echarts npm install echarts@4.8.0 --save 2.在main.js中引入 import echarts from "echarts" Vue.prototype.$echarts = echarts; 3.在组件中代码如下(已标注) <template> <div class="server"> &lt
echarts 流程图
yangchuangxyz的博客
04-22 6519
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
使用echarts创建流程图
mermanangel的博客
05-26 1万+
使用echarts创建流程图使用echarts创建流程图 使用echarts创建流程图 为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。 首先创建一个div，为echarts准备一个具备大小的Dom <div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div> <script type="text/javascript"> // 基
vue+ECharts 绘制流程图
05-08
### 在 Vue 中结合 ECharts 绘制流程图 要在 Vue 中使用 ECharts 实现流程图，可以按照以下方式操作： #### 1. 安装依赖 通过 `npm` 或 `yarn` 安装 ECharts 库： ```bash npm install echarts --save ``` 或者...
使用echarts的Simple Graph 来画任务流程图
weixin_34364135的博客
10-24 4561
一、引入 ECharts 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 通过 npm 获取 e...
echarts显示与隐藏
周公淡的博客
08-31 1万+
使用echarts图表时，如果容器div是通过事件控制显示与隐藏的话，那么echart要等要素显示之后，调用resize方法，这样图表才能正确的显示。 先记下，以后再详细的写
echarts画工作流（流程图）
热门推荐
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
echart流程图-工序及状态
yefeng1308的博客
09-17 2312
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 3518
实现如下，可以横着排竖着排都可以。
流程图绘制方法
dms9265的博客
05-31 992
流程图绘制方法-流程图绘制方法备份Created with Raphaël 2.1.0http://www.google.comStarthttp://www.google.comMy operationhttp://www.google.comYesor No?http://www.google.comcatch something...http://www.google.comEndhttp:/
使用echarts画流程图
03-27
### 如何使用 ECharts 绘制流程图 ECharts 是一个强大的可视化库，支持多种图表类型，其中包括关系图、流程图和导向图。以下是关于如何使用 ECharts 绘制流程图的具体方法。 #### 1. 初始化 ECharts 实例 在 Vue 或其他框架中初始化 ECharts 的实例时，可以通过 `this.$echarts` 来调用 ECharts 库[^1]。如果是在纯 HTML 文件中通过 `<script>` 标签引入，则可以直接使用全局变量 `echarts` 进行操作[^2]。 ```javascript // 如果是 Vue 中的实现方式 const myChart = this.$echarts.init(document.getElementById('main')); // 如果是纯 HTML 页面中的实现方式 const myChart = echarts.init(document.getElementById('main')); ``` #### 2. 配置数据结构 为了绘制流程图，需要定义节点（nodes）和边（edges）。每个节点表示流程的一个阶段，而每条边则描述这些阶段之间的连接关系。 ```javascript let option = { series: [{ type: 'graph', // 设置图表类型为 relation graph layout: 'force', // 使用力引导布局算法 data: [ { name: '开始', symbolSize: 50 }, { name: '步骤一', symbolSize: 50 }, { name: '步骤二', symbolSize: 50 }, { name: '结束', symbolSize: 50 } ], edges: [ { source: '开始', target: '步骤一' }, { source: '步骤一', target: '步骤二' }, { source: '步骤二', target: '结束' } ], lineStyle: { color: 'source', curveness: 0.3 }, label: { show: true, position: 'inside' }, force: { repulsion: 100, // 节点间的斥力因子 edgeLength: [100, 200], // 边的两个端点之间的距离 } }] }; ``` 上述配置项解释如下： - **type**: 图表类型设置为 `'graph'` 表示关系图。 - **layout**: 布局方式可以选用 `'circular'` 圆形布局或者 `'force'` 力引导布局。 - **data**: 定义节点数组，其中每个对象包含名称 (`name`) 和大小 (`symbolSize`) 属性。 - **edges**: 描述节点间的关系，指定源节点 (`source`) 和目标节点 (`target`)。 - **lineStyle**: 自定义线条样式，例如颜色和弯曲度。 - **label**: 显示标签并调整其位置。 - **force**: 控制力引导布局的行为参数，如节点排斥力度和边长度范围。 #### 3. 渲染图表 完成选项配置后，将其应用到已创建好的 ECharts 实例上即可渲染出流程图。 ```javascript myChart.setOption(option); ``` --- ### 注意事项 - 确保 DOM 元素存在且具有正确的 ID (如上面例子中的 `main`) 才能正常挂载图表。 - 对于复杂的业务逻辑可能还需要额外处理事件交互等功能扩展。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值