JavaScript 使用该option 为什么x轴会显示不全echarts 柱状配置项内容和展示

在echarts的工具中，x轴当前7级显示正常，但是我写到JavaScript网页上会出现x轴只显示到v第五级的情况

      option = {
    title: {
        text: '敖江',
        subtext: '实时浓度'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['浓度']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: true,
        name: '水质类别',
        // data: [1, 1, 1, 1, 1, 1],
        axisLabel: {
            interval: 0,

            formatter: function(a) {
                switch (a) {
                    case 0:
                        return ''
                        break;
                    case 1:
                        return 'I'
                        break;
                    case 2:
                        return 'Ⅱ'
                        break;
                    case 3:
                        return 'Ⅲ'
                        break;
                    case 4:
                        return 'Ⅳ'
                        break;
                    case 5:
                        return 'Ⅴ'
                        break;
                    case 6:
                        return 'VI'
                        break;
                    case 7:
                        return 'VII'
                        break;
                }

            }
        }
    },
    yAxis: {
        type: 'category',

        data: ['溶解氧', '高锰酸盐', '氨氮', '总磷']

    },
    series: [{
            name: '浓度',
            type: 'bar',
            barWidth: 60,
            barMinHeight: 5,
            itemStyle: {
                normal: {
                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        //                             formatter: '{c}'
                        formatter: '{b}\n{c}'
                    }
                }
            },

            data: [7, 5, 6, 2]
        },

    ]
};