option = {
tooltip: {},
grid: [
{
bottom: 61
},
{
height: 60,
bottom: 0
}
],
xAxis: [{
type: 'category',
data: ['1', '2', '3', '1', '2', '3', '1', '2', '3', '1', '2'],
gridIndex: 0,
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
lineStyle: {
color: '#e7e7e7'
}
},
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#333'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
lineStyle: {
color: '#ccc'
}
}
},{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
data: [0.1, 0.15, 0.18, 0.25, 0.23, 0.32, 0.33, 0.36, 0.57, 0.72, 0.45],
type: 'bar',
stack: '堆叠',
label: {
show: true,
position: 'top',
textStyle: {
color: '#555'
}
},
itemStyle: {
normal: {
color: (params) => {
let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
return colors[params.dataIndex]
}
}
},
xAxisIndex: 0,
yAxisIndex: 0
},
{
data: [, 0.15],
type: 'bar',
stack: '堆叠',
xAxisIndex: 0,
yAxisIndex: 0
},
{
data: [{
name: '一季度',
value: 1,
}],
// stack: '南明',
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: '27.2727%',
itemStyle: {
normal: {
color: 'rgba(134,176,237, .5)'
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '二季度',
value: 1,
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: '18.1818%',
itemStyle: {
normal: {
color: 'rgba(40,191,126, .5)'
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '三季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: '27.2727%',
itemStyle: {
normal: {
color: 'rgba(237,124,47, .5)'
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '四季度',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: '18.1818%',
itemStyle: {
normal: {
color: 'rgba(242,169,59, .5)'
}
},
xAxisIndex: 1,
yAxisIndex: 1
},
{
data: [{
name: '1',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: '9.0909%',
itemStyle: {
normal: {
color: 'rgba(249,207,54, .5)'
}
},
xAxisIndex: 1,
yAxisIndex: 1
}
]
};
分组展示echarts图表数据
于 2021-07-02 11:28:58 首次发布