百度開源圖標(biāo)庫(kù)Echarts

ECharts，縮寫來自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。

Echarts官方網(wǎng)站：http://echarts.baidu.com

Echarts Java類庫(kù)：https://github.com/abel533/ECharts

如何使用

Echarts是一個(gè)純Javascript圖標(biāo)庫(kù)，我們需要在html的head中間引入js文件，官方下載地址：http://echarts.baidu.com/download.html 官方提供了四個(gè)版本的下載，建議使用完整版，在實(shí)際使用中發(fā)現(xiàn)簡(jiǎn)易版本可能存在一些特性無法使用的問題，完整版也只有537KB，并不大，因此強(qiáng)烈建議使用完整版。

一般來說，為了使用Echarts，需要拼接出Echarts需要的配置，這個(gè)工作可以是后端做，也可以是前端做。來看看一個(gè)例子：

option = {
    title: {
        text: '未來一周氣溫變化',
        subtext: '純屬虛構(gòu)'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['最高氣溫','最低氣溫']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name:'最高氣溫',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低氣溫',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高點(diǎn)'
                    }]
                ]
            }
        }
    ]
};

這是一個(gè)折線的代碼部分，其效果如下：

image.png

在實(shí)際項(xiàng)目中，我們不可能將數(shù)據(jù)寫死在js中，這個(gè)時(shí)候要么后端利用自己的數(shù)據(jù)拼接成上面的代碼，前端利用后端拼接好的代碼直接展示，要么后端將數(shù)據(jù)傳遞給前端，前端自己拼接。其實(shí)不管是哪一種，都是比較繁瑣的。在GitHub上，已經(jīng)有人提供了一個(gè)Echarts的類庫(kù)，利用該類庫(kù)，后端開發(fā)人員可以很方便的構(gòu)建所需的對(duì)象，最后Json化后傳遞給前端即可。

代碼示例

后端

Java代碼

    Option option = new Option();
    option.title("**系統(tǒng)同比數(shù)據(jù)").legend("統(tǒng)計(jì)數(shù)值");
    option.tooltip(new Tooltip().trigger(Trigger.axis));
    Feature mark = new Mark().show(true);
    Feature dataView = new DataView().show(true).readOnly(true);
    Feature magicType = new MagicType().show(true);
    Feature restore = new Restore().show(true);
    Feature saveAsImage = new SaveAsImage().show(true);
    Toolbox toolbox = new Toolbox().feature(mark, dataView, magicType, restore,  saveAsImage);
    option.toolbox(toolbox);
    option.calculable(true);
    List<String> dateList = Lists.newArrayList();
    List<Number> valueList = Lists.newArrayList();
    for (SummaryData summaryData : summaryDataList) {
      dateList.add(summaryData.getDate());
      valueList.add(summaryData.getValue());
    }
    CategoryAxis categoryAxis = new CategoryAxis().name("日期").data(dateList.toArray());
    categoryAxis.setBoundaryGap(false);
    option.xAxis(categoryAxis);
    option.yAxis(new ValueAxis().name("統(tǒng)計(jì)數(shù)值").splitArea(new SplitArea().show(true)));
    Line line = new Line();
    line.name(getDataName2Cname().get(name));
    line.setData(valueList);
    line.markLine(new MarkLine().data(new Data().type(MarkType.average)));
    line.markPoint(new MarkPoint().data(new Data().type(MarkType.min),
        new Data().type(MarkType.max)));
    option.series(line);
    return option;

該Java類庫(kù)中類的結(jié)構(gòu)基本上和Echarts的結(jié)構(gòu)保持一致，因此只需要對(duì)照Echarts的API文檔就能很快的知道該類庫(kù)如何使用。

得到Option對(duì)象后，直接使用Json工具類將其轉(zhuǎn)化為Json字符串傳遞給前端，注意，轉(zhuǎn)為Json字符串時(shí)，null值不要包含進(jìn)來。

前端

<div id="psLine" style="height:600px;"></div>
<script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
    var myChart = echarts.init(document.getElementById('psLine'));
    myChart.setOption(${result?no_encode});
</script>

其中，result即為后端傳過來的字符串，這里之所以加上no_encode，是因?yàn)楹蠖藗鬟^來的Json字符串會(huì)被轉(zhuǎn)義（并不是普遍現(xiàn)象）。

展示效果

image.png

更多的使用有待探索。