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

Posted 2022-11-12 辉常努腻

解决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%'

看效果图