ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖-java教程-PHP中文網

首頁

Java

java教程

ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖

王林

Dec 17, 2023 pm 10:37 PM

echarts統計圖java介面

ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖

ECharts和Java介面：如何快速實現折線圖、長條圖、餅圖等統計圖，需要具體程式碼範例

隨著網路時代的到來，數據分析變得越來越重要。統計圖表是一種非常直觀而有力的展示方式，透過圖表可以更清楚地展示數據，讓人們更能理解數據的內涵和規律。在Java開發中，我們可以使用ECharts和Java介面來快速實現各種統計圖表的展示。

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

實現折線圖

折線圖是一種透過連接資料點來表示資料趨勢的圖表。在ECharts中，我們可以透過以下程式碼來實現折線圖：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

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

在Java中如何實現折線圖呢？我們可以透過以下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;
}

以上程式碼中，我們建立了一個Map對象，並把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');
    }
});

實作長條圖

長條圖是一種用來比較不同類別資料大小的圖表。在ECharts中，我們可以透過以下程式碼來實現長條圖：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["周一","周二","周三","周四","周五","周六","周日"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 20, 30, 40]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

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

在Java中如何實作長條圖呢？我們可以透過以下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;
}

以上程式碼中，我們建立了一個Map對象，並把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: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    },
    error: function(){
        alert('error');
    }
});

#實作餅圖

圓餅圖是一種用來表示數據佔比情況的圖表。在ECharts中，我們可以透過以下程式碼來實現餅圖：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    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: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

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

在Java中如何實作圓餅圖呢？我們可以透過以下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","邮件营销");
    result.add(data2);

    Map<String,Object> data3 = new HashMap<String,Object>();
    data3.put("value",234);
    data3.put("name","联盟广告");
    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;
}

以上程式碼中，我們建立了一個含有5個元素的Map數組，並把值和名稱儲存到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: '数据来自网络'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            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');
    }
});

總結：

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

以上是ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

ECharts和Java接口：如何实现统计图表数据导出与分享Dec 17, 2023 am 08:44 AM

ECharts是一款功能强大、灵活可定制的开源图表库，可用于数据可视化和大屏展示。在大数据时代，统计图表的数据导出和分享功能变得越来越重要。本文将介绍如何通过Java接口实现ECharts的统计图表数据导出和分享功能，并提供具体的代码示例。一、ECharts简介ECharts是百度开源的一款基于JavaScript和Canvas的数据可视化库，具有丰富的图表

使用PHP和ECharts创建可视化图表和报表May 10, 2023 pm 10:21 PM

随着大数据时代的来临，数据可视化成为企业决策的重要工具。千奇百怪的数据可视化工具层出不穷，其中ECharts以其强大的功能和良好的用户体验受到了广泛的关注和应用。而PHP作为一种主流的服务器端语言，也提供了丰富的数据处理和图表展示功能。本文将介绍如何使用PHP和ECharts创建可视化图表和报表。ECharts简介ECharts是一个开源的可视化图表库，它由

ECharts入门指南：如何使用EChartsDec 17, 2023 am 09:26 AM

ECharts入门指南：如何使用ECharts，需要具体代码示例ECharts是一款基于JavaScript的数据可视化库，通过使用ECharts，用户可以轻松地展示各种各样的图表，如折线图、柱状图、饼图等等。本文将为您介绍如何使用ECharts，并提供详细的代码示例。安装ECharts要使用ECharts，您首先需要安装它。您可以从ECharts官网htt

vue3怎么封装ECharts组件May 20, 2023 pm 03:22 PM

一、前言前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。二、封装ECharts组件为什么要封装组件避免重复的工作量，提升复用性使代码逻辑更加清晰，方便项目的后期维护封装组件可以让使用者不去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行封装的ECharts组件实现了以下的功能：使用组件传递ECharts中的option属性手动/自动设置chart尺寸chart自适应宽高动态展

利用ECharts和Python接口生成漏斗图的步骤Dec 17, 2023 am 10:08 AM

利用ECharts和Python接口生成漏斗图的步骤，需要具体代码示例漏斗图是一种常用的数据可视化工具，可以用于展示数据在不同阶段之间的变化情况。利用ECharts和Python接口，我们可以轻松地生成漂亮的漏斗图。下面，将按照以下步骤介绍如何实现漏斗图的生成，并给出具体的代码示例。步骤一：安装ECharts和Python接口首先，我们需要安装ECharts

如何在Python中使用ECharts绘制堆叠柱状图Dec 17, 2023 am 09:48 AM

在数据可视化领域，堆叠柱状图是一种常见的可视化方式。它将多个数据系列绘制成一个条形，每个条形由多个子项组成，每个子项对应一个数据系列，在同一坐标系下进行展示。这种图表可以用于比较不同类别或数据系列的总大小、每个类别或数据系列的组成比例等。在Python中，我们可以使用ECharts库来绘制堆叠柱状图，而且该库具有丰富的可定制性和交互性。一、安装和导入ECha

ECharts漏斗图：如何展示数据转化率Dec 17, 2023 am 08:32 AM

ECharts漏斗图：如何展示数据转化率，需要具体代码示例导语：在数据可视化领域，漏斗图是一种非常常用的图表类型，它能够直观地展示数据的转化过程与转化率。ECharts作为一个强大的数据可视化工具，也提供了漏斗图的绘制功能。本文将结合具体的代码示例，详细介绍ECharts漏斗图的绘制方法以及如何展示数据的转化率。漏斗图的基本结构漏斗图由上至下呈现不同的阶段，

如何在ECharts中使用桑基图展示数据流向Dec 17, 2023 am 09:38 AM

如何在ECharts中使用桑基图展示数据流向引言：数据可视化是数据分析中的重要环节，能够将复杂的数据通过图表等方式直观地展示出来。ECharts是一个功能强大的数据可视化库，支持多种图表类型，其中桑基图（SankeyDiagram）能够非常直观地展示数据的流向关系。本文将介绍如何在ECharts中使用桑基图展示数据流向，并提供具体的代码示例。引入EChar

See all articles