RuoYi +Echarts+MySql 若依存储过程，实现图表可视化

若依框架教程 2021-04-15

4667

“ 若依教程独家分享！点赞+关注，一起从「蒟蒻」变成「大佬」~”

主页面调用类目表，写入主表相关信息，你是这么写的么？

本期内容

RuoYi +Echarts+MySql 存储过程实现图表可视化

1. 存储过程

2. 生成代码

3. Mybatis 配置参考

4. 首页展示

5.项目源码

2 Demo代码实现

神代码微调

1，存储过程

创建 goods 表

create table goods ( 
gid int auto_increment primary key,
 gname varchar(255) null, 
 gxl int(255) null, 
 gprice decimal(10, 2) null 
 );

创建存储过程

create
  definer = root@localhost
       procedure p_test_ctn(OUT outNum double)
  begin
    select sum(gxl* gprice) into outNum 
    from goods
  end;
create
  definer = root@localhost 
       procedure p_test() 
   begin
   select gname,sum( gxl*gprice) as 'zje',gxl 
   from goods group by gname;
   end;

2，生成对应类

按照需要修改/代码生成对应的类，如果不会操作，请参考：

小白都能学会的3分钟搭建框架教程-RUOYI框架教程（一）

3，Mapper调整

创建GoodsMapp接口

List<Goods> getData ();
 void getCtn(Map map);

创建xml

<select id="getData" statementType="CALLABLE"
 useCache="false" resultMap="GoodsResult"> 
   {
     call p_test() 
   }
 </select>
  <select id="getCtn" statementType="CALLABLE"
   useCache="false"> 
   { 
     call p_test_ctn(# {
     outNum,mode=OUT,jdbcType=DOUBLE} 
) 
   } 
</select>
 </mapper>

4，首页展示

自行引入 echarts.js 文件,没有的可以到Gitee中下载此项目源码

<div class="row">
    <div id="mt21tj" class="col-sm-6" style="height: 450px"></div>
</div>


<script type="text/javascript">
    $.when(
        $.getJSON(ctx+'system/goods/getData'),
        $.getJSON(ctx+'system/goods/getCtn')
    ).done(function (dta1,dta2) {
        var myChart = echarts.init(document.getElementById('mt21tj'));
        var dta=dta1[0];
        var tagName=[];
        var tagZje=[];
        var tagGxl=[];
        for(let i = 0;i<dta.length;i++){
            tagName[i]=dta[i].gname;
            tagGxl[i]=dta[i].gxl;
            tagZje[i]=dta[i].zje;
        }
        var option = {
            title: {
                text: '总销量、总金额'+'\n'+'总计: '+dta2[0]
            },
            tooltip: {},
            legend: {
                data: ['总销量', '总金额(元)'],
                verticalAlign: 'middle',
                layout: 'vertical'
            },
            xAxis: {
                data: tagName,
            },
            yAxis: {},
            series: [{
                name: '总销量',
                type: 'bar',
                data: tagGxl
            }, {
                name: '总金额(元)',
                type: 'bar',
                data: tagZje
            }
            ]
        };
        myChart.setOption(option);
    });
</script>

5，项目源码

分享不易，帮忙点个star！！码云地址：

https://gitee.com/HRuinger/HRuinger_0412

若依框架教程

2020.4.15

如果想了解更多若依教程，你也可能对这些感兴趣：

若依系列文章合集（持续更新中）

有意思的技术知识合集（持续更新中）

你点的每个好看，我都认真当成了喜欢

mysql

文章转载自若依框架教程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

RuoYi +Echarts+MySql 若依存储过程，实现图表可视化

评论