echarts中labeld的文字如果过长，就会出现下图中的效果
我们可以先试着通过设置文字 倾斜 来解决问题
var option = {
tooltip: {
trigger: 'axis', }, toolbox: {
feature: {
dataView: {
show: true, readOnly: false}, magicType: {
show: true, type: ['line', 'bar']}, restore: {
show: true}, saveAsImage: {
show: true} } }, legend: {
data: ['直方图', '折线图'] }, xAxis: [ {
type: 'category', data: nameArr, axisPointer: {
type: 'shadow' }, axisLabel: {
rotate: 45,// 在这里设置倾斜角度 interval: 0,//标签设置为全部显示 } } ], yAxis: [ {
type: 'value', name: '次数', min: 0, max: 6, } ], series: [ {
name: '直方图', type: 'bar', data: valArr }, {
name: '折线图', type: 'line', color: ['#dd6b66'], yAxisIndex: 0, data: valArr } ] }; 效果如下，还是显示不完全
可以通过设置formatter回调函数来设置label文字格式
var option = {
tooltip: {
trigger: 'axis', }, toolbox: {
// }, legend: {
data: ['直方图', '折线图'] }, // grid: {
// y2: 100 // }, xAxis: [ {
type: 'category', data: nameArr, axisPointer: {
type: 'shadow' }, axisLabel: {
// rotate: 45, interval: 0,//标签设置为全部显示 formatter: function(val) {
// 这是回调函数，参数是label中的文字 var charArr = val.split(''); var str = '', i for(i = 0, i < charArr.length; i++) {
str += charArr[i]; if(i % 4 == 0) str += '\n'; //每隔4个字换行 } return str } } } ], yAxis: [ // ], series: [ // ] }; 还有最后一点点问题，label的最后一行显示不全
改变一下高度即可
var option = {
tooltip: {
// }, toolbox: {
// }, legend: {
data: ['直方图', '折线图'] }, // 加上这一句 grid: {
y2: 100 }, xAxis: [ // ], yAxis: [ // ], series: [ // ] }; 
OK
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231084.html原文链接：https://javaforall.net
