//3D圆柱图配置项
function fill3DBar(obj){
var options ={
tooltip: {
shared: true, //是否共享提示,也就是X一样的所有点都显示出来
useHTML: true, //是否使用HTML编辑提示信息
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td>水耗用量:</td>' +
'<td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2 //数据值保留小数位数
},
chart: {
renderTo: 'container',
type: 'cylinder',
backgroundColor: '#134797',
options3d: {
enabled: true,
alpha: 20,
beta: 0,
depth: 0,
viewDistance: 25
}
},
plotOptions: {
series: { //注意:当此处为series是针对所有图表类型有效
depth: 25,
dataLabels: { //显示柱形上方的文字标签
color:"#fff",
enabled: true,
defer: false,
y:-25
},
}
},
title: {
text: '水耗用量(m3)',
style:{ "color": "#ffffff"}
},
xAxis:{
type:"category",
labels:{
style:{
color:'#ffffff'
}
},
gridLineColor: '#666',//纵向网格线颜色
gridLineWidth: 1 //纵向网格线宽度
},
yAxis: {
type: 'category',
title:{
text:'m3',
align:"high",
rotation:'0',
offset: 0,
style:{
"color": "#FFFFFF"
},
y:-10
},
gridLineColor: '#666',//横向网格线颜色
gridLineDashStyle: 'longdash',//横向网格线样式
gridLineWidth: 1 ,//横向网格线宽度
labels:{
style:{
color:'#ffffff'
}
}
},
legend: {
enabled: false,
floating:false
},
series:obj.series,
};
myChart3DBar = Highcharts.chart('shylBar', options);
}
//模拟数据调用
var waterHourDosage = [{y: 29.9,name: '02'}, {y: 71.5,name: '04'},{y: 106.4,name: '06'}, {y: 129.2,name: '08'},
{y: 144.0,name: '10'},{y:176.0,name: '12'}, {y: 135.6,name: '14'}, {y: 148.5,name: '16'}, {y: 216.4,name: '20'
},{y: 194.1,name: '22'}, {y:95.6,name: '24'}, {y: 54.4,name: '26'}]
var waterHourDosageSeries =[];
waterHourDosageSeries.push({
data: waterHourDosage,
color:"#AFB75D"
})
fill3DBar({
series:waterHourDosageSeries
})