* Echarts简介*
ECharts是一款开源、功能强大的数据可视化产品。
—— [ Echarts官网 ]
具体实现代码如下：
HTML代码:
<!--输出的报表内容--->
<div id="main" style="height:300px;width:500px;"></div>
- 1
- 2
JavaScript代码:
- 1.写入ajax代码通过servlet获取Json数据
<script type="text/javascript">
$.ajax({
type : 'post',
async : false, //同步执行
url :'adm_index/goods.ad', //web.xml中注册的Servlet的url-pattern
data : {}, //无参数
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
//把result(即Json数据)以参数形式放入Echarts代码中
bind(result);
}
},
error : function(errorMsg) {
alert("加载数据失败");
}
}); //ajax
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 2.把Json数据传入Echarts代码当中
<script type="text/javascript">
//JS成功后的代码
function bind(result){
// 基于准备好的dom，初始化echarts图表
var TypeSalesChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:(function(){
var res = [];
var len = result.length;
for(var i=0,size=len;i<size;i++) {
res.push({
name: result[i].typeName,
});
}
return res;
})()
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:(function(){
var res = [];
var len = result.length;
for(var i=0,size=len;i<size;i++) {
res.push({
//通过把result进行遍历循环来获取数据并放入Echarts中
name: result[i].typeName,
value: result[i].sales
});
}
return res;
})()
}
]
};
// 为echarts对象加载数据
TypeSalesChart.setOption(option);
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
* 上面就是以最简单的方式显示饼状图数据了，如果有问题欢迎在下方评论，谢谢！*