echartsX轴、y轴文字太长；重叠显示。

问题描述

echarts：X轴、y轴文字太长；重叠显示。

解决方案1：截取部分字符；超出显示…

        xAxis: {
          data: [ "羽绒服超过5个字了哈哈哈", "羊毛衫", "帽子也超过5个字了", "裤子", "高跟鞋", "袜子", ],
          axisLabel: {
            show: true,
            interval:0,
            //超过5个文字截取显示...
            formatter: function (value) {
              var val = "";
              if (value.length > 5) {
                val = value.substr(0, 5) + "...";
                return val;
              } else {
                return value;
              }
            },
          },
        },

效果如下：

产生新的问题：文字显示不全

解决方案2：加上鼠标事件;滑过显示全部字符。

 1.triggerEvent: true,//  加上坐标轴的标签是否响应和触发鼠标事件，默认不响应。
 2.加入鼠标滑过方法配置

效果如下：

完整代码

<template>
  <div style="height: 100%; width: 100%"></div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$el);
    this.init();
  },
  methods: {
    init() {
      const option = {
        xAxis: {
          data: [
            "羽绒服超过5个字了哈哈哈",
            "羊毛衫",
            "帽子也超过5个字了",
            "裤子",
            "高跟鞋",
            "袜子",
          ],
          triggerEvent: true,
          axisLabel: {
            show: true,
            interval: 0,
            //超过5个文字截取显示...
            formatter: function (value) {
              var val = "";
              if (value.length > 5) {
                val = value.substr(0, 5) + "...";
                return val;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      this.myChart.setOption(option);
      this.tooltipHandler(this.myChart);
    },
    // 创建悬浮框
    tooltipHandler(myChart) {
      var tooltipDiv = document.getElementById("tooltipId");
      if (!tooltipDiv) {
        var div = document.createElement("div");
        div.setAttribute("id", "tooltipId");
        div.style.display = "block";
        document.querySelector("html").appendChild(div);
      }
      myChart.on("mouseover", function (params) {
        //params.componentType如果是y轴的话，需要改为yAxis
        if (params.componentType == "xAxis") {
          var tooltipDiv = document.querySelector("#tooltipId");
          var elementStyle =
            "position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: rgba(96, 98, 102,.9);box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px";
          tooltipDiv.style.cssText = elementStyle;
          tooltipDiv.innerHTML = params.value;
          document.querySelector("html").onmousemove = function (event) {
            var tooltipDiv = document.querySelector("#tooltipId");
            var xx = event.pageX - 20; //悬浮框偏移位置
            var yy = event.pageY + 15;
            tooltipDiv.style.top = yy + "px";
            tooltipDiv.style.left = xx + "px";
          };
        }
      });
      myChart.on("mouseout", function (params) {
        //params.componentType如果是y轴的话，需要改为yAxis
        if (params.componentType == "xAxis") {
          var tooltipDiv = document.querySelector("#tooltipId");
          tooltipDiv.style.cssText = "display:none";
        }
      });
    },
  },
};
</script>

代码仅供参考;如有不正望指出。