首页 前端知识 echarts坐标轴名称换行

echarts坐标轴名称换行

2024-08-14 00:08:24 前端知识 前端哥 705 912 我要收藏

一、期望效果:

期望超过6个字换行,最多可显示十个字
如图:
在这里插入图片描述

二、踩坑:

echartswidthoverflow设置后换行无效。(如果其他人有设置有效的 还请说明下)
在这里插入图片描述
在这里插入图片描述

三、解决方案:

\n换行,这里写的returnName函数处理
简单案例:

// 将要显示的名字 用此函数处理下即可
const returnName = (name => {
  const len = name.length
  if(len > 6 && len <= 10){
    return name.substring(0, 6) + '\n' +name.substring(6, 10)
  }else if(len > 10){
    return name.substring(0, 6) + '\n' +name.substring(6, 10) + '...'
  }else{
    return name
  }
})
option = {
  xAxis: {
    name: returnName('一二三四五六七八九十哈'),
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: returnName('一二三四五六七八九十哈'),
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15533.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!