Open guoliuqing123 opened 2 months ago
@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. 🤗
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.
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', // 将标签放在条形的右侧
] };
Current Behavior
Expected Behavior
目的实现橙色的文字居于最右侧 红色的地方 并且垂直方向上排成一列 且对齐
Environment
Any additional comments?
No response