图表库ECharts介绍

开发一个信息系统，报表模块是必不可少的，尤其是对于甲方管理人员来说，看的就是汇总、结果、趋势、各种维度的数据展现，所以图表类的开发非常重要，直接影响到甲方买单人对系统价值的关键评估。

01.Canvas

HTML5出世以后，带来了一个<canvas>标签，基于canvas使用JavaScript在网页上绘制图像，画布是一个矩形区域，我们可以控制其每一个像素。

02.ECharts

2016年开始关注一款叫《ECharts》的图表库，是基于html5 Canvas的。能够快速让你看到漂亮的效果。比如下面这个简单的图表：

图片.png

只要准备好一个JSON格式的数据源就可以了：

<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'js/'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' //1. 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            //2. 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('report')); 
            //3. 准备JSON格式的数据源
            var option = {
                        title : {
                            text: '股票价格趋势图',
                            subtext: '2017年11月第3周',
                        },
                        legend: {
                            data:['科大讯飞','中科信息','浪潮信息']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['周一','周二','周三','周四','周五']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'科大讯飞',
                                type:'bar',
                                barWidth:75,
                                stack: '总量',
                                data:[58, 58.8, 56.5, 62, 64]
                            },
                            {
                                name:'中科信息',
                                type:'bar',
                                barWidth:75,
                                stack: '总量',
                                data:[79, 81, 82.8, 81.2, 80.8]
                            },
                            {
                                name:'浪潮信息',
                                type:'bar',
                                barWidth:75,
                                stack: '总量',
                                data:[21.37, 22.66, 20.58, 21, 22.5]
                            }
                        ]
                    };
            //4. 为echarts对象加载数据 
            myChart.setOption(option); 
        }
    );
</script>

这样就可以了。

03.对应Java库

正常情况下，展现到报表的数据都是动态生成的，如果用java语言编程的话，那构建JSON格式时需要对应的一套Java库。网上有一个开源的，可以参考：https://github.com/abel533/ECharts

ECharts支持几十种类型的图表，简单易用，帮助手册也很给力，我会继续关注并应用到实际工作中。