echarts图表x轴文字显示不全问题及柱状图颜色调整

var myChart= echarts.init(document.getElementById('myChart'));
    option = {
        title: {
            // text: '纯属虚构',
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '5%',//左边距
            right: '5%',//走边距
            top: 10,//上边距
            bottom: 50,//下边距
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xArray,
                axisLabel:{//把文字竖着放
                    formatter:function(value){
                        return value.split("").join("
")
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '哈哈',
                type: 'bar',
                // barWidth: 15,
                // barGap: '-10%',
                data: yArray,
                markPoint: {
                    data: [
                        {name: '最高'},
                        {name: '最低'}
                    ]
                },
                itemStyle: {
                    color: function(params) {//柱状体颜色
                        // build a color map as your need.
                        var colorList = [
                            '#FF80AA','#F8568C','#C71848','#F61B63','#7ED321',
                            '#00C47B','#FF894A','#8782F7','#24A8BF','#1CCCB5',
                            '#158EFE','#68B671','#FEDB65','#2CD1C0','#AE54B5'

                        ];
                        return colorList[params.dataIndex]
                    },
                }
            }
        ]
    };
    myChart.setOption(option);