SpringBoot+AntV实现一次前后端交互渲染多个饼状图

最新推荐文章于 2024-04-21 10:01:06 发布
最新推荐文章于 2024-04-21 10:01:06 发布
阅读量1.1k 收藏
点赞数
分类专栏： SpringBoot 前端那些骚操作 文章标签： antV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92831513
版权

场景

效果

SpringBoot+AntV实现饼状图中的花瓣图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169

在上面已经实现一个饼状图的基础上实现一次前后端交互实现四个饼状图。

实现

注：

1.点击菜单跳转到当前页面在js中控制等待页面加载完成之后会ajax请求一次后台数据，首次给页面上的四个图表赋值。

2.选择页面上的时间条件后，传递到后台，后台根据时间查询数据并返回给前台，

3.所以在搜索按钮的点击事件中需要先将原来的div元素清空，然后再重新使用新获取的数据取渲染四个图表。

完整js部分代码：

$(document).ready(function() {
 
    var createTime = $("#createTime").val();
  
    // 指定四个图表的数据源
    var names1=[];
    var values1=[];
    var names2=[];
    var values2=[];
    var names3=[];
    var values3=[];
    var names4=[];
    var values4=[];
 
   //ajax请求后台图表数据
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处
        data:JSON.stringify({"createTime":""+createTime+""}),
        contentType: "application/json",
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                debugger
                //获取后台传递过来的四个图表的数据
                var list1 = result["list1"]
                var list2 = result["list2"]
                var list3 = result["list3"]
                var list4 = result["list4"]
                //遍历取值
                for(var i=0;i<list1.length;i++){
                    names1.push(list1[i].name);
                    values1.push(list1[i].value);
                }
                for(var i=0;i<list2.length;i++){
                    names2.push(list2[i].name);
                    values2.push(list2[i].value);
                }
                for(var i=0;i<list3.length;i++){
                    names3.push(list3[i].name);
                    values3.push(list3[i].value);
                }
                for(var i=0;i<list4.length;i++){
                    names4.push(list4[i].name);
                    values4.push(list4[i].value);
                }
//********************************设置图表1数据源***********************************************************************************
                var data1 = [{
                    type: names1[0],
                    value:values1[0],
                    percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[1],
                    value:values1[1],
                    percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[2],
                    value:values1[2],
                    percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])
                }, {
                    type: names1[3],
                    value:values1[3],
                    percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])
                }
                ];
//********************************设置图表2数据源***********************************************************************************
                var data2 = [{
                    type: names2[0],
                    value:values2[0],
                    percent:values2[0]/(values2[0]+values2[1]+values2[2]+values2[3])
                }, {
                    type: names2[1],
                    value:values2[1],
                    percent:values2[1]/(values2[0]+values2[1]+values2[2]+values2[3])
                }, {
                    type: names2[2],
                    value:values2[2],
                    percent:values2[2]/(values2[0]+values2[1]+values2[2]+values2[3])
                }, {
                    type: names2[3],
                    value:values2[3],
                    percent:values2[3]/(values2[0]+values2[1]+values2[2]+values2[3])
                }
                ];
//********************************设置图表3数据源***********************************************************************************
                var data3 = [{
                    type: names3[0],
                    value:values3[0],
                    percent:values3[0]/(values3[0]+values3[1]+values3[2]+values3[3])
                }, {
                    type: names3[1],
                    value:values3[1],
                    percent:values3[1]/(values3[0]+values3[1]+values3[2]+values3[3])
                }, {
                    type: names3[2],
                    value:values3[2],
                    percent:values3[2]/(values3[0]+values3[1]+values3[2]+values3[3])
                }, {
                    type: names3[3],
                    value:values3[3],
                    percent:values3[3]/(values3[0]+values3[1]+values3[2]+values3[3])
                }
                ];
