echarts [Bug] 横向柱状图的label数字过大导致部分被截取

yqlxgs2m  于 5个月前  发布在  Echarts
关注(0)|答案(1)|浏览(52)

Version

5.2.2

No response

Steps to Reproduce

1.options: {
color: ['#053dc8'],
tooltip: {
show: data.showTooltip,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '14px',
right: '4%',
top: '16px',
bottom: '0',
containLabel: true
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
inverse: true,
data: data.yAxisData,
interval: 56,
axisTick: {
show:false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
margin: 24
}
},
series: {
...data.series,
label: {
show: true,
position: 'right',
valueAnimation: true,
formatter: (params) => {
if (ValueType['Money'] === data.valueType) {
return '¥ ' + params.value
} else if (ValueType['Ratio'] === data.valueType) {
return params.value + ' %'
} else {
return params.value
}
}
}
},
dataZoom: data.dataZoom
}

Current Behavior

Expected Behavior

1.可以自动调整横坐标的位置使得数据展示完整
2.或者有其他的解决方案使数据展示完整

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

vbkedwbf

vbkedwbf1#

@ScWtt 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] The horizontal bar chart has too large a label number that causes some to be intercepted

BODY

Version

5.2.2

No response

Steps to Reproduce

  1. options: {
    color: ['#053dc8'],
    tooltip: {
    show: data. showTooltip,
    trigger: 'axis',
    axisPointer: {
    type: 'shadow'
    }
    },
    grid: {
    left: '14px',
    right: '4%',
    top: '16px',
    bottom: '0',
    containLabel: true
    },
    xAxis: {
    splitLine: {
    lineStyle: {
    type: 'dashed'
    }
    }
    },
    yAxis: {
    inverse: true,
    data: data.yAxisData,
    interval: 56,
    axisTick: {
    show:false // don't show axis tick marks
    },
    axisLine: {
    show: false, // do not display the coordinate axis
    },
    axisLabel: {
    margin: 24
    }
    },
    series: {
    ...data.series,
    label: {
    show: true,
    position: 'right',
    valueAnimation: true,
    formatter: (params) => {
    if (ValueType['Money'] === data. valueType) {
    return '¥ ' + params.value
    } else if (ValueType['Ratio'] === data. valueType) {
    return params.value + '%'
    } else {
    return params.value
    }
    }
    }
    },
    dataZoom: data.dataZoom
    }

Current Behavior

Expected Behavior

  1. The position of the abscissa can be automatically adjusted to make the data display complete
  2. Or there are other solutions to make the data display complete

Environment

- OS:
-Browser:
- Framework:

Any additional comments?

No response

相关问题