option = {
grid: {
top: 80,
right: 40,
bottom: 40,
left: 40,
containLabel: true
},
legend: {
data: [
{
name: '订单量'
},
{
name: '时长'
}
],
icon: 'rect',
itemWidth: 13,
itemHeight: 13,
itemGap: 40,
top: 30,
right: 30,
textStyle: {
color: 'rgba(0, 0, 0, 0.85)'
}
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.15)',
width: 0
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 10,
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.15)'
}
}
},
{
type: 'value',
alignTicks: true,
splitLine: {
show: false
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)'
}
}
],
series: [
{
name: '订单量',
yAxisIndex: 0,
type: 'bar',
data: [820, 720, 930, 820, 580, 490],
barMaxWidth: 15,
itemStyle: {
borderRadius: [20, 20, 0, 0],
color: {
type: 'linear',
x: 0,
y: -0.2,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#A7CEFF'
},
{
offset: 1,
color: '#5B8FF9'
}
]
}
},
emphasis: {
label: {
show: true,
position: 'top',
color: '#1890FF'
}
}
},
{
name: '时长',
yAxisIndex: 1,
type: 'line',
data: [0.62, 0.41, 0.41, 0.19, 0.03, 0.12],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#FF8C09'
},
itemStyle: {
color: '#FF8C09'
},
emphasis: {
itemStyle: {
borderWidth: 2,
borderColor: '#fff'
},
label: {
show: true,
position: 'top',
color: '#FF8C09',
align: 'left',
offset: [10, 5]
}
}
}
]
};