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

简介: 解决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'
       }
   },

看效果图

39.png

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

看效果图

40.png

目录
相关文章
|
6月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
218 0
|
6月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
208 0
|
移动开发 JavaScript 算法
echarts图表坐标轴数据标签添加下划线(下)
echarts图表坐标轴数据标签添加下划线(下)
216 0
|
定位技术
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
346 0
Echarts折线图的x和y轴坐标颜色修改
Echarts折线图的x和y轴坐标颜色修改
230 1
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
176 0
|
数据可视化
echarts图表坐标轴数据标签添加下划线(上)
echarts图表坐标轴数据标签添加下划线(上)
150 0
|
定位技术
100Echarts - 地理坐标/地图(Air Quality - Baidu Map)
100Echarts - 地理坐标/地图(Air Quality - Baidu Map)
70 0
42Echarts - 柱状图(坐标轴刻度与标签对齐)
42Echarts - 柱状图(坐标轴刻度与标签对齐)
244 0
38Echarts - 柱状图(极坐标系下的堆叠柱状图)
38Echarts - 柱状图(极坐标系下的堆叠柱状图)
125 0