目录

x轴名称

x轴文本倾斜

x轴文本竖直展示

 x轴隔一个换行

x轴换行展示

x轴数量过多，全部显示

x轴数量过多，间隔七条

x轴坐标线

x轴名称

讯享网

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name:"一周",//名称。 nameLocation:'end',//名称显示位置。 }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };

x轴文本倾斜

讯享网option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel : { interval:0, //刻度标签的显示间隔 rotate:"45" } }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };

x轴文本竖直展示

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { interval: 0, formatter:function(value) { return value.split("").join("\n"); } } }, yAxis: [ { name: '次数', type: 'value', }, ], series: [ { type: 'line', data: [150, 230, 224, 218, 135, 147, 260], }, ] };

 x轴隔一个换行

讯享网option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel : { clickable:true,//并给图表添加单击事件 根据返回值判断点击的是哪里 interval : 0, formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params; } else { return params; } } } }, yAxis: [ { name: '次数', type: 'value', }, ], series: [ { type: 'line', data: [150, 230, 224, 218, 135, 147, 260], }, ] };

x轴换行展示

option = { xAxis: { type: 'category', data: ['MonMonMon', 'TueTueTue', 'WedWedWed', 'ThuThuThu', 'FriFriFri', 'SatSatSat', 'SunSunSun'], axisLabel : { formatter : function(params){ var name = "";// 最终 var num = params.length;// 标签个数 var col = 3;// 每行显示字个数 var row = Math.ceil(num / col);// 显示几行，向上取整 // 条件等同于row>1 if (num > col) { for (var p = 0; p < row; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * col;// 开始截取的位置 var end = start + col;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == row - 1) { // 最后一次不换行 tempStr = params.substring(start, num); } else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n"; } name += tempStr;// 最终拼成的字符串 } } else { name = params; // 将旧标签的值赋给新标签 } return name } } }, yAxis: [ { name: '次数', type: 'value', }, ], series: [ { type: 'line', data: [150, 230, 224, 218, 135, 147, 260], }, ] };

x轴数量过多，全部显示

正常情况下会出现一个隔一个的情况。

讯享网option = { xAxis: { type: 'category', data: ['星期一我很开心', '星期二我很开心', '星期三我很开心', '星期四我很开心', '星期五我很开心', '星期六我很开心', '星期日我很开心','星期一我很开心', '星期二我很开心', '星期三我很开心', '星期四我很开心', '星期五我很开心', '星期六我很开心', '星期日我很开心'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] };

期望效果:

option = { xAxis: { type: 'category', axisLabel:{interval: 0}, data: ['星期一我很开心', '星期二我很开心', '星期三我很开心', '星期四我很开心', '星期五我很开心', '星期六我很开心', '星期日我很开心','星期一我很开心', '星期二我很开心', '星期三我很开心', '星期四我很开心', '星期五我很开心', '星期六我很开心', '星期日我很开心'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] };

x轴数量过多，间隔七条

讯享网option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { interval:7,//interval为x轴两相邻数据之间所包含数据条数 show: true, textStyle: { color: "#a9a9a9", //更改坐标轴文字颜色 fontSize: 10 //更改坐标轴文字大小 }, showMinLabel: true,//显示最小值 showMaxLabel: true,//显示最大值 }, }, yAxis: [ { type: 'value', }, ], series: [ { type: 'line', data: [150, 230, 224, 218, 135, 147, 260,150,110,122,230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260], }, ] };

x轴坐标线

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], splitLine: { show: true, lineStyle:{ color:['red','blue'], } } }, yAxis: { type: 'value', splitLine: { show: false } }, series: [ { type: 'line', yAxisIndex: 0, data: [150, 230, 224, 218, 135, 147, 260], }, ] };