如何使用echarts做出一个动态统计图

• 这里需要用到一个插件echarts,可在我博客资源中寻找并免费下载

• 官网地址(选择想要的统计图形效果):https://echarts.apache.org/zh/index.html

• 引入插件相关文件
  

• 首先要先在后台系统部分显示出数据(一个控制器)

• 然后再考虑将这些数据统计图形式图形化处理(一个控制器)

• 此演示一共用到2个控制器

后端部分

后端系统效果图

• 可以通过这里的’分组类型’ 进行统计(比如门店,年月日)
• 这里的数据可以忽略(我数据库数据乱七八糟)
• 这里点击柱状图按钮,即可将这些数据可视化成图形!
  
  

使用到的数据库表结构

• 结算单表 和 门店表
• 一个门店可以有多个结算单,结算单和门店是多对一关系
  

关于传给后台控制器的过滤参数

• 这里grouType默认是’b.name’,意思是后台sql语句默认通过门店来进行分组查询
  

操作前的一些讲解

• 因为显示的数据不是数据库表直接有的,是要通过计算而得出的新的数值
• 所以这里数据返回封装的对象无法用到逆向工程直接已有的实体类
• 有2种方法可以解决
• 一种,新建一个java类作为vo去接收封装数据
• 第二种,直接返回hashMap类型封装,则无需新建一个java类作为vo
• 此演示用第二种方法 hashMap接受封装的数据 返回给到前端
• 所以控制器层,业务层,dao层 也需要自己另外重新建()

显示数据页面之控制器部分

• 这里主要看businessRepoertService.selectRepot(qo),qo作为过滤参数
• 其他业务层方法主要是为了回显过滤查询数据而已
  

业务层方法

• 这里用到的是分页插件,不懂可跳转至:bootstrap分页插件使用
  

使用到的sql部分

• 注意这里resultType是HashMap,因为已经没有可用已有实体类封装,只好出此下策
• 这里where我缩起来了,只是做一些过滤查询不在此篇文章讲解范围内
• 通过前端传过来的分组条件(${groupType}),可以是门店,年月日,来查询各店铺应收金额,优惠金额,实收金额
  

后台显示数据效果图

• 使用以上数据页面之控制器("/list"),跳转至显示数据页面得出以下效果
  
• 开始使用图形统计图,将以上数据图形化!

开搞动态统计图

效果图

js部分代码

• 在官网上拷贝下来,根据需求做更改,此演示是财务报表的显示
• 在前端页面body内 输入以下代码
• 我用的是freemarker模板引擎,通过$ 注入动态数据

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:500px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title:{
            text:'按${groupType}分组统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['总订单数', '总消费金额', '总优惠金额','总实收金额']
        },
        xAxis: [
            {
                type: 'category',
                data: ${groupTypeList},
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '金额(元)',
                min: 0,
                // max: 250,
                // interval: 50,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '数量',
                min: 0,
                // max: 25,
                // interval: 5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '总订单数',
                type: 'line',
                data: ${numberList},
            },
            {
                name: '总消费金额',
                type: 'bar',
                data: ${totalAmountList},
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '总实收金额',
                type: 'bar',
                data: ${payAmountList}
            },
            {
                name: '总优惠金额',
                type: 'bar',
                yAxisIndex: 1,
                data: ${discountAmountTypeList}
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

• 以下演示 此前端js页面中的${} 内的数据如何来

统计图控制器部分

• 数据还是以上演示的数据,但是要将它们抽取出来放进集合中
• js部分接受的是数组,后端传list集合也可以的
• 这里的细节点必须将list集合 toJSONString
• 然后直接返回统计图视图页面(flt)即可