option = {
legend: {},
tooltip: {},
dataset: {
dimensions: ['predict', '<8h', '8-16h', '2017'],
source: [
{ predict: '4月11日', '<8h': 5 },
{ predict: '4月12日', '<8h': 6 },
{ predict: '4月13日', '8-16h': 12 },
{ predict: '4月14日', '8-16h': 10 },
{ predict: '4月15日', '8-16h':15 },
],
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
min:0,
max:24,
interval:6,
splitLine: {
show: false,
},
},
{
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
name: '<8h',
yAxisIndex: 1,
type:'bar',
barWidth: '25%',
seriesLayoutBy: 'row',
itemStyle: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: 'rgba(32, 230, 164, 1)'},
{offset: 1, color: 'rgba(108, 218, 255, 0)'}
]
}
}
},
{
name: '8-16h',
yAxisIndex: 1,
type:'bar',
barWidth: '25%',
seriesLayoutBy: 'row',
itemStyle: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{offset: 0, color: '#F78678'},
{offset: 0.5, color: '#C359D0'},
{offset: 1, color: '#963EF5'}
]
}
}
},
{ type: 'bar', yAxisIndex: 1 },
],
};