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);