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前后端实现身份证号验证代码解析

    JS前后端实现身份证号验证代码解析

    这篇文章主要介绍了JS前后端实现身份证号验证代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序获取当前位置的详细步骤

    微信小程序获取当前位置的详细步骤

    微信小程序开发中选择地理位置就需要通过官方文档API去判断用户是否授权地理位置,用户开启授权后可直接获取地理位置,下面这篇文章主要给大家介绍了关于微信小程序获取当前位置的详细步骤,需要的朋友可以参考下
    2022-12-12
  • 微信小程序实现的涂鸦功能示例【附源码下载】

    微信小程序实现的涂鸦功能示例【附源码下载】

    这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2018-01-01
  • jquery获取URL中参数解决中文乱码问题的两种方法

    jquery获取URL中参数解决中文乱码问题的两种方法

    从A页面通过url传参到B页面时,获取URL中参数出现中文乱码问题,解析url参数的正确方法如下,感兴趣的朋友可以参考下
    2013-12-12
  • JS实现移动端上下滑动一次一屏

    JS实现移动端上下滑动一次一屏

    这篇文章主要为大家详细介绍了JS实现移动端上下滑动一次一屏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Webpack框架核心概念(知识点整理)

    Webpack框架核心概念(知识点整理)

    webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下
    2017-12-12
  • 原生Js 实现的简单无缝滚动轮播图的示例代码

    原生Js 实现的简单无缝滚动轮播图的示例代码

    这篇文章主要介绍了原生Js 实现的简单无缝滚动轮播图的示例代码,帮助大家更好的理解喝学习使用js,感兴趣的朋友可以了解下
    2021-05-05
  • [HTML/CSS/Javascript]WWTJS

    [HTML/CSS/Javascript]WWTJS

    [HTML/CSS/Javascript]WWTJS...
    2007-09-09
  • JavaScript的变量声明提升问题浅析(Hoisting)

    JavaScript的变量声明提升问题浅析(Hoisting)

    大家应该都只奥javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多,这篇文章将再次谈谈关于这方面的问题,有需要的朋友们可以参考借鉴。
    2016-11-11
  • 原生JS实现列表内容自动向上滚动效果

    原生JS实现列表内容自动向上滚动效果

    这篇文章主要介绍了原生JS实现列表内容自动向上滚动效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05

最新评论