ECharts和Java介面：如何快速實(shí)現(xiàn)折線圖、長(zhǎng)條圖、餅圖等統(tǒng)計(jì)圖，需要具體程式碼範(fàn)例

隨著網(wǎng)路時(shí)代的到來，數(shù)據(jù)分析變得越來越重要。統(tǒng)計(jì)圖表是一種非常直觀而有力的展示方式，透過圖表可以更清楚地展示數(shù)據(jù)，讓人們更能理解數(shù)據(jù)的內(nèi)涵和規(guī)律。在Java開發(fā)中，我們可以使用ECharts和Java介面來快速實(shí)現(xiàn)各種統(tǒng)計(jì)圖表的展示。

ECharts是一款由百度開發(fā)的基於HTML5 Canvas的資料視覺化圖表庫(kù)，可以輕鬆地繪製出各式各樣的圖表，包括折線圖、長(zhǎng)條圖、圓餅圖等等。而Java介面則是一種讓後端資料與前端展示互動(dòng)的技術(shù)，可以透過Java程式碼向前端傳遞資料。接下來我們將介紹如何使用ECharts和Java介面來快速實(shí)現(xiàn)各種統(tǒng)計(jì)圖表的展示。

1. 實(shí)現(xiàn)折線圖

折線圖是一種透過連接資料點(diǎn)來表示資料趨勢(shì)的圖表。在ECharts中，我們可以透過以下程式碼來實(shí)現(xiàn)折線圖：

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
    title: {
        text: '折線圖'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'line',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

以上程式碼展示如何使用ECharts來實(shí)現(xiàn)一張折線圖。我們可以在option物件中設(shè)定圖表的各種參數(shù)，例如圖表的標(biāo)題、x軸和y軸的標(biāo)籤等。透過把資料傳遞給series中的data屬性，即可在圖表中顯示對(duì)應(yīng)的資料。最後使用setOption方法來渲染圖表。

在Java中如何實(shí)現(xiàn)折線圖呢？我們可以透過以下Java程式碼來向前端傳遞資料：

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

以上程式碼中，我們建立了一個(gè)Map對(duì)象，並把x軸和y軸的資料分別放到categories和data中。然後把Map物件回傳給前端。

最後，在前端程式碼中加入以下JS程式碼，即可完成折線圖的後端資料渲染：

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '折線圖'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'line',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

2. 實(shí)作長(zhǎng)條圖

長(zhǎng)條圖是一種用來比較不同類別資料大小的圖表。在ECharts中，我們可以透過以下程式碼來實(shí)現(xiàn)長(zhǎng)條圖：

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
    title: {
        text: '柱狀圖'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

以上程式碼展示如何使用ECharts來實(shí)現(xiàn)長(zhǎng)條圖。與折線圖類似，我們可以在option物件中設(shè)定圖表的各種參數(shù)，例如圖表的標(biāo)題、x軸和y軸的標(biāo)籤等。同時(shí)，我們只要把type屬性設(shè)為'bar'，就可以將折線圖轉(zhuǎn)換為長(zhǎng)條圖。

在Java中如何實(shí)作長(zhǎng)條圖呢？我們可以透過以下Java程式碼來向前端傳遞資料：

@RequestMapping("/echarts")
@ResponseBody
public Map<String,Object> echarts(){
    List<String> categories = new ArrayList<String>();
    categories.add("周一");
    categories.add("周二");
    categories.add("周三");
    categories.add("周四");
    categories.add("周五");
    categories.add("周六");
    categories.add("周日");

    List<Integer> data = new ArrayList<Integer>();
    data.add(5);
    data.add(20);
    data.add(36);
    data.add(10);
    data.add(20);
    data.add(30);
    data.add(40);

    Map<String,Object> result = new HashMap<String,Object>();
    result.put("categories",categories);
    result.put("data",data);

    return result;
}

以上程式碼中，我們建立了一個(gè)Map對(duì)象，並把x軸和y軸的資料分別放到categories和data中。然後把Map物件回傳給前端。在前端程式碼中加入以下JS程式碼，即可完成長(zhǎng)條圖的後端資料渲染：

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var categories = data.categories;
        var data = data.data;
        var option = {
            title: {
                text: '柱狀圖'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

3. #實(shí)作餅圖

圓餅圖是一種用來表示數(shù)據(jù)佔(zhàn)比情況的圖表。在ECharts中，我們可以透過以下程式碼來實(shí)現(xiàn)餅圖：

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
    title: {
        text: '餅圖',
        subtext: '數(shù)據(jù)來自網(wǎng)絡(luò)'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>: {c} (wjcelcm34c%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接訪問','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營(yíng)銷'},
                {value: 234, name: '聯(lián)盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

以上程式碼展示如何使用ECharts來實(shí)現(xiàn)圓餅圖。與折線圖、長(zhǎng)條圖類似，我們可以在option物件中設(shè)定圖表的各種參數(shù)，例如圖表的標(biāo)題、x軸和y軸的標(biāo)籤等。透過把資料傳遞給series中的data屬性，即可在圖表中顯示對(duì)應(yīng)的資料。注意這裡餅圖的資料需要滿足值與名稱對(duì)應(yīng)的格式，如{value:335, name:'直接存取'}。

在Java中如何實(shí)作圓餅圖呢？我們可以透過以下Java程式碼來傳遞資料到前端：

@RequestMapping("/echarts")
@ResponseBody
public List<Map<String,Object>> echarts(){
    List<Map<String,Object>> result = new ArrayList<Map<String,Object>>();

    Map<String,Object> data1 = new HashMap<String,Object>();
    data1.put("value",335);
    data1.put("name","直接訪問");
    result.add(data1);

    Map<String,Object> data2 = new HashMap<String,Object>();
    data2.put("value",310);
    data2.put("name","郵件營(yíng)銷");
    result.add(data2);

    Map<String,Object> data3 = new HashMap<String,Object>();
    data3.put("value",234);
    data3.put("name","聯(lián)盟廣告");
    result.add(data3);

    Map<String,Object> data4 = new HashMap<String,Object>();
    data4.put("value",135);
    data4.put("name","視頻廣告");
    result.add(data4);

    Map<String,Object> data5 = new HashMap<String,Object>();
    data5.put("value",1548);
    data5.put("name","搜索引擎");
    result.add(data5);

    return result;
}

以上程式碼中，我們建立了一個(gè)含有5個(gè)元素的Map數(shù)組，並把值和名稱儲(chǔ)存到Map中。然後把Map陣列回傳給前端。在前端程式碼中加入以下JS程式碼，即可完成餅圖的後端資料渲染：

$.ajax({
    url: '/echarts',
    type: 'get',
    success: function(data){
        var legendData = [];
        var seriesData = [];
        $.each(data,function(index,item){
            legendData.push(item.name);
            seriesData.push(item);
        });

        var option = {
            title: {
                text: '餅圖',
                subtext: '數(shù)據(jù)來自網(wǎng)絡(luò)'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>: {c} (wjcelcm34c%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: legendData
            },
            series: [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

總結(jié)：

透過上述範(fàn)例，我們可以發(fā)現(xiàn)使用ECharts和Java介面來展示統(tǒng)計(jì)圖表非常簡(jiǎn)單。只需要在前端程式碼中呼叫Java介面取得數(shù)據(jù)，然後傳遞給ECharts的option物件。在Java介面中需要先把資料封裝到Map或List等集合物件中，然後再回傳給前端。自然，如果使用Spring Boot更加方便。 ECharts和Java介面的組合可以適應(yīng)各種前後端分離的開發(fā)模式。

以上是ECharts與Java介面：如何快速實(shí)現(xiàn)折線圖、長(zhǎng)條圖、圓餅圖等統(tǒng)計(jì)圖的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！