thinkphp+echarts生成饼状图

**

thinkphp+echarts生成饼状图

**
新人撰写博客，如有不足望提出且多多见谅！

开放项目过程中需要用到报表统计功能，最后经过试用，选用了百度开发的echarts，今天记录下在实现饼状图的动态数据加载功能。

具体代码如下：

HTML代码:

<!--输出的报表内容--->
<div id="main" style="width: 100%;height:400px;"></div>

JavaScript代码:
1.写入ajax代码通过servlet获取Json数据

<script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery/1.9.1/jquery.min.js"></script> 
 <script src="__PUBLIC__/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '各专业人数分布图'
        },
        tooltip: {},
        legend: {
            data:['人数']
        },
        xAxis: {
            data: [],
            name:'专业',
            axisLabel: {
                interval:0 //该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签
            },
            axisLabel: {
                interval:0,
                rotate:30, //代表逆时针旋转45度
            }
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [],
            itemStyle: {
                normal:{
                    label:{
                        show:true,
                        position:'top',
                        textStyle:{
                            color:'black',
                            fontsize:16
                        }
                    }
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $('#tongji').click(function() {
        nianji = $("#nianji").find("option:selected").val();
        cengci = $("#cengci").find("option:selected").val();
        $.post("{:U('nnsbl_tb')}", { "nianji": nianji,"cengci":cengci },function(info){
            var lqzy=[];
            var nums=[];
            $.each(info,function (key,values) {
                lqzy.push(values.lqzy);
                nums.push(values.count);
            })
            //console.log(lqzy);
            myChart.setOption({
                xAxis: {
                    data:lqzy,
                },
                series:[{
                    data:nums,
                }],
            })
        }, "json");
    });
</script> 

生成的饼状图如下：