echarts表的田字格多表格式
1,情景描述:echarts想实现如下格式的柱状图
2,代码实现:
option = {
title: [{
'text': 'aaa',
left: 0,
top:0,
}, {
'text': 'bbb',
left: '50%',
top:0,
},{
'text': 'ccc',
left: 0,
top:'30%',
}, {
'text': 'ddd',
left: '50%',
top:'30%',
},{
'text': 'eee',
left: 0,
top:'60%',
}
],
tooltip: {
trigger: 'axis'
},
grid: [
{x: '7%', y: '7%', width: '38%', height: '25%',top:'5%'},
{x2: '7%', y: '7%', width: '38%', height: '25%',top:'5%'},
{x: '7%', y2: '7%', width: '38%', height: '25%',top:'35%'},
{x2: '7%', y2: '7%', width: '38%', height: '25%',top:'35%'},
{x: '8%', y3: '7%', width: '38%', height: '25%',top:'65%'},
{x2: '7%', y3: '7%', width: '38%', height: '25%',top:'65%'}
],
tooltip: {
trigger: 'axis'
},
toolbox: {
x: 'right',
show: true,
feature: {
magicType: {
show: true,
type: ['line', 'bar']
},
saveAsImage: {
show: true
}
}
},
legend: {
y: 'bottom',
data: ['数据1', '数据2']
},
xAxis: [{
type: 'category',
gridIndex: 0,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false
}
},
{
type: 'category',
gridIndex: 1,
data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
axisTick: {
show: false
}
},
{
type: 'category',
gridIndex: 2,
data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
axisTick: {
show: false
}
},
{
type: 'category',
gridIndex: 3,
data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
axisTick: {
show: false
}
},
{
type: 'category',
gridIndex: 4,
data: ['Sun', 'Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'],
axisTick: {
show: false
}
},
],
yAxis: [{
type: 'value',
gridIndex: 0,
show: true,
max: 600
},
{
type: 'value',
gridIndex: 1,
show: true
},
{
type: 'value',
gridIndex: 2,
show: true
},
{
type: 'value',
gridIndex: 3,
show: true
},
{
type: 'value',
gridIndex: 4,
show: true
},
],
series: [{
data: [60, 70, 80, 95, 110, 120, 130],
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
name: '数据1',
},
{
data: [130, 120, 110, 95, 80, 70, 600],
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
name: '数据1'
},
{
data: [230, 220, 210, 195, 180, 170, 200],
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
name: '数据2'
},
{
data: [230, 220, 210, 195, 180, 170, 200],
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
name: '数据2'
},
{
data: [230, 220, 210, 195, 180, 170, 200],
type: 'bar',
xAxisIndex: 3,
yAxisIndex: 3,
name: '数据2'
},
{
data: [230, 220, 210, 195, 180, 170, 200],
type: 'bar',
xAxisIndex: 4,
yAxisIndex: 4,
name: '数据2'
},
]
};