ECharts柱状图x轴出现文字被遮挡显示不出来的几种解决方法

本周主要是配合主体单位做好大屏的数据展示，以保证领导视察的时候能够看到一些实实在在的内容，因此主要看的是农业大数据，大屏展示这部分的内容。涉及到ECharts图表的一些修改

刚好我们遇到的是x轴出现文字被遮挡显示不出来的问题，百度也找了些资料，并不能很好的检索出我想要的结果。于是觉得有必要写这一篇，哪怕只增加点搜索素材呢

解决思路

参考搜索的结果、实践的结果，以及客户的建议，解决思路如下

1. 全部横着显示出来
2. 横向上下交替显示（由于我这边空间小，这个办法不太合适）
3. 把文本显示到柱状图上（不是top，而是在中间，在空间意义上的“上”面）
4. 用箭头或者指向线标识（客户的建议，由于不是太了解实现的可行性，再加上空间比较狭小，该方案未采取）
5. 在x轴斜着摆放显示（由于空间不足，未采取，设置rotate参数即可，示例中也有被注释的代码）

结合实际情况，我们选择了上述的1和3.

方法1 代码如下：

   axisLabel: {
                show: true,
                interval:0,
                //rotate:40,
                formatter:function(value,index)
                {
                  if (index % 2 != 0) {
                    return ' ' + value;
                  }
                  else {
                    return value;
                  }
                },
                textStyle: {
                  color: '#fff'
                }
              },

方法3 代码如下：

series: [
            {
              name: '存栏数',
              type: 'bar',
              barGap: 0.2,
              data: in_count,
              barWidth: 30,
              label: {
                show: true, // 显示标签
                position: 'insideBottom', // 标签位置：内部
                formatter: function(params) // 标签格式器：显示数据值
                {
                  
                    let arr = params.name.split('');
                    let rs = '';
                    for(var i=0;i<arr.length;i++){
                      rs+=arr[i]+"\n";
                    }
                    return rs;
                }
              }
            }
          ]

完整示例代码

async getPigeonStockData() {
        const { data } = await getPigeonStockData(this.organization.id);
        let result = data.data;
        let pigeonName = [];
        let in_count = [];
        let out_count = [];
        let rest_count = [];
        if(result.length > 0) {
          result.forEach(item => {
            pigeonName.push(item.name);
            in_count.push(item.in_count);
            out_count.push(item.out_count);
            rest_count.push(item.rest_count);
          })
        }
        //种鸽数据 树状图
        let chartDom = document.getElementById('pigeonData');
        let myChart = echarts.init(chartDom);
        myChart.clear()
        myChart.setOption({
          title: {
            textStyle: {
              color: '#36dcef',
              fontSize: 14
            }
          },
          color: ['#06b78e', '#92590f', '#d6056e'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: 30,
            left: 55,
            right: 10,
            bottom: 20
          },
          legend: {
            itemHeight: 10,
            itemWidth: 10,
            data: [
              { name: '存栏数', icon: 'circle', textStyle: { color: '#fff' }}
            ],
            right: 15,
            top: 0
          },
          toolbox: {
            show: true
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: pigeonName,
              // data: ['岳阳王鸽', '石歧鸽', '天成鸽', '米玛斯'],
              axisLabel: {
                show: true,
                interval:0,
                //rotate:40,
                formatter:function(value,index)
                {
                  if (index % 2 != 0) {
                    return ' ' + value;
                  }
                  else {
                    return value;
                  }
                },
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#6e7079',
                  width: 1
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: "单位（对）",
              // max: 100,
              min: 0,
              // 是否支持y轴不从零开始,而是从最小的那个值开始
              scale: true,
              splitNumber: 5,
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#6e7079',
                  width: 1
                }
              }
            }
          ],
          series: [
            {
              name: '存栏数',
              type: 'bar',
              barGap: 0.2,
              data: in_count,
              barWidth: 30,
              label: {
                show: true, // 显示标签
                position: 'insideBottom', // 标签位置：内部
                formatter: function(params) // 标签格式器：显示数据值
                {
                   // console.log("par",params);
                    let arr = params.name.split('');
                    let rs = '';
                    for(var i=0;i<arr.length;i++){
                      rs+=arr[i]+"\n";
                    }
                    return rs;
                }
              }
            }
          ]
        });

结束语

虽然要迎合领导检查，心里压力挺大的，好在前面的准备工作做得还算充足，改起来也还比较快。图表的展示，大屏数据的逻辑性等都还算不错，对演示的人员来说也还比较好介绍。也希望能够尽快顺利完成验收，回了款，我们的工资也有了着落了。

欢迎大家多多关注和支持！ 我们一直会保持不定期更新，绝对不会放弃，让我们都遇到更好的自己！