highchart 图标技术

时间:2023-03-09 17:26:05
highchart 图标技术

1.部分html文件

<div region="center" style="width: 100%; height: 100%;">
<table id="t_auclotBlack" style="height: 100%; width: 100%;"></table>
</div>

2.js 文件

function aucLotAgencyDealreport(begin,end,regionFlag,agencyId){
var xdata = [];
var aucLotCount=[];//拍品件数
var aucLotDealCount=[];//成交件数
var factCount=[];//实际成交数量
var regretCount=[];//悔拍次数
var shootnumber=[];//上拍次数
var sellnumber=[];//变卖次数
var aucLotDealnumber=[];//拍卖成交次数
var firstnumber=[];//优先拍卖成交次数
var sellDealnumber=[];//变卖成交次数
$.ajax({
type: 'get',
dataType: 'json',
async: false,
data: {"beginTime":begin,"endTime":end,
"regionFlag":regionFlag,"agencyId":agencyId},
url: parent.baseUrl+"report/findAucAgencyDealCount",
success: function (result) {
var json=result;
for(var i=0;i<json.length;i++){
xdata.push(json[i].aucagencyName);
aucLotCount.push(parseInt(json[i].aucLotCount));
aucLotDealCount.push(parseInt(json[i].aucLotDealCount));
factCount.push(parseInt(json[i].factCount));
regretCount.push(parseInt(json[i].regretCount));
shootnumber.push(parseInt(json[i].shootnumber));
sellnumber.push(parseInt(json[i].sellnumber));
aucLotDealnumber.push(parseInt(json[i].aucLotDealnum_ber));
firstnumber.push(parseInt(json[i].firstnumber));
sellDealnumber.push(parseInt(json[i].sellDealnumber)); }
getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,shootnumber,sellnumber,aucLotDealnumber,firstnumber
,sellDealnumber);
} }); } function getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,
shootnumber,sellnumber,aucLotDealnumber,firstnumber,sellDealnumber){
var chart =new Highcharts.chart('container', {
credits: {
enabled: false, //去掉版权信息,就是右下角显示的highchars的网站链接 也可以显示成自己的链接,具体请搜索api
},
chart: {
type: 'column'
},
title: {
text: '<span style="font-size:24px;font-weight:bolder;color:Black;">司法机构上拍统计</span>',
},
subtitle: {
text: '上拍统计'
}, legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
tooltip:{
valueSuffix: '数量',
formatter:function(){
return '<b>'+this.series.name+'</b>:'+this.y;
}//,this.x Highcharts.dateFormat("%Y年%m月%e日")+this.x+'<br>'+
},
xAxis: {
type:'date',
categories:xdata,
//gridLineWidth: 5,
dateTimeLabelFormats:{
year: '%Y',
month: '%b \ %y',
day: '%e. %b'
},
},
yAxis: {
allowDecimals: false,
title: {
text: '数量'
}
},
plotOptions: {
series: {
//pointPadding:0.2,
groupPadding:0.2
},
column: {
pointWidth:15
}
},
series: [{
name: '拍品件数',
data: aucLotCount
}, {
name: '成交件数',
data: aucLotDealCount
}, {
name: '实际成交数量',
data: factCount
}, {
name: '悔拍件数',
data: regretCount
}, {
name: '上拍次数',
data: shootnumber
}, {
name: '变卖次数',
data: sellnumber
}, {
name: '拍卖成交次数',
data: aucLotDealnumber
}, {
name: '优先拍卖成交次数',
data: firstnumber
}, {
name: '变卖成交次数',
data: sellDealnumber
}],
responsive: { rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
});
}

3.效果图

highchart 图标技术

highchart 图标技术