eCharts——柱状图中的各个配置项

eCharts 柱状图中的轴标签，轴刻度，轴线，网格线

    <script>
    	//基于准备好的dom，初始化echarts
        var studentNum = echarts.init(document.getElementById('student-num_chart'))
		//指定图表的配置项和数据
        var option1 = {
            //x轴
            xAxis: {
                //坐标轴类型：value—数值轴，category-类目轴，time-时间轴，log-对数轴
                type: 'category',
                //x轴标签样式
                axisLabel: {
                    textStyle: {
                        color: '#666',
                        fontSize: '7px',
                        lineHeight: 16
                    },
                    
					//强制设置坐标轴分割间隔，
					//因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果
                    interval: 0, 

                    //标签的文字过长换行显示
                    formatter: function (params) { //格式化数据的函数
                        console.log(params) //打印出来的是x轴的data

                        var newParamsName = ""; //最终拼接成的字符串
                        var paramsNameNumber = params.length; //实际标签的个数
                        var provideNumber = 3; //每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        //条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /*循环每一行，p表示行*/
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = ""; //表示每一次截取的字符串
                                var start = p * provideNumber; //开始截取的位置
                                var end = start + provideNumber; //结束截取的位置
                                //此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                    //最后一次不换行
                                    tempStr = params.substring(start, paramsNameNumber);
                                    //substring（） 提取字符串介于两个指定下标之间的字符
                                } else {
                                    //每一次拼接字符串并换行
                                    tempStr = params.substring(start, end) + '\n';
                                }
                                newParamsName += tempStr; //最终拼成的字符串
                            }
                        } else {
                            //将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }

                },
                //x轴线
                axisLine: {
                    lineStyle: {
                        //x轴的颜色
                        color: '#ccc'
                    }
                },
                //x轴刻度线
                axisTick: {
                	//x轴刻度线朝内
                    inside: true,
                    //x轴刻度线的长
                    length: 3
                },
                
				//类目数据，在类目轴（type: 'category'）中有效。
                data: ['计算机科学与技术', '自动化', '信息管理', '会计学', '旅游管理', '经济管理']
                //如果没有设置type，但是设置了axis.data，则认为type是'category'
            },
            //y轴
            yAxis: {
            	//数值轴
                type: 'value',
                //坐标轴刻度最大值
                max: 25,
                //y轴标签样式
                axisLabel: {
                    textStyle: {
                        color: '#666',
                        fontSize: '7px'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                    }
                },
                //网格线
                splitLine: {
                    lineStyle: {
                        type: 'dotted'
                    }
                },
                axisTick: {
                    show:false
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            series: [{
                data: [18, 16, 8, 10, 5, 24],
                type: 'bar',
                showBackground: false
            }]
        }
        studentNum.setOption(option1)
    </script>

附：只是Echarts的初学者，写的文档中有任何问题都可以留言告诉我~蟹蟹^^