option = {
grid: {
top: '10%',
right: '3%',
bottom: '15%',
left: '3%',
containLabel: true
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLabel: {
fontSize:13,
padding:[10,0,0,0],
color: 'rgba(0, 0, 0, 0.45)'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.35)',
width: 1
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
type:'dashed',
color: 'rgba(0, 0, 0, 0.15)'
}
}
},
{
type: 'value',
alignTicks: true,
splitLine: {
show: false
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)'
}
}
],
series: [
{
name: 'bar',
yAxisIndex: 0,
type: 'bar',
data: [820, 720, 930, 820, 580, -490].map(val => {
return {
value: val,
label: {
position: val < 0 ? 'bottom' : 'top',
},
itemStyle: {
borderRadius: val < 0 ? [0, 0, 20, 20] : [20, 20, 0, 0]
}
}
}),
barMaxWidth: 15,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: -0.2,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: '#A7CEFF'
},
{
offset: 0,
color: '#5B8FF9'
}
]
}
},
label: {
show: true,
color: "#5B8FF9",
padding:[5,5,5,5]
},
},
{
data: [820, 720, 930, 820, 580, -490],
type: "line",
smooth: true,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
width: 4,
color: "rgb(55, 200, 143)",
shadowColor: 'rgba(55, 200, 143, .4)',
shadowBlur: 8,
shadowOffsetY: 10,
shadowOffsetX: 0,
},
itemStyle: {
color: "rgb(55, 200, 143)",
borderColor: "#fff",
borderWidth: 2,
shadowBlur: 5,
shadowColor: "rgba(5, 5, 5, .3)"
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(55, 200, 143, .4)'
}, {
offset: 1,
color: 'rgba(55, 200, 143, 0)'
}]),
},
}
]
};