在使用echarts图表时，有时会遇到柱状图水平靠着右侧的Y轴显示的情况，此时通过设置inverse: true属性便可以实现
废话不多说，上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts水平柱状图靠右侧Y轴显示</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<body>
<div id="box" style="height: 700px;width: 100%;">
</div>
<script>
let chart = echarts.init(document.querySelector("#box"));
var background = "#0e2147"; //背景
let textColor = "#fff";
let lineColor = "rgba(255,255,255,0.2)";
let colors = [{
borderColor: "rgba(227,161,96,1)",
start: "rgba(227,161,96,0.8)",
end: "rgba(227,161,96,0.3)"
},
{
borderColor: "rgba(0,222,255,1)",
start: "rgba(0,222,255,0.3)",
end: "rgba(0,222,255,0.8)"
},
];
var option = {
backgroundColor: background,
tooltip: {
show: true,
trigger: 'axis',
//formatter: '{b}<br/>{a}: {c}人',
axisPointer: {
type: 'shadow',
}
},
legend: {
top: '5%',
right: '5%',
itemWidth: 20,
itemHeight: 5,
// itemGap: 343,
icon: 'horizontal',
textStyle: {
color: '#ffffff',
fontSize: 20,
},
},
grid: {
show: false,
left: '5%',
top: '10%',
bottom: '8%',
containLabel: true,
//width: '37%'
},
xAxis: [{
type: 'value',
inverse: true, //使横向柱状图靠右侧y轴显示
axisLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
show: true,
color: '#f00'
},
splitLine: {
show: true,
lineStyle: {
color: lineColor
}
},
}],
yAxis: [{
type: 'category',
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: '#2fff40'
}
},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
}],
series: [{
name: "2017",
type: "bar",
barWidth: 25,
stack: "1",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: colors[0].start
},
{
offset: 1,
color: colors[0].end
}
]),
}
},
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
emphasis: {
show: true,
position: 'inside',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
data: [3, 20, 62, 34, 55, 65, 33],
}]
}
chart.setOption(option)
</script>
</body>
</html>
效果图
