Echarts 的使用？如何接收后台数据

效果：

后台源码：

/**
 * Created by joe强 on 2018/8/24 10:18
 */

@Controller
@RequestMapping("/echarts")
@Scope(value = "prototype")
public class EchartsController {
    @Autowired
    EchartsService echartsService;
    @RequestMapping("/getEchartsDate.action")
    @ResponseBody
    public JSONObject getJson() {
        //实体类
        EchartsVo echartsVo = new EchartsVo();
        //集合
        List<Integer> data = new ArrayList<>();
        //从数据库获取所有的用户名
        List<String> categories = echartsService.getNickname();
        for (String name : categories) {
           //根据用户名来获取对应的权限数
            Integer count = echartsService.getPermission(name);
            //放入集合中
            data.add(count);
        }
        //放到实体类中
        echartsVo.setCategories(categories);
        echartsVo.setData(data);
        //转换为Json数据
        return JSONObject.fromObject(echartsVo);

    }
}

前台接收：

<%--
  Created by IntelliJ IDEA.
  User: joe强
  Date: 2018/8/24
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/common/echarts/echarts.common.min.js"></script>
    <!-- 引入Jquery -->
    <script src="/js/common/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
        //树状图颜色
        color: ['#3398DB'],
        title: {
            text: '异步数据加载示例'
        }, 
      //切换展示模式
      tooltip: {
        trigger: 'axis',
            axisPointer: {
            type: 'cross',
                crossStyle: {
                color: '#999'
            }
        }
    },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['权限']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '权限',
            type: 'bar',
            data: []
        }]
    });

    // 异步加载数据
    $.get('/echarts/getEchartsDate.action').done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
               //获取数据
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '权限',
                data: data.data
            }]
        });
    });

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

Echarts 的 使用 ？ 如何 接收后台数据

猜你喜欢

Echarts 的使用？如何接收后台数据