效果图:
截取展示
旋转角度展示
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
下载,更多示例将会持续更新,欢迎关注。