前言：
我們再用echarts做柱形圖顯示的時候，有時候不想X軸文字橫向顯示，這篇文章就講解下如何設置屬性使得echarts柱狀圖X軸座標文字垂直或傾斜顯示！
正文：
一、我們先看一下普通的柱形圖的X軸座標文字顯示
1.示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
2.展示效果
二、柱形圖的X軸座標文字垂直展示的 （增加這個屬性 axisLabel）
1.示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
// -----------------------------------------------------橫座標垂直顯示
axisLabel: {
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
}
}
// -----------------------------------------------------橫座標垂直顯示
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
2.展示效果
三、柱形圖的X軸座標文字傾斜顯示（增加這個屬性 axisLabel）
1.示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
// -----------------------------------------------------橫座標傾斜顯示
axisLabel: {
interval:0,
rotate:-30 //傾斜的程度
}
// -----------------------------------------------------橫座標傾斜顯示
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
2.展示效果
四、常見的坑點
1.文字太長顯示不全
解決方案：增加grid屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
grid : { // ---------------------------增加這個屬性，bottom就是距離底部的距離
bottom : '60%'
},
xAxis: {
data: ["男秋冬季男士加絨加厚保暖牛仔襯衣","男韓版圓領針織衫秋冬保暖毛衣","雪紡衫","褲子","冬季百搭真皮小白鞋女休閒單鞋","男士中筒襪秋冬潮流純色商務加厚棉長襪"],
// -----------------------------------------------------橫座標垂直顯示
axisLabel: {
interval:0,
formatter:function(value)
{
return value.split("").join("\n");
}
}
// -----------------------------------------------------橫座標垂直顯示
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
展示效果：
總結：
echarts在做圖表展示時的確很好用，裏面出現的問題，如果不能馬上解決，不要着急，一定要去翻閱官方的api，基本上通過查閱api都可以解決我們的問題。
我是阿達，一名喜歡分享知識的程序員，時不時的也會荒腔走板的聊一聊電影、電視劇、音樂、漫畫，這裏已經有485位小夥伴在等你們啦，感興趣的就趕緊來點擊關注我把，哪裏有不明白或有不同觀點的地方歡迎留言！