eCharts-柱状图（横置） 配置说明

// 实例化eChart图表
function initEchart( idName, option ) {
var myEchart = echarts.init( document.getElementById( idName ) );

myEchart.setOption( option );
}

// 随机数生成
function randomNum( digitNumber, holdNumber ) {
var random = Math.random();
random = Math.pow( 10, digitNumber ) * random;
random = random.toFixed(holdNumber);

return random;
}

var option = {
title: {
text: "XX市历年空气质量优良天数比例",
subtext: "",
x: '16',
textStyle: {
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
orient: 'horizontal',
feature: {
magicType: {
type: ['line', 'bar']
},
restore: {show: true},
saveAsImage: {show: true}
},
bottom: 15,
right: 20
},
grid: {     // 上下左右边距
top: "20%",
bottom: "10%",
left: "8%",
right: "3%",
containLabel: true
},
xAxis: [{
type: 'value',
name: '',
nameTextStyle: {
color: '#6d9269'
},
position: 'top',
max: 100,
boundaryGap: [0, 0.01],
axisTick: {
show: false,
alignWithLabel: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'category',
name: "年份",
nameTextStyle: {
color: '#6d9269'
},
nameGap: 30,
data: ["2012", "2013", "2014", "2015", "2016", "2017"],     // Y轴分布类型
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {}
}
}],
series: [{
name: "优良天数",
type: "bar",
stack: 'chart',
data: data,     // X轴对应类型的数值
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#a8e8a1'},
{offset: 1, color: '#65c95b'}
]
)
}
}
}, {
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
normal: {
color: '#f5f5f5'
}
},
data: reverseData
}]
}

var echartId = 'lineChart-01';
initEchart(echartId, option);