Echarts数据可视化开发
  Y7bRdvZFQlwk 2023年12月23日 14 0

1、Y坐标文字过长被遮挡

解决办法:设置 grid 配置项的 left 为任意数值后,图表会计算y轴宽度并自适应

grid: {
    left: 0,   // 与容器左侧的距离
    right: 0, // 与容器右侧的距离
    bottom: "3%",
    top: "0",
    containLabel: true // grid 区域是否包含坐标轴的刻度标签
}

2、X轴标签过长,展示不全

解决办法:旋转角度,倾斜展示或者省略号表示

xAxis: {
  axisLabel: {
    color: "#5e6877", // x轴字体颜色
    interval: 0, // 0 强制显示所有标签,默认auto
    rotate: 20 // 刻度标签旋转的角度
  }
}

// 省略号表示
xAxis: {
  axisLabel: {
     formatter: function (value) {
         if (value.length > 6) {
             return value.substring(0, 6) + "...";
         } else {
             return value;
         }
     }
	}
}
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月23日 0

暂无评论

推荐阅读
Y7bRdvZFQlwk