配置项如下
let chartData = [
['product', 'CB-Loan', 'PB-Loan', 'Other-Loan', 'CB-Deposit', 'PB-Deposit', 'Other-Deposit'],
['Last Year', 120, 132, 101, 134, 90, 230, 210],
['Last M', 120, 132, 101, 134, 90, 230, 210],
['Yesterday', 220, 182, 191, 234, 290, 330, 310],
['Today', 220, 182, 191, 234, 290, 330, 310],
['Budget', 220, 182, 191, 234, 290, 330, 310],
];
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
},
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
yAxis: {
type: 'value',
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
},
{
type: 'category',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitArea: {
show: false,
},
splitLine: {
show: false,
},
},
],
dataset: {
source: chartData,
},
series: [
{
xAxisIndex: 0,
type: 'bar',
barWidth: '30%',
stack: 'total',
label: {
show: true,
},
},
{
xAxisIndex: 0,
type: 'bar',
barWidth: '30%',
stack: 'total',
label: {
show: true,
},
},
{
xAxisIndex: 0,
type: 'bar',
barWidth: '30%',
stack: 'total',
label: {
show: true,
},
},
{
xAxisIndex: 1,
barGap: '-200%',
type: 'bar',
barWidth: '30%',
stack: 'total2',
label: {
show: true,
},
},
{
xAxisIndex: 1,
barGap: '-200%',
type: 'bar',
barWidth: '30%',
stack: 'total2',
label: {
show: true,
},
},
{
xAxisIndex: 1,
barGap: '-200%',
type: 'bar',
barWidth: '30%',
stack: 'total2',
label: {
show: true,
},
},
{
xAxisIndex: 0,
type: 'bar',
barWidth: '30%',
data: [],
},
{
xAxisIndex: 1,
type: 'bar',
barWidth: '30%',
data: [],
},
],
};