ARTS打卡计划第三周-Share-spring,echart开发统计图的经验

在企业开发过程中，经常需要做一些统计类的报表图形等，对于一些数据类型的，图标呈现的比重会更大。上个月我正好开发了一个剧院统计票数和渠道的系统，其中涉及各个维度的统计和呈现，正好分享下项目开发完成后的收货。我准备从如下几点进行分享。

• 1. 可以使用freemaker去渲染echart图表配置项
• 2. 将所有的sql都放入系统源码结构中
• 3. 可以使用jdbcTemplate去完成一些复杂sql的构建
• 4. 使用第三方的数据结构加速开发

1. 可以使用freemaker去渲染echart图表配置项

一个最简单的echart的柱状图配置项有如下配置：

app.title = '坐标轴刻度与标签对齐';

option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
           

　　页面上要渲染这个图表，一般有3种开发方式：

1、前端写好一些option，后台只用返回data

2、后台返回整个option，使用这个库后台构造：https://github.com/abel533/ECharts

3、使用freemaker构造option。

经过我肉身踩坑，第1种，当图片的option微调时候，要重新发前端代码，很不方便。第2种，看似强大，实际上写过几个图表就发现非常鸡肋，写起来又复杂又慢。第3中才是本文推荐的最佳实践，有点是用freemaker的模板表示option，简单明了，如果对图表模板修改，能实时生效，无需修改前端代码，当然前端也会感激你的。具体的代码，我就不给出来了，只要有了这个思路，保证你事半功倍。

2. 将所有的sql都放入系统源码结构中

这一条，其实有经验的工程师都会这么干。第一个是方便维护所有的sql版本，第二个也相当于一个注释，代码中的sql可能是动态的，不能直接执行，存一份方便调试。

3.可以使用jdbcTemplate去完成一些复杂sql的构建

当然你也可以使用mybaitis，但是mybaitis在面对复杂的逻辑时候，仍然会让你捉襟见肘，你可以考虑直接用代码构造sql，使用jdbcTemplate执行sql，当然你需要注意防止sql注入。

4. 使用第三方的数据结构加速开发

当你代码中频繁出现这样的数据结构Map<String,Map<String,Object>>,实际上在提示你需要使用Guava的table的集合了。table不是线程安全的，是基于hashmap实现的，你需要注意这个问题：http://fengfu.io/2017/07/25/%E4%B8%80%E4%B8%AAHashBasedTable%E5%BC%95%E5%8F%91%E7%9A%84%E6%95%85%E9%9A%9C/。

当然你还可以考虑下这个库，更加方便你做数据处理，https://github.com/npgall/cqengine

转载于:https://www.cnblogs.com/dongqiSilent/p/10813753.html