echarts+ajax请求数据demo（一）

最新推荐文章于 2022-07-24 20:05:16 发布

月疯

最新推荐文章于 2022-07-24 20:05:16 发布

阅读量2.2k

点赞数 3

分类专栏：【easyUI】

本文链接：https://blog.csdn.net/chehec2010/article/details/85043005

版权

【easyUI】专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
    var option;
    var list=[];
    var list1=[{}];
    $.ajax({
        contentType: "application/json",
        type: "GET",
        url: "/bess",
        dataType: "json",
        success: function (data) {
            //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                list=data["a"];
                list1=data["b"];
                
            myChart.setOption(option = {
                title: {
                    text: '元旦节目表演的数量统计',
                    subtext: '元旦节目表演的质量',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: list
                },
                series: [
                    {
                        name: '访问次数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: list1,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        }
    });

   

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

后端：

package com.easyui.easyuidemo.cotroller;

import com.easyui.easyuidemo.entity.Posty;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @authorseerhuitao ajax请求前端的接口
 * @create2018/12/17
 */
@RestController
public class AjaxCotroller {
    @RequestMapping("/bess")
    public Object getValue(){
          Map<String,Object> map=new HashMap<>();
          List<String> list=new ArrayList<>();
          List<Posty> list1=new ArrayList<>();

          Posty p=new Posty();
          p.setValue("123");
          p.setName("恵涛");
          list.add("恵涛");
          list1.add(p);

        Posty p1=new Posty();
        p1.setValue("432");
        p1.setName("张亮");
        list.add("张亮");
        list1.add(p1);

        Posty p2=new Posty();
        p2.setValue("445");
        p2.setName("陈占勇");
        list.add("陈占勇");
        list1.add(p2);

        Posty p3=new Posty();
        p3.setValue("445");
        p3.setName("侯博");
        list.add("侯博");
        list1.add(p3);

        Posty p4=new Posty();
        p4.setValue("445");
        p4.setName("王鹏飞");
        list.add("王鹏飞");
        list1.add(p4);

        map.put("a",list);
        map.put("b",list1);
        return map;
    }
}

通俗易懂！请自测试可以实现！