//********************************设置图表4数据源***********************************************************************************
                var data4 = [{
                    type: names4[0],
                    value:values4[0],
                    percent:values4[0]/(values4[0]+values4[1]+values4[2]+values4[3])
                }, {
                    type: names4[1],
                    value:values4[1],
                    percent:values4[1]/(values4[0]+values4[1]+values4[2]+values4[3])
                }, {
                    type: names4[2],
                    value:values4[2],
                    percent:values4[2]/(values4[0]+values4[1]+values4[2]+values4[3])
                }, {
                    type: names4[3],
                    value:values4[3],
                    percent:values4[3]/(values4[0]+values4[1]+values4[2]+values4[3])
                }
                ];
//**********************饼状图中的花瓣图相关设置****************************************************************
                // 根据比例，获取两点之间的点
                function getPoint(p0, p1, ratio) {
                    return {
                        x: (1 - ratio) * p0.x + ratio * p1.x,
                        y: (1 - ratio) * p0.y + ratio * p1.y
                    };
                }
                var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7
                // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
                var sliceNumber = 0.005;
                // 自定义 other 的图形，增加两条线
                G2.Shape.registerShape('interval', 'platelet', {
                    draw: function draw(cfg, container) {
                        cfg.points[1].y = cfg.points[1].y - sliceNumber;
                        cfg.points[2].y = cfg.points[2].y - sliceNumber;
                        var centerPoint = {
                            x: cfg.points[3].x,
                            y: (cfg.points[2].y + cfg.points[3].y) / 2
                        };
                        centerPoint = this.parsePoint(centerPoint);
                        var points = this.parsePoints(cfg.points);
                        var path = [];
                        var tmpPoint1 = getPoint(points[0], points[3], pointRatio);
                        var tmpPoint2 = getPoint(points[1], points[2], pointRatio);
                        path.push(['M', points[0].x, points[0].y]);
                        path.push(['L', tmpPoint1.x, tmpPoint1.y]);
                        path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);
                        path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);
                        path.push(['L', points[1].x, points[1].y]);
                        path.push(['z']);
                        return container.addShape('path', {
                            attrs: {
                                fill: cfg.color,
                                path: path
                            }
                        });
                    }
                });
//********************************绘制并渲染图表1***********************************************************************************
                var chart1 = new G2.Chart({
                    container: 'main1',
                    forceFit: true,
                    height: 400,
                    width:600,
                    padding: [40, 0]
                });
                chart1.source(data1, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }});
                chart1.coord('theta');//设置坐标系类型
                chart1.tooltip({
                    showTitle: false,//关闭标题
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                });
                chart1.intervalStack().position('value').color('type').shape('platelet')
                .label('type', {
                    formatter: function formatter(value, type) {
                        return type.point.type + ': ' + type.point.value;
                    }
                })
                .tooltip('type*percent*value', function(type, percent,value) {
                    percent = percent * 100 + '%';
                    return {
                        type: type,
                        percent: percent,
                        value:value
                    };
                });
                chart1.render();
//********************************绘制并渲染图表2***********************************************************************************
                var chart2 = new G2.Chart({
                    container: 'main2',
                    forceFit: true,
                    height: 400,
                    width:600,
                    padding: [40, 0]
                });
                chart2.source(data2, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }});
                chart2.coord('theta');//设置坐标系类型
                chart2.tooltip({
                    showTitle: false,//关闭标题
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                });
                chart2.intervalStack().position('value').color('type').shape('platelet')
                    .label('type', {
                        formatter: function formatter(value, type) {
                            return type.point.type + ': ' + type.point.value;
                        }
                    })
                    .tooltip('type*percent*value', function(type, percent,value) {
                        percent = percent * 100 + '%';
                        return {
                            type: type,
                            percent: percent,
                            value:value
                        };
                    });
                chart2.render();
