開發(fā)一個(gè)信息系統(tǒng)，報(bào)表模塊是必不可少的，尤其是對(duì)于甲方管理人員來(lái)說(shuō)，看的就是匯總、結(jié)果、趨勢(shì)、各種維度的數(shù)據(jù)展現(xiàn)，所以圖表類的開發(fā)非常重要，直接影響到甲方買單人對(duì)系統(tǒng)價(jià)值的關(guān)鍵評(píng)估。

01.Canvas

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

02.ECharts

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

圖片.png

只要準(zhǔn)備好一個(gè)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: '股票價(jià)格趨勢(shì)圖',
                            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對(duì)象加載數(shù)據(jù) 
            myChart.setOption(option); 
        }
    );
</script>

這樣就可以了。

03.對(duì)應(yīng)Java庫(kù)

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

ECharts支持幾十種類型的圖表，簡(jiǎn)單易用，幫助手冊(cè)也很給力，我會(huì)繼續(xù)關(guān)注并應(yīng)用到實(shí)際工作中。