console
var chart = Highcharts.chart('container', {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源:thesolarfoundation.com'
},
yAxis: [
{
type: 'value',
gridLineDashStyle: "dash",
lineWidth: 1,
title: {
text: "安装",
style: { color: '#4f81bd' }
},
labels: {
formatter: function () {
return '<div style="color:#4f81bd">' + this.value + '</div>';
}
},
height: "22%",
offset: 0,
opposite: false,
reversed: true,
},
{
type: 'value',
gridLineDashStyle: "dash",
lineWidth: 1,
title: {
text: "工人",
style: { color: '#c0504d' }
},
labels: {
formatter: function () {
return '<div style="color:#c0504d">' + this.value + '</div>';
}
},
top: "25%",
height: "22%",
offset: 0,
opposite: false
},
{
type: 'value',
gridLineDashStyle: "dash",
lineWidth: 1,
title: {
text: "销售",
style: { color: '#9bbb59' }
},
labels: {
formatter: function () {
return '<div style="color:#9bbb59">' + this.value + '</div>';
}
},
top: "50%",
height: "22%",
offset: 0,
opposite: false
},
{
type: 'value',
gridLineDashStyle: "dash",
lineWidth: 1,
title: {
text: "项目开发",
style: { color: '#8064a2' }
},
labels: {
formatter: function () {
return '<div style="color:#8064a2">' + this.value + '</div>';
}
},
top: "75%",
height: "22%",
offset: 0,
opposite: false
},
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
shared: true,
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
formatter:function(){
var str = ""
this.points.forEach(element => {
str += '<br><span style="color:'+element.color+'">'+element.series.name+':'+element.y+'</span>'
str += '<br><span style="color:'+element.color+'">时间:'+element.series.name+'</span>'
});
return str
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装',
yAxis: 0,
color:"#4f81bd",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
yAxis: 1,
color:"#c0504d",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
yAxis: 2,
color:"#9bbb59",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
yAxis: 3,
color:"#8064a2",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}],
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="max-width:800px;height:400px"></div>
<script>
</script>
</body>
</html>