百度ECharts饼状图实现（Ajax）

样式如下：

 

 

 

饼状图页面所需代码：

<div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>

JS代码：

$(function () {


        $.ajax({
            type : 'get',
            async : false, //同步执行
            url : ctx + 'system/books/booksNumber', //后台地址
            data : {}, //无参数
            dataType : 'json', //返回数据形式为json
            success : function(result) {
                if (result) {
                    //把result(即Json数据)以参数形式放入Echarts代码中
                    //因为我返回的是Json格式如下，需要取到data的值，所以传入result.data
//{
// "msg": "操作成功",
//  "code": 0,
//  "data": {
//    "number": 131.0,
//    "out_number": 12.0
//  }
//}
                    bind(result.data);
                }
            },
            error : function(errorMsg) {
                alert("加载数据失败");
            }
        }); //ajax


//这里的result也就是上边Ajax传入的result.data
        function bind(result){
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title: {
                text: '合川图书馆',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['剩余图书', '已借出']
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                    //这里点所需要的数据即可
                        {value: result.number, name: '剩余图书'},
                        {value: result.out_number, name: '已借出'}
                    ]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
    }});

后台Contrller代码：

    @GetMapping("/booksNumber")
    @ResponseBody
    public AjaxResult inBooks(HttpServletResponse response, HttpServletRequest request)
    {
        Map<String,String> number = booksService.selectInBooks();
        return AjaxResult.success(number);
    }

 

总结：主要是Ajax传值哪里需要在同一个方法里面，注意仔细多留意，避免传值没传进去