let option = {
legend: {
top: 0,
right: 20,
itemWidth: 14,
itemHeight: 14,
textStyle: {
color: '#fff',
},
data: ['订单总数', '异常订单', '未支付订单']
},
grid: {
left: '6%',
right: '4%',
bottom: '10%',
containLabel: true
},
tooltip: {
show: 'true',
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
}
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(130, 153, 191, 1)',
fontWeight: 'normal',
fontSize: '12',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
}
},
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(130, 153, 191, 1)',
fontWeight: 'normal',
fontSize: '12',
},
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
}
},
splitLine: {
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
},
],
series: [{
name: '订单总数',
type: 'bar',
xAxisIndex: 1,
itemStyle: {
normal: {
show: true,
color: 'rgba(22, 54, 129, 1)',
barBorderRadius: 0,
borderWidth: 0,
borderColor: '#333',
}
},
barWidth: '20%',
data: [33, 33, 33, 33, 33, 33, 33, 33, 33,]
}, {
name: '异常订单',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: 'rgba(255, 64, 73, 1)',
barBorderRadius: 0,
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: false,
position: 'top',
textStyle: {
color: '#fff'
}
}
},
barWidth: '20%',
data: [12, 11, 10, 1, 15, 10, 8, 15, 10,]
},
{
name: '未支付订单',
xAxisIndex: 2,
type: 'bar',
itemStyle: {
normal: {
show: true,
color: 'rgba(91, 40, 255, 1)',
barBorderRadius: 0,
borderWidth: 0,
borderColor: '#333',
}
},
label: {
normal: {
show: false,
position: 'top',
textStyle: {
color: '#fff'
}
}
},
barWidth: '20%',
data: [10, 10, 16, 15, 10, 16, 15, 10, 16,]
},
]
}