基于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;

基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）

猜你喜欢