Echarts实现多组柱状图重叠效果图例可用
option = {
tooltip: {
trigger: 'axis',
formatter: (params, ticket, callback) => {
let title = (params || [{'': '未知'}])[0].axisValueLabel
let a = params.filter(_ => _.seriesName)
.map(_ => `${_.seriesName} :: ${_.value}`)
.join('</span><br/><span>');
return `<h2>${title}</h2><br/><span>${a}</span>`;
},
axisPointer: {
type: 'shadow', animation: true,
shadowStyle: {
color: {
width: '100%', type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
colorStops: [
{offset: 0, color: 'RGBA(0,0,0,0)'},
{offset: 0.15, color: 'RGBA(0,0,0,0)'},
{offset: 0.15, color: 'RGBA(100,100,100,0.3)'},
{offset: 0.85, color: 'RGBA(100,100,100,0.3)'},
{offset: 0.85, color: 'RGBA(0,0,0,0)'},
{offset: 1, color: 'RGBA(0,0,0,0)'}
],
global: false
},
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 0,
}
}
},
legend: {
silent: true,
data: ['总楼宇数', '开盘楼宇数', '总车位数', '开盘车位数'],
},
grid: {},
yAxis: {
show: true,
type: 'value',
splitNumber: 5,
min: 0
},
xAxis: [
{
type: 'category',
data: ['2012', '2013', '2014', '2015']
},
{
show: false,
type: 'category',
data: ['', '', '', '']
},
{
show: false,
type: 'category',
data: ['', '', '', '']
},
{
show: false,
type: 'category',
data: ['', '', '', '']
}
],
series: [
{name: '总楼宇数',type: 'bar',barWidth: '20%', data: [100, 100, 80, 80], xAxisIndex: 0},
{name: '',type: 'bar', show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 0},
{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 1},
{name: '总车位数',type: 'bar',barWidth: '20%', data: [100, 133, 80, 80], xAxisIndex: 1},
{name: '开盘楼宇数',type: 'bar',barWidth: '20%', data: [50, 33, 44, 55], xAxisIndex: 2},
{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 2},
{name: '',type: 'bar',show:false, barWidth: '20%', data: [0, 0, 0, 0], xAxisIndex: 3},
{name: '开盘车位数',type: 'bar',barWidth: '20%', data: [22, 11, 10, 22], xAxisIndex: 3},
]
};