echarts:条形图显示右对齐的值
echarts: bar chart show the value on the right align
如图所示,希望在右对齐中显示值,但没有找到选项。有帮助吗?谢谢
您可以简单地添加另一个轴来实现此目的,如下面的演示:
这有点像把戏。
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
color: ['#3398DB'],
grid: {
containLabel: true
},
yAxis : [
{
type : 'category',
data : ['192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.12.15', '192.168.167'],
},
{
type : 'category',
data : seriesData,
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
xAxis : [
{
type : 'value',
splitLine: {
show: false
}
}
],
series : [
{
type:'bar',
data:seriesData
}
]
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>
如图所示,希望在右对齐中显示值,但没有找到选项。有帮助吗?谢谢
您可以简单地添加另一个轴来实现此目的,如下面的演示: 这有点像把戏。
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
color: ['#3398DB'],
grid: {
containLabel: true
},
yAxis : [
{
type : 'category',
data : ['192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.12.15', '192.168.167'],
},
{
type : 'category',
data : seriesData,
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
xAxis : [
{
type : 'value',
splitLine: {
show: false
}
}
],
series : [
{
type:'bar',
data:seriesData
}
]
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>