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

 

 

上一篇:echart 柱状图X轴显示不全


下一篇:echart中饼状图的高亮显示。