**
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>
生成的饼状图如下: