怎么处理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下载，更多示例将会持续更新，欢迎关注。