RUOYI 框架教程 13| 若依 RuoYi +Echarts+MySql 存储过程，实现图表可视化

Java_若依框架教程

关注

发布于: 2021 年 07 月 14 日

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

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

本期内容

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>