ECharts和Java接口：如何快速实现折线图、柱状图、饼图等统计图

ECharts和Java接口：如何快速实现折线图、柱状图、饼图等统计图，需要具体代码示例

随着互联网时代的到来，数据分析变得越来越重要。统计图表是一种非常直观而又有力的展示方式，通过图表可以更加清晰地展示数据，让人们更好地理解数据的内涵和规律。在Java开发中，我们可以使用ECharts和Java接口来快速实现各种统计图表的展示。

ECharts是一款由百度开发的基于HTML5 Canvas的数据可视化图表库，可以轻松地绘制出各式各样的图表，包括折线图、柱状图、饼图等等。而Java接口则是一种使后端数据与前端展示交互的技术，可以通过Java代码向前端传递数据。接下来我们将介绍如何使用ECharts和Java接口来快速实现各种统计图表的展示。

实现折线图

折线图是一种通过连接数据点来表示数据趋势的图表。在ECharts中，我们可以通过以下代码来实现折线图：

立即学习“Java免费学习笔记（深入）”；

// 基于准备好的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")@ResponseBodypublic Map echarts(){    List categories = new ArrayList();    categories.add("周一");    categories.add("周二");    categories.add("周三");    categories.add("周四");    categories.add("周五");    categories.add("周六");    categories.add("周日");    List data = new ArrayList();    data.add(5);    data.add(20);    data.add(36);    data.add(10);    data.add(20);    data.add(30);    data.add(40);    Map result = new HashMap();    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")@ResponseBodypublic Map echarts(){    List categories = new ArrayList();    categories.add("周一");    categories.add("周二");    categories.add("周三");    categories.add("周四");    categories.add("周五");    categories.add("周六");    categories.add("周日");    List data = new ArrayList();    data.add(5);    data.add(20);    data.add(36);    data.add(10);    data.add(20);    data.add(30);    data.add(40);    Map result = new HashMap();    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} 
{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")@ResponseBodypublic List

登录后复制

以上代码中，我们创建了一个含有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} 
{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接口：如何快速实现折线图、柱状图、饼图等统计图的详细内容，更多请关注【创想鸟】其它相关文章！