<div id="left-top-container" style="min-width:400px;height:100%"></div>
<script>
var chart = Highcharts.chart('left-top-container',{
chart: {
backgroundColor: 'rgba(0,0,0,0)',
type: 'column',
options3d: {
enabled: true,
alpha: 16, //俯瞰角度
beta: 10, //旋转角度
depth: 0 //景深
}
},
title: {
text: '产出与质量趋势图',
style: {
color: '#8fe3fd',
fontSize: '24px'
}
},
subtitle: {
text: ''
},
exporting: {
enabled:false //隐藏导出按钮
},
plotOptions:{
column: {
borderWidth: 0,
//borderColor: "",//去边框
//shadow: false, //去阴影
dataLabels:{ //柱状图数据标签
enabled:true, //是否显示数据标签
color:'#8fe3fd', //数据标签字体颜色
style: {
fontSize: '8px'
},
formatter: function() { //格式化输出显示
return (this.y);
}
}
}
},
xAxis: {
gridLineWidth: 0,
categories: [
'一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
],
labels: {
style: {
color: '#8fe3fd',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
gridLineWidth:'0px',
title: {
text: '款数',
style: {
color: '#8fe3fd',
fontSize: '12px'
}
},
labels: {
style: {
color: '#8fe3fd',
fontSize: '12px'
}
}
},
series: [{
name: '<b style="color:#8fe3fd; font-size: 18px">产出</b>',
color: '#6633f0',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '<b style="color:#8fe3fd; font-size: 18px">质量</b>',
color: '#3ccee5',
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]
}]
});
</script>
关键内容:
options3d: { enabled: true, alpha: 16, //俯瞰角度 beta: 10, //旋转角度 depth: 0 //景深 }
注释即变成平面图: