[Bug] 横向柱状图想要实现 label 最后测对齐

[guoliuqing123]

Version

无

Link to Minimal Reproduction

无

Steps to Reproduce

const data = [
[
{
"number": null,
"avgAge": null,
"license": null,
"proportion": null,
"type": "education",
"name": "硕士",
"value": 138,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#7591c8"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": null,
"type": "education",
"name": "本科",
"value": 549,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#60d8ac"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": null,
"type": "education",
"name": "专科",
"value": 131,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#64a7eb"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": null,
"type": "education",
"name": "其他",
"value": 73,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#aaaaaa"
}
}
],
[
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.86,
"type": "compile",
"name": "空管在编",
"value": 364,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#7591c8"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.12,
"type": "compile",
"name": "合同",
"value": 50,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#60d8ac"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.03,
"type": "compile",
"name": "劳务派遣",
"value": 11,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"color": "#64a7eb"
}
}
],
[
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.81,
"type": "sex",
"name": "男",
"value": 858,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"borderWidth": 2,
"color": "#7591c8"
}
},
{
"number": null,
"avgAge": null,
"license": null,
"proportion": 0.19,
"type": "sex",
"name": "女",
"value": 202,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"itemStyle": {
"borderWidth": 2,
"color": "#60d8ac"
}
}
]
]
option = {
tooltip: {
},
legend:[
{
left: '13%',
selectedMode: false, //图例选择的模式
bottom: '5%',
data:data[2],
icon:'circle'
},
{
left: this.type === 'officeKB' ?'47%' :'46%',
selectedMode: this.type === 'conductionKB' ? true : false, //图例选择的模式
top: '1%',
data:data[1],
icon:'circle'
},
{
left: this.type === 'officeKB' ?'47%' :'46%',
selectedMode: false, //图例选择的模式
top: '48%',
data:data[0],
icon:'circle'
},
],
grid: [
{ //柱状图1
top: '11%',
width: '50%',
bottom: '60%',
right: 20,
// containLabel: true
},
{ //柱状图2
top: '55%',
width: '50%',
bottom: 0,
right: 20,
// containLabel: true
}
],
xAxis: [
{
type: 'value',
show: false,
},
{
type: 'value',
show: false,
gridIndex: 1,
}
],
yAxis: [
{
type: 'category',
show: false,
},
{
gridIndex: 1,
type: 'category',
show: false,
}
],
series: [
{
type: 'bar',
stack: 'compile1',
name:'空管在编',
barWidth: 15,
xAxisIndex: 0,
yAxisIndex: 0,
z: 3,
label: {
normal: {
show: true,
position: 'right', // 将标签放在条形的右侧
right:'50%'
}
},
showBackground: true,
itemStyle:{
color: '#7591C8'
},
data: [data[1].filter(item=>item.name === '空管在编')[0].value],
},
{
type: 'bar',
stack: 'compile2',
name:'合同',
barWidth: 15,
xAxisIndex: 0,
yAxisIndex: 0,
z: 3,
label: {
normal: {
show: true,
position: 'right', // 将标签放在条形的右侧

    }
  },
  showBackground: true,
  itemStyle:{
    color: '#60D8AC'
  },
  data: [data[1].filter(item=>item.name === '合同')[0].value],
},
{
  type: 'bar',
  stack: 'compile3',
  name:'劳务派遣',
  barWidth: 15,
  xAxisIndex: 0,
  yAxisIndex: 0,
  z: 3,
  label: {
    normal: {
      show: true,
      position: 'right',
    }
  },
  showBackground: true,
  itemStyle:{
    color: '#64A7EB'
  },
  data: [data[1].filter(item=>item.name === '劳务派遣')[0].value],
},
{
  type: 'bar',
  stack: 'education1',
  name:'硕士',
  barWidth: 15,
  xAxisIndex: 1,
  yAxisIndex: 1,
  z: 3,
  label: {
    normal: {
      show: true,
      position: 'right',
    }
  },
  showBackground: true,
  itemStyle:{
    color: '#7591C8'
  },
  data: [data[0].filter(item=>item.name === '硕士')[0].value]
},
{
  type: 'bar',
  stack: 'education2',
  name:'本科',
  barWidth: 15,
  xAxisIndex: 1,
  yAxisIndex: 1,
  z: 3,
  label: {
    normal: {
      show: true,
      position: 'right',
    }
  },
  showBackground: true,
  itemStyle:{
    color: '#60D8AC'
  },
  data: [data[0].filter(item=>item.name === '本科')[0].value]
},
{
  type: 'bar',
  stack: 'education3',
  name:'专科',
  barWidth: 15,
  xAxisIndex: 1,
  yAxisIndex: 1,
  z: 3,
  label: {
    normal: {
      show: true,
      position: 'right',
    }
  },
  showBackground: true,
  itemStyle:{
    color: '#64A7EB'
  },
  data: [data[0].filter(item=>item.name === '专科')[0].value]
},
{
  type: 'bar',
  stack: 'education4',
  name:'其他',
  barWidth: 15,
  xAxisIndex: 1,
  yAxisIndex: 1,
  z: 3,
  label: {
    normal: {
      show: true,
      position: 'right',
    }
  },
  showBackground: true,
  itemStyle:{
    color: '#aaaaaa'
  },
  data: [data[0].filter(item=>item.name === '其他')[0].value]
},

]
};

Current Behavior

label文字未设置成同一列垂直方向对齐

Expected Behavior

目的实现橙色的文字居于最右侧 红色的地方 并且垂直方向上排成一列 且对齐

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

@guoliuqing123 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Horizontal column chart wants to achieve final label alignment

[helgasoft]

bar.label.position is not alignment.
There is no API setting to align all labels to the rightmost side of a bar chart. You'll need to calculate offset [x,0] for each bar label.

[Ovilia]

Check out https://echarts.apache.org/zh/option.html#series-bar.labelLayout

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!