用echarts绘制流程图

最新推荐文章于 2024-04-17 03:18:52 发布
最新推荐文章于 2024-04-17 03:18:52 发布
阅读量6.4k 收藏 40
点赞数 11
文章标签： 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画工作流（流程图）
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
echarts 画流程图
热门推荐
张音乐的博客
08-01 2万+
先看效果图 标题 //渲染流程图 var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...
ECharts关系图、流程图、导向图(详细示例——满满的注释)
2401_84141337的博客
04-17 2169
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
Echarts学习4_员工流向--桑基图（sankey diagram）
wang_zhenwei的博客
01-10 1万+
员工流向--桑基图（sankey diagram） 巩固一下echarts 制作一份员工流向图 原料，员工花名册、记事本、excel、浏览器 第一步：用员工花名册统计各部门人员数量， COUNTIF函数，应该没有什么难度吧 第二步：节点数据（nodes） 其实就是对应各部门的人数 第三步：连接（links） 各部门之间的隶属关系 第四步：生成“j
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 3478
实现如下，可以横着排竖着排都可以。
echarts绘制流程图
YLiu77的博客
11-02 4153
先上效果图： 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 5918
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 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 6497
先附图： 代码如下： 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"> // 基
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1733
echarts绘制流程图及自定义样式
canvas绘制的流程图
01-03
canvas绘制的流程图 未实现交互 可用于熟悉html5中的canvas
china.js，ECharts绘制地图
11-12
《ECharts绘制地图：以china.js为例》 在信息技术领域，数据可视化是至关重要的工具，它可以帮助我们理解和解析复杂的数据信息。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、...
Echarts：Vue3中使用Echarts，web前端开发流程图
2301_82243078的博客
04-02 602
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
使用echarts的Simple Graph 来画任务流程图
weixin_34364135的博客
10-24 4549
一、引入 ECharts 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 通过 npm 获取 e...
vue3使用echarts绘制地图
qq_43730272的博客
02-27 732
实现效果如下图：【上述代码使用的是可视化社区里的这个。5. 封装echarts【具体封装流程可参考博客】，如有需要自行按需更改即可！
echart流程图-工序及状态
yefeng1308的博客
09-17 2289
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
流程图绘制方法
dms9265的博客
05-31 975
流程图绘制方法-流程图绘制方法备份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】用地图模块做动态流程图2.0（根据后台数据自动均匀排布，且实时更新节点状态）
arminc的博客
08-09 6909
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了，设计到的功能就是可以根据后台数据重新进行位置排布，且实时刷新节点的数据。用ec写出这个效果不难，参考demo1 这个主要是设计到如何根据数据进行重新排布，实时刷数据，这些都是ec插件没有的，需要我们去苦逼手写的。 3.代码： 3.1要知道的： 其实在敲代码前，就应该意识到和后台要的数据是什么样的，要知道我们是用地图模块实现...
echarts+流程图
weixin_44727080的博客
08-22 4441
前言： echarts+流程图 效果图： 实现源码： var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...
pycharm打开文件不全
最新发布
02-14
### PyCharm 打开文件显示不全的解决方案 当遇到PyCharm打开文件显示不全的情况时，可以尝试以下几种方法来解决问题。 #### 方法一：清理缓存并重启IDE 有时IDE内部缓存可能导致文件加载异常。通过清除缓存再启动程序能够有效改善此状况。具体操作路径为`File -> Invalidate Caches / Restart...`,之后按照提示完成相应动作即可[^1]。 #### 方法二：调整编辑器字体设置 如果是因为字体原因造成的内容显示问题，则可以通过修改编辑区内的文字样式来进行修复。进入`Settings/Preferences | Editor | Font`选项卡内更改合适的字号大小以及启用抗锯齿功能等参数配置[^2]。 #### 方法三：检查项目结构配置 对于某些特定场景下的源码视图缺失现象，可能是由于当前工作空间未能正确识别全部模块所引起。此时应该核查Project Structure里的Content Roots设定项是否涵盖了整个工程根目录；必要时可手动添加遗漏部分，并保存变更生效[^3]。 ```python # 示例代码用于展示如何获取当前项目的根路径，在实际应用中可根据需求调用该函数辅助排查问题 import os def get_project_root(): current_file = os.path.abspath(__file__) project_dir = os.path.dirname(current_file) while not os.path.exists(os.path.join(project_dir, '.idea')): parent_dir = os.path.dirname(project_dir) if parent_dir == project_dir: break project_dir = parent_dir return project_dir print(f"Current Project Root Directory is {get_project_root()}") ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值