echart第一根柱子遮挡住问题和柱子宽度设置

最新推荐文章于 2023-08-31 14:21:35 发布

不完美女孩-

最新推荐文章于 2023-08-31 14:21:35 发布

阅读量476

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/LJJONESEED/article/details/129380921

版权

文章讲述了如何在Echarts图表中设置X轴为category类型时，处理类目项过长的问题。通过自定义axisLabel的formatter函数实现文字换行显示，确保柱状图的第一根柱子不会被遮挡，并控制了柱图的宽度。

摘要由CSDN通过智能技术生成

{
          xAxis: {
            type: "category",
            
            //注释这一行第一根柱子就不会被挡住
            // boundaryGap: false,
            data: xxcontent.xContent,
            axisLabel: {
              interval: 0,
              // 这个是显示内容文字
              formatter: function (value) {
                debugger;
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 6; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              type: "bar",
              stack: "Total",
              data: xxcontent.yContent,
				//柱图宽度**
              barWidth: 30,
            },
          ],
        }