echarts饼图动态数据加载

前台页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>echarts</title>
    <script src="<%=basePath%>static/js/echarts.js"></script>
    <script src="<%=basePath%>static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '部门',
            subtext: '饼图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'部门人数',
                type:'pie',
                radius : '55%',//饼图的半径大小
                center: ['50%', '60%'],//饼图的位置
                data:[]
            }
        ]
    };

    $(function(){
        var servicedata=[];
         $.ajax({
             type: "POST",
             url:'<%=basePath%>/echarts/go',
             dataType: 'json',
             contentType: "application/x-www-form-urlencoded; charset=UTF-8",
             success: function (data) {
                 if(data){
                     var obj = eval(data);
                     for(var i=0;i<obj.length;i++){
                         var sum = new Object();
                         sum.name=data[i].bg_mc;
                         sum.value=data[i].bg_rs;
                         servicedata[i]=sum;
                     }

                 }
                 myChart.setOption({
                     series: [{
                         // 根据名字对应到相应的系列
                         name: '部门人数',
                         data: servicedata
                     }]
                 });
             }
         })
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>

后台代码：

@Controller
@RequestMapping("/echarts")
public class EchartsController extends BaseController {
    @Resource(name = "echartsService")
    private EchartsService echartsService;

    @ResponseBody
    @RequestMapping(value = "go", produces = "application/json;charset=utf-8", method = RequestMethod.POST)
    public List<PageData> ShuJu() throws Exception{
        PageData pd = this.getPageData();
        List<PageData> list = echartsService.findEcharts(pd);
        return list;
    }
}

service层就不写了，下面是sql语句
select bg_rs,bg_mc from t_system_bmgl

//部门表:t_system_bmgl 部门名称:bg_mc 部门人数：bg_rs

结果图如下：
在这里插入图片描述

echarts饼图动态数据加载

猜你喜欢