echarts+流程图

最新推荐文章于 2024-09-25 16:30:06 发布
最新推荐文章于 2024-09-25 16:30:06 发布
阅读量4.3k 收藏 17
点赞数 7
分类专栏： echarts 文章标签： 流程图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44727080/article/details/108169327
版权

前言：

         echarts+流程图

效果图：

实现源码：

var title = [
    // 第零层
    {
        label: '0',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第一层
    {
        label: '1-0',
        warn: 5,
        error: 8,
        value: 5
    },
    {
        label: '1-1',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-2',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-3',
        warn: 5,
        error: 8,
        value: 7
    },
    // 第二层
    {
        label: '2-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-2',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-3',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-4',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第三层
    {
        label: '3-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-2',
        warn: 5,
        error: 8,
        value: 2
    },
];
var colorMap = {
    normal: '#18a849',
    warn: '#FFC125',
    error: '#FF0000',
};

colorFunction = function(obj) {
    if (obj.value < obj.warn) {
        return colorMap.normal;
    } else if (obj.warn <= obj.value && obj.value < obj.error) {
        return colorMap.warn;
    } else if (obj.error <= obj.value) {
        return colorMap.error;
    }
};
//具体的绘制流程图的方法
option = {
    tooltip: {
        trigger: 'item',
        formatter: function(para) {
            if (para.name != 'x' || para.name != 'y') {
                return para.name;
            } else {
                //其他的都正式显示，自己是什么就显示什么。
                return '';
            }
        }
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    textStyle: {
        color: '#000'
    },
    series: [{
        type: 'graph',
        tooltip: {
            backgroundColor: 'skyblue',
            //formatter: "{b} <br/>{a} : {c} h "
        },
        layout: 'none',
        symbolSize: 10,
        roam: false,
        label: {
            normal: {
                show: true,
                position: 'inside',
                //offset: [0,-60],//居上 20
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'BOLD',
                },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            normal: {
                textStyle: {
                    fontSize: 18
                }
            }
        },
        //注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
        data: [
            // 零层
            {
                name: title[0].label,
                x: 300,
                y: 0,
                value: title[0],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[0]),
                    }
                }
            },
            // 一层
            {
                name: title[1].label,
                x: 0,
                y: 200,
                value: title[1],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[1]),
                    }
                }
            },
            {
                name: title[2].label,
                x: 150,
                y: 200,
                value: title[2],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[2]),
                    }
                }
            },
            {
                name: title[3].label,
                x: 350,
                y: 200,
                value: title[3],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[3]),
                    }
                }
            },
            {
                name: title[4].label,
                x: 600,
                y: 200,
                value: title[4],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[4]),
                    }
                }
            },
            // 二层
            {
                name: title[5].label,
                x: 0,
                y: 400,
                value: title[5],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[5]),
                    }
                }
            },
            {
                name: title[6].label,
                x: 150,
                y: 400,
                value: title[6],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[6]),
                    }
                }
            },
            {
                name: title[7].label,
                x: 300,
                y: 400,
                value: title[7],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[7]),
                    }
                }
            },
            {
                name: title[8].label,
                x: 450,
                y: 400,
                value: title[8],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[8]),
                    }
                }
            },
            {
                name: title[9].label,
                x: 600,
                y: 400,
                value: title[9],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[9]),
                    }
                }
            },
            // 三层
            {
                name: title[10].label,
                x: 0,
                y: 600,
                value: title[10],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[10]),
                    }
                }
            },
            {
                name: title[11].label,
                x: 150,
                y: 600,
                value: title[11],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[11]),
                    }
                }
            },
            {
                name: title[12].label,
                x: 450,
                y: 600,
                value: title[12],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[12]),
                    }
                }
            },

            // 一层
            {
                name: '1',
                x: 300,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '2',
                x: 150,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '3',
                x: 0,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '4',
                x: 350,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '5',
                x: 600,
                y: 100,
                symbolSize: 0,
            },
            // 二层
            {
                name: '21',
                x: 0,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '22',
                x: 150,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '23',
                x: 300,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '24',
                x: 350,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '25',
                x: 450,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '26',
                x: 600,
                y: 300,
                symbolSize: 0,
            },
            // 三层
            {
                name: '31',
                x: 0,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '32',
                x: 150,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '33',
                x: 300,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '34',
                x: 450,
                y: 500,
                symbolSize: 0,
            },
        ],
        // links: [],
        //这是点与点之间的连接关系
        links: [
            // 零层
            {
                source: title[0].label,
                target: '1',
            },
            // 一层
            {
                source: '3',
                target: title[1].label,
            },
            {
                source: '2',
                target: title[2].label,
            },
            {
                source: '4',
                target: title[3].label,
            },
            {
                source: '5',
                target: title[4].label,
            },
            // 二层
            {
                source: title[3].label,
                target: '24',
            },
            {
                source: '21',
                target: title[5].label,
            },
            {
                source: '22',
                target: title[6].label,
            },
            {
                source: '23',
                target: title[7].label,
            },
            {
                source: '25',
                target: title[8].label,
            },
            {
                source: '26',
                target: title[9].label,
            },
            // 三层
            {
                source: title[7].label,
                target: '33',
            },
            {
                source: '31',
                target: title[10].label,
            },
            {
                source: '32',
                target: title[11].label,
            },
            {
                source: '34',
                target: title[12].label,
            },

            // 一层
            {
                source: '1',
                target: '2',
                symbol: 'none',
            },
            {
                source: '2',
                target: '3',
                symbol: 'none',
            },
            {
                source: '1',
                target: '4',
                symbol: 'none',
            },
            {
                source: '4',
                target: '5',
                symbol: 'none',
            },
            // 二层
            {
                source: '21',
                target: '22',
                symbol: 'none',
            },
            {
                source: '22',
                target: '23',
                symbol: 'none',
            },
            {
                source: '23',
                target: '24',
                symbol: 'none',
            },
            {
                source: '24',
                target: '25',
                symbol: 'none',
            },
            {
                source: '25',
                target: '26',
                symbol: 'none',
            },
            // 三层
            {
                source: '31',
                target: '32',
                symbol: 'none',
            },
            {
                source: '32',
                target: '33',
                symbol: 'none',
            },
            {
                source: '33',
                target: '34',
                symbol: 'none',
            },
        ],
        //线条的颜色
        lineStyle: {
            normal: {
                opacity: 0.9,
                color: '#53B5EA',
                type: 'dashed',
                width: 1
            }
        }
    }]
};

