option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var html = '';
if (params.length != 0) {
var getName = params[0].name;
html += getName + '<br/>';
for (var i = 0; i < params.length; i++) {
if (
params[i].value != null &&
params[i].value != 0 &&
params[i].value != ''
) {
html += params[i].marker;
html += params[i].seriesName + ': ' + params[i].value + '<br/>';
}
}
}
return html;
}
},
legend: {
data: ['A', 'B', 'C', 'D', 'E']
},
xAxis: [
{
type: 'category',
position: 'bottom',
data: ['2012', '', '', '', '']
},
{
type: 'category',
position: 'bottom',
data: ['', '2013', '', '', '']
},
{
type: 'category',
position: 'bottom',
data: ['', '', '2014', '', '']
},
{
type: 'category',
position: 'bottom',
data: ['', '', '', '2015', '']
},
{
type: 'category',
position: 'bottom',
data: ['', '', '', '', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'A',
type: 'bar',
xAxisIndex: 0,
data: [
{
value: 9,
itemStyle: {
color: '#6BC9FA'
}
}
],
barGap: '2%',
barWidth: 30
},
{
name: 'A',
type: 'bar',
xAxisIndex: 1,
data: ['', 3],
barGap: '2%',
barWidth: 30
},
{
name: 'A',
type: 'bar',
xAxisIndex: 2,
data: ['', '', 4],
barGap: '2%',
barWidth: null
},
{
name: 'A',
type: 'bar',
xAxisIndex: 3,
data: ['', '', '', 5],
barGap: '2%',
barWidth: 30
},
{
name: 'A',
type: 'bar',
xAxisIndex: 4,
data: ['', '', '', '', 6],
barGap: '2%',
barWidth: 30
},
{
name: 'B',
type: 'bar',
xAxisIndex: 0,
data: [3],
barGap: '2%',
barWidth: 30
},
{
name: 'C',
type: 'bar',
xAxisIndex: 0,
data: [5],
barGap: '2%',
barWidth: 30
},
{
name: 'D',
type: 'bar',
xAxisIndex: 0,
data: [4],
barGap: '2%',
barWidth: 30
},
{
name: 'B',
type: 'bar',
xAxisIndex: 1,
data: ['', 5],
barGap: '2%',
barWidth: 30
},
{
name: 'C',
type: 'bar',
xAxisIndex: 1,
data: ['', 3],
barGap: '2%',
barWidth: 30
},
{
name: 'D',
type: 'bar',
xAxisIndex: 1,
data: ['', 7],
barGap: '2%',
barWidth: 30
},
{
name: 'E',
type: 'bar',
xAxisIndex: 1,
data: ['', 5],
barGap: '2%',
barWidth: 30
},
{
name: 'B',
type: 'bar',
xAxisIndex: 2,
data: ['', '', 6],
barGap: '2%',
barWidth: 30
},
{
name: 'C',
type: 'bar',
xAxisIndex: 2,
data: ['', '', 6],
barGap: '2%',
barWidth: 30
},
{
name: 'D',
type: 'bar',
xAxisIndex: 2,
data: ['', '', 4],
barGap: '2%',
barWidth: 30
},
{
name: 'D',
type: 'bar',
xAxisIndex: 3,
data: ['', '', '', 8],
barGap: '2%',
barWidth: 30
},
{
name: 'B',
type: 'bar',
xAxisIndex: 4,
data: ['', '', '', '', 1],
barGap: '2%',
barWidth: 30
},
{
name: 'D',
type: 'bar',
xAxisIndex: 4,
data: ['', '', '', '', 3],
barGap: '2%',
barWidth: 30
}
]
};