ECharts和Java接口：如何快速实现折线图、柱状图、饼图等统计图
- 王林原创
- 2023-12-17 22:37:111610浏览
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中文网其他相关文章！