//********************************绘制并渲染图表3***********************************************************************************
                var chart3 = new G2.Chart({
                    container: 'main3',
                    forceFit: true,
                    height: 400,
                    width:600,
                    padding: [40, 0]
                });
                chart3.source(data1, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }});
                chart3.coord('theta');//设置坐标系类型
                chart3.tooltip({
                    showTitle: false,//关闭标题
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                });
                chart3.intervalStack().position('value').color('type').shape('platelet')
                    .label('type', {
                        formatter: function formatter(value, type) {
                            return type.point.type + ': ' + type.point.value;
                        }
                    })
                    .tooltip('type*percent*value', function(type, percent,value) {
                        percent = percent * 100 + '%';
                        return {
                            type: type,
                            percent: percent,
                            value:value
                        };
                    });
                chart3.render();
//*******************************绘制并渲染图表4***********************************************************************************
                var chart4 = new G2.Chart({
                    container: 'main4',
                    forceFit: true,
                    height: 400,
                    width:600,
                    padding: [40, 0]
                });
                chart4.source(data1, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }});
                chart4.coord('theta');//设置坐标系类型
                chart4.tooltip({
                    showTitle: false,//关闭标题
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                });
                chart4.intervalStack().position('value').color('type').shape('platelet')
                    .label('type', {
                        formatter: function formatter(value, type) {
                            return type.point.type + ': ' + type.point.value;
                        }
                    })
                    .tooltip('type*percent*value', function(type, percent,value) {
                        percent = percent * 100 + '%';
                        return {
                            type: type,
                            percent: percent,
                            value:value
                        };
                    });
                chart4.render();
          
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
          
        }
    });//end ajax
  
    //置空按钮事件
    $("#resetBtn").click(function () {
        $("#searchCondition input").each(function () {
            $(this).val("");
        })
        $("#searchCondition select").each(function () {
            $(this).val("");
        })
    });
    //搜索按钮事件
    $("#searchBtn").click(function () {
       
        //清除之前渲染的图表
        $("#main1").empty();
        $("#main2").empty();
        $("#main3").empty();
        $("#main4").empty();
        var createTime = $("#createTime").val();
    
        // 指定图表的配置项和数据
        var names1=[];
        var values1=[];
        var names2=[];
        var values2=[];
        var names3=[];
        var values3=[];
        var names4=[];
        var values4=[];
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/wmsLogisticMonitoring/EcharsShow",    //请求发送到dataActiont处
            data:JSON.stringify({"createTime":""+createTime+""}),
            contentType: "application/json",
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    var list1 = result["list1"]
                    var list2 = result["list2"]
                    var list3 = result["list3"]
                    var list4 = result["list4"]
                    for(var i=0;i<list1.length;i++){
                        names1.push(list1[i].name);
                        values1.push(list1[i].value);
                    }
                    for(var i=0;i<list2.length;i++){
                        names2.push(list2[i].name);
                        values2.push(list2[i].value);
                    }
                    for(var i=0;i<list3.length;i++){
                        names3.push(list3[i].name);
                        values3.push(list3[i].value);
                    }
                    for(var i=0;i<list4.length;i++){
                        names4.push(list4[i].name);
                        values4.push(list4[i].value);
                    }
//********************************图表1***********************************************************************************
                    var data1 = [{
                        type: names1[0],
                        value:values1[0],
                        percent:values1[0]/(values1[0]+values1[1]+values1[2]+values1[3])
                    }, {
                        type: names1[1],
                        value:values1[1],
                        percent:values1[1]/(values1[0]+values1[1]+values1[2]+values1[3])
                    }, {
                        type: names1[2],
                        value:values1[2],
                        percent:values1[2]/(values1[0]+values1[1]+values1[2]+values1[3])
                    }, {
                        type: names1[3],
                        value:values1[3],
                        percent:values1[3]/(values1[0]+values1[1]+values1[2]+values1[3])
                    }
                    ];
//********************************图表2***********************************************************************************
                    var data2 = [{
                        type: names2[0],
                        value:values2[0],
                        percent:values2[0]/(values2[0]+values2[1]+values2[2]+values2[3])
                    }, {
                        type: names2[1],
                        value:values2[1],
                        percent:values2[1]/(values2[0]+values2[1]+values2[2]+values2[3])
                    }, {
                        type: names2[2],
                        value:values2[2],
                        percent:values2[2]/(values2[0]+values2[1]+values2[2]+values2[3])
                    }, {
                        type: names2[3],
                        value:values2[3],
                        percent:values2[3]/(values2[0]+values2[1]+values2[2]+values2[3])
                    }
                    ];
//********************************图表3***********************************************************************************
                    var data3 = [{
                        type: names3[0],
                        value:values3[0],
                        percent:values3[0]/(values3[0]+values3[1]+values3[2]+values3[3])
                    }, {
                        type: names3[1],
                        value:values3[1],
                        percent:values3[1]/(values3[0]+values3[1]+values3[2]+values3[3])
                    }, {
                        type: names3[2],
                        value:values3[2],
                        percent:values3[2]/(values3[0]+values3[1]+values3[2]+values3[3])
                    }, {
                        type: names3[3],
                        value:values3[3],
                        percent:values3[3]/(values3[0]+values3[1]+values3[2]+values3[3])
                    }
                    ];
//********************************图表4***********************************************************************************
                    var data4 = [{
                        type: names4[0],
                        value:values4[0],
                        percent:values4[0]/(values4[0]+values4[1]+values4[2]+values4[3])
                    }, {
                        type: names4[1],
                        value:values4[1],
                        percent:values4[1]/(values4[0]+values4[1]+values4[2]+values4[3])
                    }, {
                        type: names4[2],
                        value:values4[2],
                        percent:values4[2]/(values4[0]+values4[1]+values4[2]+values4[3])
                    }, {
                        type: names4[3],
                        value:values4[3],
                        percent:values4[3]/(values4[0]+values4[1]+values4[2]+values4[3])
                    }
                    ];

                    // 根据比例，获取两点之间的点
                    function getPoint(p0, p1, ratio) {
                        return {
                            x: (1 - ratio) * p0.x + ratio * p1.x,
                            y: (1 - ratio) * p0.y + ratio * p1.y
                        };
                    }
                    var pointRatio = 0.7; // 设置开始变成圆弧的位置 0.7
                    // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
                    var sliceNumber = 0.005;
                    // 自定义 other 的图形，增加两条线
                    G2.Shape.registerShape('interval', 'platelet', {
                        draw: function draw(cfg, container) {
                            cfg.points[1].y = cfg.points[1].y - sliceNumber;
                            cfg.points[2].y = cfg.points[2].y - sliceNumber;
                            var centerPoint = {
                                x: cfg.points[3].x,
                                y: (cfg.points[2].y + cfg.points[3].y) / 2
                            };
                            centerPoint = this.parsePoint(centerPoint);
                            var points = this.parsePoints(cfg.points);
                            var path = [];
                            var tmpPoint1 = getPoint(points[0], points[3], pointRatio);
                            var tmpPoint2 = getPoint(points[1], points[2], pointRatio);
                            path.push(['M', points[0].x, points[0].y]);
                            path.push(['L', tmpPoint1.x, tmpPoint1.y]);
                            path.push(['Q', points[3].x, points[3].y, centerPoint.x, centerPoint.y]);
                            path.push(['Q', points[2].x, points[2].y, tmpPoint2.x, tmpPoint2.y]);
                            path.push(['L', points[1].x, points[1].y]);
                            path.push(['z']);
                            return container.addShape('path', {
                                attrs: {
                                    fill: cfg.color,
                                    path: path
                                }
                            });
                        }
                    });
//********************************图表1***********************************************************************************
                    var chart1 = new G2.Chart({
                        container: 'main1',
                        forceFit: true,
                        height: 400,
                        width:600,
                        padding: [40, 0]
                    });
                    chart1.source(data1, {
                        percent: {
                            formatter: function formatter(val) {
                                val = val * 100 + '%';
                                return val;
                            }
                        }});
                    chart1.coord('theta');//设置坐标系类型
                    chart1.tooltip({
                        showTitle: false,//关闭标题
                        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                    });
                    chart1.intervalStack().position('value').color('type').shape('platelet')
                        .label('type', {
                            formatter: function formatter(value, type) {
                                return type.point.type + ': ' + type.point.value;
                            }
                        })
                        .tooltip('type*percent*value', function(type, percent,value) {
                            percent = percent * 100 + '%';
                            return {
                                type: type,
                                percent: percent,
                                value:value
                            };
                        });
                    chart1.render();
//********************************图表2***********************************************************************************
                    var chart2 = new G2.Chart({
                        container: 'main2',
                        forceFit: true,
                        height: 400,
                        width:600,
                        padding: [40, 0]
                    });
                    chart2.source(data2, {
                        percent: {
                            formatter: function formatter(val) {
                                val = val * 100 + '%';
                                return val;
                            }
                        }});
                    chart2.coord('theta');//设置坐标系类型
                    chart2.tooltip({
                        showTitle: false,//关闭标题
                        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                    });
                    chart2.intervalStack().position('value').color('type').shape('platelet')
                        .label('type', {
                            formatter: function formatter(value, type) {
                                return type.point.type + ': ' + type.point.value;
                            }
                        })
                        .tooltip('type*percent*value', function(type, percent,value) {
                            percent = percent * 100 + '%';
                            return {
                                type: type,
                                percent: percent,
                                value:value
                            };
                        });
                    chart2.render();
//********************************图表3***********************************************************************************
                    var chart3 = new G2.Chart({
                        container: 'main3',
                        forceFit: true,
                        height: 400,
                        width:600,
                        padding: [40, 0]
                    });
                    chart3.source(data1, {
                        percent: {
                            formatter: function formatter(val) {
                                val = val * 100 + '%';
                                return val;
                            }
                        }});
                    chart3.coord('theta');//设置坐标系类型
                    chart3.tooltip({
                        showTitle: false,//关闭标题
                        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                    });
                    chart3.intervalStack().position('value').color('type').shape('platelet')
                        .label('type', {
                            formatter: function formatter(value, type) {
                                return type.point.type + ': ' + type.point.value;
                            }
                        })
                        .tooltip('type*percent*value', function(type, percent,value) {
                            percent = percent * 100 + '%';
                            return {
                                type: type,
                                percent: percent,
                                value:value
                            };
                        });
                    chart3.render();
//********************************图表4***********************************************************************************
                    var chart4 = new G2.Chart({
                        container: 'main4',
                        forceFit: true,
                        height: 400,
                        width:600,
                        padding: [40, 0]
                    });
                    chart4.source(data1, {
                        percent: {
                            formatter: function formatter(val) {
                                val = val * 100 + '%';
                                return val;
                            }
                        }});
                    chart4.coord('theta');//设置坐标系类型
                    chart4.tooltip({
                        showTitle: false,//关闭标题
                        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{type}({value}): {percent}</li>'
                    });
                    chart4.intervalStack().position('value').color('type').shape('platelet')
                        .label('type', {
                            formatter: function formatter(value, type) {
                                return type.point.type + ': ' + type.point.value;
                            }
                        })
                        .tooltip('type*percent*value', function(type, percent,value) {
                            percent = percent * 100 + '%';
                            return {
                                type: type,
                                percent: percent,
                                value:value
                            };
                        });
                    chart4.render();
                  
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
              
            }
        });
      
   
    });
    }

});//刷新方法结束

 

