本文主要是介绍基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面部分：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts柱状图</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">$().ready(function() {var myChart = echarts.init(document.getElementById('main'));//图表显示提示信息myChart.showLoading();//定义图表optionsvar options = {color : [ '#3398DB' ],title : {text : "通过Ajax获取数据呈现图标示例",subtext : "www.stepday.com",sublink : "http://www.stepday.com/myblog/?Echarts"},tooltip : {trigger : 'axis'},legend : {data : []},toolbox : {show : true,feature : {mark : false}},calculable : true,xAxis : [ {type : 'category',data : []} ],yAxis : [ {type : 'value',splitArea : {show : true}} ],series : [ {barWidth : '60%'} ]};//通过Ajax获取数据$.ajax({type : "post",async : false, //同步执行url : "showEchartBar.action",dataType : "json", //返回数据形式为jsonsuccess : function(result) {if (result) {//将返回的category和series对象赋值给options对象内的category和series//因为xAxis是一个数组 这里需要是xAxis[i]的形式options.xAxis[0].data = result.category;options.series = result.series;options.legend.data = result.legend;myChart.hideLoading();myChart.setOption(options);}},error : function(errorMsg) {alert("图表请求数据失败啦!");}});});</script>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts饼状图</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body><!--定义页面图表容器--><!-- 必须制定容器的大小（height、width） --><div id="main"style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div><script type="text/javascript">$().ready(function() {var myChart = echarts.init(document.getElementById('main'));//图表显示提示信息myChart.showLoading();//定义图表optionsvar options = {title : {text : '某站点用户访问来源',subtext : '纯属虚构',x : 'center'},tooltip : {trigger : 'item',formatter : "{a} <br/>{b} : {c} ({d}%)"},legend : {orient : 'vertical',left : 'left',data : []},series : [ {name : '访问来源',type : 'pie',data : []} ]};//通过Ajax获取数据$.ajax({type : "post",async : false, //同步执行url : "showEchartPie.action",dataType : "json", //返回数据形式为jsonsuccess : function(result) {if (result) {options.legend.data = result.legend;//将返回的category和series对象赋值给options对象内的category和series//因为xAxis是一个数组 这里需要是xAxis[i]的形式options.series[0].name = result.series[0].name;options.series[0].type = result.series[0].type;var serisdata = result.series[0].data;//遍历/* var datas = [];for ( var i = 0; i < serisdata.length; i++) {datas.push({name : serisdata[i].name,value : serisdata[i].value});}options.series[0].data = datas; *///jquery遍历var value = [];$.each(serisdata, function(i, p) {value[i] = {'name' : p['name'],'value' : p['value']};});options.series[0]['data'] = value;myChart.hideLoading();myChart.setOption(options);}},error : function(errorMsg) {alert("图表请求数据失败啦!");}});});</script></body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<title>echarts折线图</title>
<body><!--定义页面图表容器--><!-- 必须制定容器的大小（height、width） --><div id="main"style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div><script type="text/javascript">$().ready(function() {var myChart = echarts.init(document.getElementById('main'));//图表显示提示信息myChart.showLoading();//定义图表optionsvar options = {title: {text: "通过Ajax获取数据呈现图标示例",subtext: "www.stepday.com",sublink: "http://www.stepday.com/myblog/?Echarts"},tooltip: {trigger: 'axis'},legend: {data: []},toolbox: {show: true,feature: {mark: false}},calculable: true,xAxis: [{type: 'category',data: []}],yAxis: [{type: 'value',splitArea: { show: true }}],series: []};//通过Ajax获取数据$.ajax({type : "post",async : false, //同步执行url : "showEchartLine.action",dataType : "json", //返回数据形式为jsonsuccess : function(result) {if (result) {//将返回的category和series对象赋值给options对象内的category和series//因为xAxis是一个数组 这里需要是xAxis[i]的形式options.xAxis[0].data = result.category;options.series = result.series;options.legend.data = result.legend;myChart.hideLoading();myChart.setOption(options);}},error : function(errorMsg) {alert("图表请求数据失败啦!");}});});</script>
</body>
</html>后端java代码：
@Controller
@RequestMapping("/echartsJSP")
public class EchartAction {@Autowiredprivate TotalNumBiz toatlNumBiz;@Autowiredprivate VisitBiz visitBiz;@RequestMapping("/showEchartLine")@ResponseBodypublic EchartData lineData() {System.out.println("折线图");List<String> category = new ArrayList<String>();List<Long> serisData=new ArrayList<Long>();List<TotalNum> list = toatlNumBiz.findAll();for (TotalNum totalNum : list) {category.add(totalNum.getWeek());serisData.add(totalNum.getCount());}List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组List<Series> series = new ArrayList<Series>();// 纵坐标series.add(new Series("总数比较", "line", serisData));EchartData data = new EchartData(legend, category, series);return data;}@RequestMapping("/showEchartBar")@ResponseBodypublic EchartData BarData() {System.out.println("柱状图");List<String> category = new ArrayList<String>();List<Long> serisData=new ArrayList<Long>();List<TotalNum> list = toatlNumBiz.findAll();for (TotalNum totalNum : list) {category.add(totalNum.getWeek());serisData.add(totalNum.getCount());}List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组List<Series> series = new ArrayList<Series>();// 纵坐标series.add(new Series("总数比较", "bar", serisData));EchartData data = new EchartData(legend, category, series);return data;}/*** 饼状图* @param <T>* @return*/@RequestMapping("/showEchartPie")@ResponseBodypublic EchartData PieData() {List<String> legend = new ArrayList<String>();List<Map> serisData=new ArrayList<Map>();List<Visit> list = visitBiz.findAll();for (Visit visit : list) {Map map =new HashMap();legend.add(visit.getName());map.put("value", visit.getValue());map.put("name",visit.getName());serisData.add(map);}List<Series> series = new ArrayList<Series>();// 纵坐标series.add(new Series("总数比较", "pie",serisData));EchartData data = new EchartData(legend,null, series);return data;}
}另外使用EchartsData和Series两个类封装数据：
public class EchartData {public List<String> legend = new ArrayList<String>();// 数据分组public List<String> category = new ArrayList<String>();// 横坐标public List<Series> series = new ArrayList<Series>();// 纵坐标public EchartData(List<String> legendList, List<String> categoryList,List<Series> seriesList) {super();this.legend = legendList;this.category = categoryList;this.series = seriesList;}
}public class Series<T>{public String name;public String type;public List<T> data;// 这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候）public Series(String name, String type, List<T> data) {super();this.name = name;this.type = type;this.data = data;}
public Series(){super();
}测试使用的实体类及其他部分:
public class TotalNum {private Integer id;private String week;private Long count;public class Visit {private Integer id;private String name;private Integer value;只作为笔记使用，此文转载自：https://www.cnblogs.com/Damon-Luo/p/5918822.html
谢谢 我的名字最好听 博主分享
这篇关于基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
