Echarts中X轴/Y轴坐标标签显示不下的问题解决

 更新时间:2023年09月07日 15:30:23   作者:辉常努腻  
本文主要介绍了Echarts中X轴/Y轴坐标标签显示不下的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

解决Echarts X轴/Y轴 坐标标签显示不下的问题 【很长的情况】

     xAxis:[
          {
              //目录轴
          type:"category",
          //数据
          data: data.map(i=>i.location+" -- "+i.city_name),
          //轴标签
          axisLabel:{
          //格式化
              formatter: function (params) {
                  var val = "";
                  //判断长度
                  if (params.length > 4) {
                  //替换原字符
                      val = params.substr(0, 4) + '...';
                      //返回
                      return val;
                  } else {
                  //否则返回原string
                      return params;
                  }
               }
          }
      }
      ],

当然这样还不够

我们可以悬浮显示X坐标轴名字

    tooltip: {
       trigger: 'axis', //'item'  数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。  'axis'  坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 在 ECharts 2.x 中只支持类目轴上使用 axis trigger,在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
       axisPointer: { // 坐标轴指示器,坐标轴触发有效 
           type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
       }
   },

看效果图

解决Echarts X轴/Y轴 坐标标签显示不下的问题 【不是很长的情况】

    xAxis: {
     type: 'category',
      name: "公司名",
      data: myData.map(elem => elem.name),
      axisLabel: {
          interval: 0,    
          rotate: 30     //可以通过旋转解决标签显示不下的问题
      }
    }

这里产生了另一个问题,你会发现自己图表太大了,需要将图表向上移动

首先通过width height 设置图表的宽高我们这里将所有的图表题添加一个class

.box{
    width: 1000px;
    height: 500px;
}

然后将图表移动一下

grid: {
  left: "15%",
  bottom:'38%'
}

看效果图

到此这篇关于Echarts中X轴/Y轴坐标标签显示不下的问题解决的文章就介绍到这了,更多相关Echarts 坐标标签显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • js实现canvas图片与img图片的相互转换的示例

    js实现canvas图片与img图片的相互转换的示例

    本篇文章主要介绍了js实现canvas图片与img图片的相互转换的示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • js/jquery获取文本框输入焦点的方法

    js/jquery获取文本框输入焦点的方法

    本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • js实现交通灯效果

    js实现交通灯效果

    本文主要介绍了js实现交通灯效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS实现在线Excel的附件上传与下载

    JS实现在线Excel的附件上传与下载

    在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,今天小编将为大家介绍如何使用前端HTML+JS+CSS技术通过超链接单元格的形式实现在线Excel附件上传、下载和修改的操作,需要的可以参考下
    2023-08-08
  • 一些在TypeScript上费过时间的地方总结

    一些在TypeScript上费过时间的地方总结

    这篇文章主要给大家介绍了关于一些在ts上费过时间的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-11-11
  • Javascript的匿名函数小结

    Javascript的匿名函数小结

    Javascript的匿名函数小结,需要的朋友可以参考下。
    2009-12-12
  • JS使用Expires max-age判断缓存过期的浏览器实例

    JS使用Expires max-age判断缓存过期的浏览器实例

    这篇文章主要为大家介绍了JS使用Expires max-age判断缓存过期的浏览器实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • JS加密解密之保存到桌面书签

    JS加密解密之保存到桌面书签

    渐进式Web应用是一种结合了网页和原生移动应用(Native App)优点的新型应用开发模式,这篇文章给大家介绍JS加密解密之保存到桌面书签的操作方法,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • MutationObserver监视对DOM 树所做更改的功能妙用

    MutationObserver监视对DOM 树所做更改的功能妙用

    这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 原生JS封装animate运动框架的实例

    原生JS封装animate运动框架的实例

    下面小编就为大家带来一篇原生JS封装animate运动框架的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论