開發(fā)一個信息系統(tǒng)尿这，報表模塊是必不可少的，尤其是對于甲方管理人員來說庆杜，看的就是匯總射众、結(jié)果、趨勢晃财、各種維度的數(shù)據(jù)展現(xiàn)叨橱，所以圖表類的開發(fā)非常重要，直接影響到甲方買單人對系統(tǒng)價值的關(guān)鍵評估断盛。

01.Canvas

HTML5出世以后罗洗，帶來了一個<canvas>標(biāo)簽，基于canvas使用JavaScript在網(wǎng)頁上繪制圖像钢猛，畫布是一個矩形區(qū)域伙菜，我們可以控制其每一個像素。

02.ECharts

2016年開始關(guān)注一款叫《ECharts》的圖表庫命迈，是基于html5 Canvas的贩绕。能夠快速讓你看到漂亮的效果火的。比如下面這個簡單的圖表：

圖片.png

只要準(zhǔn)備好一個JSON格式的數(shù)據(jù)源就可以了：

<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'js/'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' //1. 使用柱狀圖就加載bar模塊，按需加載
        ],
        function (ec) {
            //2. 基于準(zhǔn)備好的dom淑倾，初始化echarts圖表
            var myChart = ec.init(document.getElementById('report')); 
            //3. 準(zhǔn)備JSON格式的數(shù)據(jù)源
            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對象加載數(shù)據(jù) 
            myChart.setOption(option); 
        }
    );
</script>

這樣就可以了馏鹤。

03.對應(yīng)Java庫

正常情況下，展現(xiàn)到報表的數(shù)據(jù)都是動態(tài)生成的娇哆，如果用java語言編程的話湃累，那構(gòu)建JSON格式時需要對應(yīng)的一套Java庫。網(wǎng)上有一個開源的碍讨，可以參考：https://github.com/abel533/ECharts

ECharts支持幾十種類型的圖表治力，簡單易用，幫助手冊也很給力勃黍，我會繼續(xù)關(guān)注并應(yīng)用到實際工作中琴许。