霸道流氓气质
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SpringBoot2+Vue+AntV前后端分离开发项目实战
04-10
适用人群所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7
SpringBoot+AntV实现饼状图中的花瓣图
BADAO_LIUMANG_QIZHI的博客
06-19 1260
场景 效果 简介 Anv官网： http://antv.alipay.com/zh-cn/g2/3.x/index.html G2是可视化图形语法。 G2的API文档： https://www.yuque.com/antv/g2-docs/api-g2 实现 安装 即可以通过脚本下载将脚本下载到本地也可以直接引入在线资源。 <!-- 引入在线资源 --> &...
antv g6 摸索总结—新手入门
热门推荐
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
基于Spring Boot+Ant Design Vue开发，接私活必备支付系统！【免费领源码】
最新发布
m0_68103666的博客
04-21 341
是一套适合互联网企业使用的开源支付系统，支持多渠道服务商和普通商户模式。已对接微信支付，支付宝，云闪付官方接口，支持聚合码支付。
antvG6绘制树形图踩坑记录（自定义节点等功能）
Mr__proto__的博客
02-24 2182
antvg6 树状图 vue2
antv X6基于vue3+Ts实现线和节点的tooltip
furfur-jiang的博客
07-19 4474
antv X6基于vue3+Ts实现线和节点的tooltip
SpringBoot+Security+Vue前后端分离开发权限管理系统
06-19
等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring?Boot2MVC框架?开发的一站式解决方案Spring?Security5?认证和授权框架MyBatisPlus...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...
基于Vue3+ts+AntV X6实现的流程图编辑器
10-17
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用pinia统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可...
SpringBoot2+Spring Security+Vue+ElementUI+蚂蚁金服AntV
04-10
适用人群所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士提供完整的课程源代码，前端 后端点击视频观看，在右侧的【课件】中下载，所有代码都是线下班级运行很多次额，请放心购买。 课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7
开源支付系统，助你快速开发支付功能
码农也有屠龙刀
03-28 1086
项目介绍 Jeepay是一套适合互联网企业使用的开源支付系统，支持多渠道服务商和普通商户模式。已对接微信支付，支付宝，云闪付官方接口，支持聚合码支付。 Jeepay使用Spring Boot和Ant Design Vue开发，集成Spring Security实现权限管理功能，是一套非常实用的web开发框架。 项目体验 Jeepay支付流程体验：https://www.jeequan.com/demo/jeepay_cashier.html Jeepay运营平台和商户系统演体验：https://www.j
AntV L7 快速入门示例
woaimx_1314的博客
05-30 1379
L7 引擎还提供了丰富的可视化效果和交互功能，包括热力图、等高线图、鼠标交互等，可以帮助用户更好地理解和分析地理空间数据。L7 官网：蚂蚁地理空间数据可视化 | AntV (antgroup.com)L7 API文档：场景 Scene | L7 (antgroup.com)L7 官方示例：所有图表 | L7 (antgroup.com)L7 官方教程：简介 | L7 (antgroup.com)
vue前端+后端生成图表（饼状图）
小白
06-29 3489
表连接要使用注解的（一对多，多对一，多对多） controller @RequestMapping("/pieChart") //饼状图 public String pieChart(Model model){//跳转主页 return "PieChart"; } @RequestMapping("getpieChart") @ResponseBody public JsonResult ge
antdvue走马灯一页显示多张图片的效果
xuxiangyu827的博客
04-12 3163
antdvue实现走马灯轮播图一页显示多张图片
在JSP页面中轻松实现数据饼图
为理想而奋斗
11-30 3888
制做可调整的边界　　图A中的饼状图形有一边界，如何能改变边界的大小呢？可以先定义int border = 10，然后计算边界内面积的大小而实现： Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border);　　x_pie和
圆圈统计图html,Html5饼图绘制实现统计图的方法
weixin_39697143的博客
05-31 409
Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果：这个图是动态生成的，根据传入的比例参数(数组)，来动态绘制饼图。饼图的大小也是根据高度来动态调整的。全部代码如下：Canvas测试//绘制饼图function drawCircle(canvasId, data_arr, color_arr,...
基于vue2+element-ui+antv x6实现的流程图编辑器
05-30
很好的问题！ChitGPT可以回答你的问题。基于vue2+element-ui+antv x6实现的流程图编辑器是一种基于Web技术的流程图编辑工具，它可以帮助用户轻松地创建和编辑各种流程图，包括流程图、组织结构图、状态图等。该编辑器具有简洁明了的界面，可以方便地拖拽、连接和编辑各种图形元素，同时支持多种样式和布局选项。通过使用这个编辑器，用户可以快速地创建出高质量的流程图，提高工作效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值