Spring MVC与EChart绘制图表(二)

m_sophia

于 2019-12-26 09:07:54 发布

阅读量342

点赞数

分类专栏： IT java 文章标签： EChart 折线图饼状图

本文链接：https://blog.csdn.net/m_sophia/article/details/103708648

版权

IT 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

java

8 篇文章 0 订阅

订阅专栏

在上一文章中，我们简单介绍了柱状图的绘制方法，今天主要介绍一下饼状图和折线图的绘制方法。采用的封装类还是上一篇文章的，此处不再累述。话不多说，直接上代码。

1、饼状图

前端：

<%@ 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="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts-all.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: {
                x: 'center', // 'center' | 'left' | {number},
                y: 'top', // 'center' | 'bottom' | {number}
                text: '信息发送方式'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal', // 'vertical'
                // 分组的位置设置，可以为坐标
                x: 'center', // 'center' | 'left' | {number},
                y: 'bottom', // 'center' | 'bottom' | {number}
                data: []
            },
            series: [{
                name: '发送方式',
                type: 'pie',
                data: [],
                // 饼状图数值和比例显示
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {c} ({d}%)'
                        },
                        labelLine: {show: true}
                    }
                }
            }]
        };
        //通过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 seriesData = result.series[0].data;
                    //jquery遍历
                    var value = [];
                    $.each(seriesData, 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>

其中，以下代码适用于控制饼状图上的数值和比例的显示：

itemStyle: {
    normal: {
       label: {
           show: true,
            // 显示格式
           formatter: '{b} : {c} ({d}%)'
              },
        labelLine: {show: true}
            }
}

后台代码：

    public EChartData PieData() {
        List<Statistic> statisticList = service.selectListGroupBySource();
        List<String> legend = new ArrayList<String>();
        List<Map> seriesData=new ArrayList<Map>();
        for (Statistic statistic:statisticList){
            Map map = new HashMap();
            legend.add(statistic.getSource());
            // 科目，对应饼状图每一部分的名称
            map.put("name",statistic.getSource());
            // 数值
            map.put("value",statistic.getTotal());
            seriesData.add(map);
        }
        List<Series> series = new ArrayList<Series>();// 纵坐标
        // Series参数：1、介绍；2、类型；3、数值集合
        series.add(new Series("发送方式", "pie",seriesData));
        return new EChartData(legend,null, series,null);
    }

效果图：

2、折线图

前端：

<%@ 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="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts-all.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 = {
                color: {
                    data: []
                },
                title: {
                    x: 'center', // 'center' | 'left' | {number},
                    y: 'top', // 'center' | 'bottom' | {number}
                    text: "通过Ajax获取数据呈现图标示例"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    orient: 'horizontal', // 'vertical'
                    x: 'center', // 'center' | 'left' | {number},
                    y: 'bottom', // 'center' | 'bottom' | {number}
                    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;
                        options.color = result.color;
                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error : function(errorMsg) {
                    alert("图表请求数据失败啦!");
                }
            });

        });
</script>
</body>
</html>

当数据较密集时，可以控制横坐标数值不显示，避免数据过大，横坐标显示不美观，具体方法是修改xAxis的属性：

                xAxis: [
                    {
                        type: 'category',
                        // 默认为true
                        show: false,
                        data: []
                    }
                ],

后台：

public EChartData lineData() {
        List<Visit> visitList = visitService.queryAll();
        List<String> category = new ArrayList<String>();
        List<Long> visitData=new ArrayList<Long>();
        List<Long> registerData=new ArrayList<Long>();
        for (Visit visit:visitList){
            category.add(visit.getDate());
            visitData.add(visit.getVisit());
            registerData.add(visit.getRegister());
        }
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "visit","register" }));// 数据分组
        List<Series> series = new ArrayList<Series>();// 纵坐标
        // 折线1
        series.add(new Series("visit", "line", visitData));
        // 折线2
        series.add(new Series("register", "line", registerData));
        return new EChartData(legend, category, series, Arrays.asList(ChartUtil.getColorList(legend.size())));
    }

效果图：