let ydata = [220, 260, 191, 234, 290, 330, 310]
option = {
backgroundColor: '#16243f',
legend: {
left: '10%',
orient: 'vertical',
selectedMode: false,
data: [{
name: 'Android',
icon: 'rect',
textStyle: {
color: '#ffffff'
}
},
{
name: 'IOS',
icon: 'rect',
textStyle: {
color: '#ffffff'
}
}]
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: 'white',
fontSize: '28',
width: '0'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color: '#a8acae',
fontSize: '14'
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
show: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: 'white'
}
}
},
series: [{
name: '',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
opacity: 0.8,
color: function (params) {
if (params.dataIndex % 2 === 0) {
return (new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "RGBA(10, 31, 51, 1)" // 0% 处的颜色
}, {
offset: 1,
color: "RGBA(2, 112, 141, 1)" // 100% 处的颜色
}], false))
}
return (new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "RGBA(80, 105, 197, 1)" // 0% 处的颜色
}, {
offset: 1,
color: "RGBA(137, 162, 248, 1)" // 100% 处的颜色
}], false))
}
}
},
data: ydata
},
{
name: '',
tooltip: {
show: false
},
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
opacity: 0.8,
color: function (params) {
if ((params.dataIndex+1) % 2 === 0) {
return (new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "RGBA(73, 93, 162, 1)" // 0% 处的颜色
}, {
offset: 1,
color: "RGBA(120, 137, 199, 1)" // 100% 处的颜色
}], false))
}
return (
new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "RGBA(14, 38, 59, 1)" // 0% 处的颜色
}, {
offset: 1,
color: "RGBA(37, 170, 220, 1)" // 100% 处的颜色
}], false)
)
}
}
},
data: ydata,
barGap: 0
},
{
name: '',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: function (params) {
if (params.dataIndex % 2 === 0) {
return '#54c8f3'
}
return '#9bb0f9'
},
borderWidth: 1,
opacity: '1',
shadowColor: 'rgb(0,0,0,0.1)',
shadowOffsetX: '0.5',
shadowOffsetY: '0.5'
}
},
label: {
show: true,
color: '#ffffff',
offset: [-0, 0],
position: 'top',
fontSize: '16',
},
symbol: 'rect',
symbolRotate: 45,
symbolSize: ['15', '15'],
symbolOffset: ['-0', '-8'],
symbolPosition: 'end',
data: ydata,
z: 3
}
]
};