Echarts后台获取数据

最新推荐文章于 2024-02-22 15:28:55 发布

finfin12

最新推荐文章于 2024-02-22 15:28:55 发布

阅读量6.6k

点赞数 5

文章标签： ECharts

本文链接：https://blog.csdn.net/finfin12/article/details/83540018

版权

记录一下,毕竟不是专业搞前端的

后台代码

@Controller
public class EchartsDemo {

   @ResponseBody
    @RequestMapping("/hello")
    public Map hello(){
        Map map = new HashMap();
        List list = new ArrayList();
        list.add("哈哈");
        list.add("与配偶同住");
        list.add("与子女同住");
        list.add("仅与重度残疾子女共同居住");
        list.add("与配偶及子女同住");
        list.add("与其他亲属同住");
        list.add("与父母同住");
        list.add("与其他人同住");
        List<EchartsEntity> EchartsEntitys = new ArrayList<>();
        EchartsEntitys.add(new EchartsEntity("1001","哈哈"));
        EchartsEntitys.add(new EchartsEntity("1020","与配偶同住"));
        EchartsEntitys.add(new EchartsEntity("1300","与子女同住"));
        EchartsEntitys.add(new EchartsEntity("1100","仅与重度残疾子女共同居住"));
        EchartsEntitys.add(new EchartsEntity("1300","与配偶及子女同住"));
        EchartsEntitys.add(new EchartsEntity("1040","与父母同住"));
        EchartsEntitys.add(new EchartsEntity("10","与其他人同住"));
        map.put("EchartsEntitys",EchartsEntitys);
        map.put("str",list);
       return map ;
    }

}

页面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="../static/eCharts/js/echarts.min.js" th:src="@{/static/eCharts/js/echarts.min.js}"></script>
    <script src="../static/eCharts/js/jquery-1.11.0.min.js" th:src="@{/static/eCharts/js/jquery-1.11.0.min.js}"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px;"></div>

    <script type="text/javascript">

    $(function () {
        $.ajax({
            type : "get",//向后台请求的方式，有post，get两种方法
            url : "/hello",//url填写的是请求的路径
            cache : false,//缓存是否打开
            data : {

            },
            dataType : 'json',//请求的数据类型
            success : function(data) {//请求的返回成功的方法
                if (data!=null ) {
                  var  data1 = data.str;
                  var data2 = data.EchartsEntitys;
                    haha(data1,data2);
                } else {
                    alert("加载失败");
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {//请求的失败的返回的方法
                alert("小伙子,出异常了");
            }
        });

        function haha (data1,data2) {
            option = {
                backgroundColor: "#031845",
                color: ['#2edfa3', '#bce672', '#ff4777', '#70f3ff', '#4b5cc4', '#f47983', '#8d4bbb', '#6635EF', '#FFAFDA'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    bottom: 20,
                    x: 'center',
                    textStyle: {
                        color: '#fff'
                    },
                    data:   data1
                },

                series: [{
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '38%'],

                    label: {
                        normal: {
                            show: false,
                            position: 'inner',
                            formatter: '{d}%',
                            textStyle: {
                                color: '#fff',
                                fontWeight: 'normal',
                                fontSize: 10
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:  data2
                },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '42%'],
                        label: {
                            normal: {
                                formatter: '{b|{b}}\n{hr|}\n{d|{d}%}',
                                rich: {
                                    b: {
                                        fontSize: 10,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    hr: {
                                        borderColor: '#12EABE',
                                        width: '100%',
                                        borderWidth: 2,
                                        height: 0
                                    },
                                    d: {
                                        fontSize: 10,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    c: {
                                        fontSize: 10,
                                        color: '#fff',
                                        align: 'center',
                                        padding: 4
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                                length2: 20,
                                lineStyle: {
                                    type: 'dashed',
                                    width: 2
                                }
                            }
                        },
                        data: data2
                    }
                ]
            };

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    })


    </script>
</body>
</html>

效果显示

finfin12

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
Echarts后台获取数据

记录一下,毕竟不是专业搞前端的后台代码@Controllerpublic class EchartsDemo { @ResponseBody @RequestMapping("/hello") public Map hello(){ Map map = new HashMap(); List list = new ArrayLis...
复制链接

扫一扫