echart x轴文字过长换行全部显示

最新推荐文章于 2024-02-22 16:22:50 发布

暖暖小时光

最新推荐文章于 2024-02-22 16:22:50 发布

阅读量2.5k

点赞数

分类专栏： echart

原文链接：https://blog.csdn.net/orangeverity/article/details/107159296

版权

echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用echart图表开发过程中，经常遇到类目轴（一般x轴）数据名称过长导致图例展示效果很差，写了一个方法当x轴名称较长时换行显示。效果如下图所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <div class="main" style="width: 100%; height: 100%;">
      <div id="myChart" style="height: 600px;"></div>
    </div>
  </body>
  <script src="https://libs.cdnjs.net/jquery/3.5.1/jquery.js"></script>
  <script src="https://libs.cdnjs.net/echarts/4.8.0/echarts-en.common.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById("myChart"));
    option = {
      xAxis: {
        triggerEvent: true, // 开启坐标轴的标签响应和触发鼠标事件
        type: "category",
        axisLabel: {
          // 坐标轴刻度标签换行处理
          formatter: function (params) {
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = 7; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ""; // 表示每一次截取的字符串
                var start = p * provideNumber; // 开始截取的位置
                var end = start + provideNumber; // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr; // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName;
          },
        },
 
        data: [
          "我是一个名字很长的类目1",
          "我是一个名字很长的类目2",
          "我是一个名字很长的类目3",
          "我是一个名字很长的类目4",
          "我是一个名字很长的类目5",
          "我是一个名字很长的类目6",
          "我是一个名字很长的类目7",
        ],
      },
 
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(220, 220, 220, 0.8)",
          },
        },
      ],
    };
    myChart.setOption(option);
  </script>
</html>

暖暖小时光

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
echart x轴文字过长换行全部显示

使用echart图表开发过程中，经常遇到类目轴（一般x轴）数据名称过长导致图例展示效果很差，写了一个方法当x轴名称较长时换行显示。效果如下图所示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&..
复制链接

扫一扫