更多入口

妍崽崽@
关注
专栏目录
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 3143
实现如下，可以横着排竖着排都可以。
echarts 流程图
yangchuangxyz的博客
04-22 6307
先附图： 代码如下： 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地图可视化工具包：省级数据展示与交互
最新发布
weixin_33205138的博客
09-25 1255
本文还有配套的精品资源，点击获取 简介：ECharts是一个功能强大的开源数据可视化库，本压缩包包含了ECharts的地图组件资源，用于展示中国各省市的地理分布数据。用户可以通过使用JSON文件定义的地理坐标和JS脚本处理的交互，将业务数据与地理位置结合，实现直观的数据可视化。同时，ECharts支持自定义地图和多种浏览器，具有良好的兼容性和扩展性，适合构建动态和交互式的地...
用echarts绘制流程图
liuli0927的博客
07-20 4831
当这两个流程图进行切换展示时，一定要使用v-show。
使用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"> // 基
echarts画工作流（流程图）
热门推荐
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
echars实现全流程图
weixin_51935690的博客
01-08 5250
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 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
基于 vue3 + echarts + amap(高德地图) + pinia 开发的大屏可视化项目，支持拖拽布局.zip
01-05
ECharts 是一个由百度开发的开源数据可视化库，支持丰富的图表类型，如柱状图、折线图、饼图等，且具备良好的交互性。在大屏可视化项目中，ECharts是绘制各类数据图表的关键工具，用于将复杂的数据以直观的方式展示...
echarts实现流程图以及分割面板组件
08-06
echarts实现流程图以及分割面板组件
Python Django + Echarts + Sqlite
08-23
Echarts是百度开源的一个数据可视化库，支持丰富的图表类型，如柱状图、折线图、饼图等。在Django项目中，可以将Echarts图表嵌入到HTML模板中，通过JavaScript获取后台提供的数据，然后动态渲染图表。Echarts提供了...
毕业设计 基于python的新冠疫情数据分析系统 request+echarts+layui
06-13
项目为本人的毕业设计 数据来源 实时采集某平台疫情数据 request实现对某平台疫情数据爬虫 线性回归预测分析 flask实现前后端交互 luyui前端页面 echarts实现新冠疫情数据分析 项目不易 多多支持！
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1574
echarts绘制流程图及自定义样式
echart流程图-工序及状态
yefeng1308的博客
09-17 2046
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 1万+
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
weixin_44006009的博客
03-22 445
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
echarts绘制流程图
YLiu77的博客
11-02 3976
先上效果图： 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',
数据可视化高级技术Echarts(桑基图&入门)
m0_63181360的博客
04-15 3873
概述图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。桑基图最明显的特征就是，始末端的分支宽度总和相等，即所有主支宽度的总和应与所有分出去的分支宽度的总和相等，保持能量的平衡。：桑基图可以显示不同节点之间的流量量级，通过箭头的宽度来表示。：桑基图可以使用颜色来编码不同的节点或流动路径，以帮助用户更好地理解和区分不同的实体或类别。选择合适的布局方式，使得节点和箭头的排列有一定的逻辑性。：桑基图可以显示多个节点之间的复杂路径，通过连接不同的节点和箭头来表示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值