参考地址 http://www.runoob.com/highcharts/highcharts-column-basic.html
1、下载JS文件引入,或者用CDN
function getCount(a,b,c){
$.ajax({
type:'get',
dataType:'json',
url:'${path}/count/queryCountDetail',
data:{
webPageId:a,
startDate:b,
endDate:c
},
success:function(data){
console.log(data)
$('.webCount').html(data.info.readCountPv)
$('.webCount1').html(data.info.readCountUv)
$('.adverCount').html(data.info.clickCountPv)
$('.adverCount1').html(data.info.clickCountUv)
var clicklist=[]
var readlist=[]
var sharelist=[]
var titlelist=[]
for(var i=;i<data.info.list.length;i++){
clicklist.push(data.info.list[i].clickcount)
readlist.push(data.info.list[i].readcount)
sharelist.push(data.info.list[i].sharecount)
titlelist.push(data.info.list[i].title)
}
countShow(clicklist,readlist,sharelist,titlelist) //遍历出来的数组
}
})
}
function countShow(a,b,c,d){
var chart = {
type: 'column'
};
var title = {
text: '流量统计'
};
var subtitle = {
text: ''
};
var xAxis = {
/* categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], */
categories:d,
crosshair: true
}; var tooltip = {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
column: {
pointPadding: 0.2,
borderWidth:
}
};
var credits = {
enabled: false
}; var series= [
{
name: '点击量 ',
data: a
//data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '阅读量 ',
data:b
/* data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] */
}, {
name: '分享量 ',
data:c
/* data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] */
}]; var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
// json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#countForm').highcharts(json);
}