效果如下图
<div id="container" style="width: 100%; height: 300px; margin-top: 5px;" data-highcharts-chart="0"></div>
var chart = $('#contaner').highcharts({
chart: {
defaultSeriesType: 'line'
},
title: {
text: '',
style: {
fontSize: 16
}
},
colors: [
'#008CD9',
'#FF4040'
],
credits: {
enabled: false // 禁用版权信息
},
xAxis: {
tickWidth: 0, //去掉刻度
categories: ['TF技术职能型', 'GM综合管理型', 'AU自主独立型', 'SE安全稳定型', 'EC创业创新型', 'SV服务奉献型', 'CH纯粹挑战性', 'LS生活方式型'],
labels: {
overflow: false,
y: 55,
style: {
color: '#444444',
fontFamily: 'Verdana, sans-serif',
writingMode: 'tb-rl', //文字竖排样式
}
}
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0, //隐藏y轴刻度线
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
line: {
dataLabels: {
// 开启数据标签
enabled: true,
align: 'center',
verticalAlign: 'middle',
crop: false,
overflow: 'none',
y: -2,
x: -1,
style: {
fontSize: '8px',
borderWidth: 'none',
color: '#fff',
textOutline: 'none',
// fontWeight: 'normal',
}
},
// 关闭鼠标跟踪,对应的提示框、点击事件会失效
enableMouseTracking: false
},
series: {
label: {
connectorAllowed: false,
},
marker: {
enabled: true, /*数据点是否显示*/
radius: 8, /*数据点大小px*/
symbol: 'circle' /*数据点样式*/
},
animation: false
}
},
legend: {
margin: -25,
padding: 0
},
series: [{
name: '参考值',
data: [18, 36, 57, 0, 21, 37, 100, 69]
}, {
name: '本团队',
data: [52, 85, 14, 41, 64, 10, 50, 41]
}]
});