怎么处理ECharts超长的标签文本

效果图：

截取展示

旋转角度展示

x 轴标签文本过长，会导致显示不全。

解决方案 1（截取展示）：

var options = {
  xAxis: {
    type: "category",
    data: [
      "印度尼西亚",
      "马来西亚",
      "巴基斯坦",
      "斯洛文尼亚",
      "安哥拉",
      "澳大利亚",
      "哥斯达黎加",
    ],
    axisLabel: {formatter: function (value, index) {console.log(value, index);
        if (value.length > 3) {return value.slice(0, 3) + "..."; // 标签截取
        }
        return value;
      },
    },
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      barWidth: 30,
      data: [143, 185, 193, 143, 185, 193, 50],
    },
  ],
};

var dom = document.getElementById("myCharts");
var myChart = echarts.init(dom);
myChart.setOption(options);

解决方案 2（旋转角度展示）：

var options = {
  xAxis: {
    type: "category",
    data: [
      "印度尼西亚",
      "马来西亚",
      "巴基斯坦",
      "斯洛文尼亚",
      "安哥拉",
      "澳大利亚",
      "哥斯达黎加",
    ],
    axisLabel: {rotate: -20, // 标签旋转的角度},
  },
  yAxis: {},
  series: [
    {
      type: "bar",
      barWidth: 30,
      data: [143, 185, 193, 143, 185, 193, 50],
    },
  ],
};

var dom = document.getElementById("myCharts");
var myChart = echarts.init(dom);
myChart.setOption(options);

示例代码下载

可以复制以上代码运行查看使用效果，也可以到 GitHub: https://github.com/Jackyyans/code123 下载，更多示例将会持续更新，欢迎关注。