效果图:

截取展示

旋转角度展示

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