你的位置:首页 > Java教程

[Java教程]基于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();      //定义图表options      var 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", //返回数据形式为json        success : 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();      //定义图表options      var 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", //返回数据形式为json        success : 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();      //定义图表options      var 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", //返回数据形式为json            success : 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 {  @Autowired  private TotalNumBiz toatlNumBiz;  @Autowired  private VisitBiz visitBiz;      @RequestMapping("/showEchartLine")  @ResponseBody  public 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")  @ResponseBody  public 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")  @ResponseBody  public 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 class TotalNum {  private Integer id;  private String week;  private Long count;

public class Visit {  private Integer id;  private String name;  private Integer value;