先看效果:
本来找了很多博客还是找到解决方案,最后靠着bing来解决了
直接上代码了
{
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
text: "",
href: "",
//position: {
// align: 'center',
// verticalAlign:"middle",
// x: 10
//}
},
xAxis: {
categories: [
'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
],
crosshair: true
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color:'#333'// Highcharts.getOptions().colors[2]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: '',
style: {
color:"#333"// Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color:"#333"// Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {
shared: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#f5222d'],
[1, '#f5222d00'] //这里就是设置渐变色的代码
]
},
}
},
series: [ {
name: '海平面气压',
type: 'line',
yAxis: 0,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
//dashStyle: 'shortdot',
tooltip: {
//valueSuffix: ' mb'
}
},
{
name: '降雨量',
type: 'area',
yAxis: 1,
marker: {
enabled: false
},
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],
tooltip: {
//valueSuffix: ' mm'
},
color:"#f5222d1f"
}
]
},
记录一下