1、 Echarts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11),Chrome,Firefox,Safari等。
2、底层依赖轻量级Canva+库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
代码如下(示例):
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
代码如下(示例):
<div class="x-body">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 60%; height: 300px;"></div>
</div>
代码如下(示例):
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.setOption({
title : {
text : '大学资源使用情况',
left : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
left : 'left',
},
series : [ {
name : '访问来源',
type : 'pie',
radius : '50%',
data : [],
emphasis : {
itemStyle : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
} ]
});
$.post('getNum', function(res) {
if (res.data.length==1){
myChart.setOption({
series : [ {
data : [ {
value : res.data[0].peopleNum,
name : '阅览室一'
}],
} ]
})
}
if (res.data.length==2){
myChart.setOption({
series : [ {
data : [ {
value : res.data[0].peopleNum,
name : '阅览室一'
}, {
value : res.data[1].peopleNum,
name : '阅览室二'
} ],
} ]
})
}
if (res.data.length==3){
myChart.setOption({
series : [ {
data : [ {
value : res.data[0].peopleNum,
name : '阅览室一'
}, {
value : res.data[1].peopleNum,
name : '阅览室二'
}, {
value : res.data[2].peopleNum,
name : '阅览室三'
} ],
} ]
})
}
}, 'json');
</script>
使用res.data.length判断的原因是,本人不知道改怎么循环,怎么判断条数。
饼图的块数少的情况下可以这个笨方法
@RequestMapping("getNum")
public Object getNum() {
List<Statistics> list = logService.getNum();
return new Result(0, "列表", list, list.size());
}
提示:本人正在学习中,,此正当笔记使用,有大神可以教教我别方法判断条数┗|`O′|┛ 嗷~~