这种饼状图是动态的当鼠标放上面那一部分会突出的
效果图：
前台js代码：
<script type="text/javascript">
var arr = [];
function getOrder(){
arr = [];
var BEGIN_TIME = $("#BEGIN_TIME").val();
var END_TIME = $("#END_TIME").val();
$.ajax({
async:false,
type:'post',
url:'<%=basePath%>getOrder.do',
data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
dataType:"json",
success:function(data){
$(data).each(function(i,item){
arr.push([item.name,Number(item.y)]);
});
}
})
}
var arr2 = [];
function getData(){
arr2 = [];
var BEGIN_TIME = $("#BEGIN_TIME").val();
var END_TIME = $("#END_TIME").val();
$.ajax({
async:false,
type:'post',
url:'<%=basePath%>getData.do',
data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
dataType:"json",
success:function(data){
$(data.varList).each(function(index,item){
arr2.push([item.MAT_NAME,item.TOTAL]);
});
}
})
}
function showCharts() {
Highcharts.setOptions({
colors: [ '#6AF9C4','#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#058DC7','#64E572', '#FF9655',
'#FFF263']
});
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '订单物料数量占比',
style:{
color: '#3E576F',
fontSize: '25px',
fontWeight: 'bold'
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
states: {
hover: {
enabled: false
}
},
slicedOffset: 20, // 突出间距
point: { // 每个扇区是数据点对象，所以事件应该写在 point 下面
events: {
// 鼠标滑过是，突出当前扇区
mouseOver: function() {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
}
}
}
},
series: [{
size:'100%',
type: 'pie',
name: '订单物料名称数量占比',
data: arr
}]
});
}
function showCharts2() {
Highcharts.setOptions({
colors: [ '#DDDF00', '#24CBE5','#50B432', '#ED561B', '#058DC7','#64E572', '#FF9655',
'#FFF263']
});
chart = Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '退货订单物料数量占比',
style:{
fontSize: '25px',
fontWeight: 'bold'
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
states: {
hover: {
enabled: false
}
},
slicedOffset: 20, // 突出间距
point: { // 每个扇区是数据点对象，所以事件应该写在 point 下面
events: {
// 鼠标滑过是，突出当前扇区
mouseOver: function() {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
}
}
}
},
series: [{
size:'100%',
type: 'pie',
name: '退货订单物料名称数量占比',
data: arr2
}]
});
}
function clearTime() {
$("#BEGIN_TIME").val("");
$("#END_TIME").val("");
return false;
}
//检索
function search() {
getOrder();
getData();
showCharts();
showCharts2();
}
$(function() {
$(top.hangge());
//日期框
$('.date-picker').datepicker();
getOrder();
getData();
showCharts();
showCharts2();
});
</script>
控制层代码：
/**
* 根据时间获取订单物料名称数量所占%比
*/
@RequestMapping(value="/getOrder")
@ResponseBody
public String getOrder() throws Exception{
PageData pd = new PageData();
pd = this.getPageData();
if(getUser().getRole().getROLE_NAME().contains("供应商")){
pd.put("USERNAME", getUserName());
pd=provideinfoService.findByUserName(pd);
pd.put("CREATE_BY", pd.get("CREATE_BY").toString());
}else if(!"admin".equals(getUserName()) && !getUser().getRole().getROLE_NAME().contains("主管")){
pd.put("CREATE_BY", getUserName());
}
JSONObject json=new JSONObject();
JSONArray result = new JSONArray();
List<PageData> varList = stockorderdetailsService.chartsOrder(pd);
for (PageData p : varList) {
json.put("name", p.get("MAT_NAME").toString());
json.put("y", p.get("PERCENT").toString());
result.add(json);
}
logger.info(result.toString());
return result.toString();
}
/**
* 根据时间获取退货订单物料所占百分比
*/
@RequestMapping(value="/getData")
@ResponseBody
public Map<String,Object> getData(Page page){
logBefore(logger, "列表recharts");
Map<String,Object> map = new HashMap<String,Object>();
try{
PageData pd = new PageData();
pd = this.getPageData();
if(getUser().getRole().getROLE_NAME().contains("供应商")){
pd.put("USERNAME", getUserName());
pd=provideinfoService.findByUserName(pd);
pd.put("CREATE_BY", pd.get("CREATE_BY").toString());
}else if(!"admin".equals(getUserName()) && !getUser().getRole().getROLE_NAME().contains("主管")){
pd.put("CREATE_BY", getUserName());
}
List<PageData> varList = recededetailsService.rechartsData(pd);
map.put("varList", varList);
} catch(Exception e){
logger.error(e.toString(), e);
}
return map;
}
其中用到两种传值方式一种JSON另一种用Map传值给Ajax，下面为取到的值。
[{"name":"插头","y":"0.0164"},{"name":"石膏材料","y":"0.1639"},{"name":"质材","y":"0.8197"}]
两个饼状图并列展示前台代码：
<div class="container-fluid" id="main-container"> <div id="page-content" class="clearfix"> <div class="row-fluid" style="margin-top: 120px;"> <div class="row-fluid"> <div id="container" style="width:800px;height:400px;float: left;"></div> <div id="container2" style="width:800px;height:400px;float: left;"></div> </div> </div> </div> </div>
给饼状图赋值主要就是取json拼接成
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [[{name: 'Chrome',y: 12.8}],[{name: 'Chrome',y: 12.8}]]
}]
data:[[name,y],[name,y]]这样的数组
注意y后面的数值为数字不是字符串所以我用JSONArray传值需要转化将字符串转化为数字
success:function(data){
$(data).each(function(i,item){
arr.push([item.name,Number(item.y)]);
});
}
标题样式设置加粗设置字体颜色大小
title: {
text: '订单物料数量占比',
style:{
color: '#3E576F',
fontSize: '25px',
fontWeight: 'bold'
}
}
饼状图添加颜色图例如下图所示即可
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
}
},
showInLegend: true ,
}
},
showInLegend: true