echarts
echarts copied to clipboard
设置k线图xAxis.axisLabel.showMaxLabel:true,强制显示最后一个x轴标签时,标签显示不全,被截断
Version
5.4.3
Link to Minimal Reproduction
Steps to Reproduce
- 通过cnpm 安装5.4.3版本的echarts
- 脚本顶部引入echarts ;
import * as echarts from "echarts"; - 初始化图表
echarts.init(chartDom, null, { renderer: "canvas" })
关键option
{
grid: {
left: 20,
right: 20,
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: data0.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
axisLabel: {
showMaxLabel: true,
showMinLabel: true,
formatter(value, index) {
if (index === 0 || index === 45 - 1) {
return value;
}
}
}
}
}
效果图
2013/6/13没有显示完全
Current Behavior
一页最多显示45天的k线数据,且只需显示当前可视数据中开始和结束的两个时间标签,当通过 showMaxLabel=true,showMinLabel=true来达到所需要目的时,最后一个标签显示不完全,查看文档,也没有找到相关可以设置最后一个标签偏移量的属性
提示
根据公司UI标注我设置了grid的left,right都为20
Expected Behavior
能够完整的显示最后一个标签
Environment
System:
OS: macOS 14.1.2
CPU: (14) arm64 Apple M3 Max
Memory: 73.36 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.13.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Managers:
Homebrew: 4.1.24 - /opt/homebrew/bin/brew
pip3: 21.2.4 - /usr/bin/pip3
RubyGems: 3.0.3.1 - /usr/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 15.0.0 - /usr/bin/gcc
Git: 2.39.3 - /usr/bin/git
Clang: 15.0.0 - /usr/bin/clang
Curl: 8.1.2 - /usr/bin/curl
Servers:
Apache: 2.4.56 - /usr/sbin/apachectl
Virtualization:
Parallels: 19.1.1 - /usr/local/bin/prlctl
IDEs:
Vim: 9.0 - /usr/bin/vim
Xcode: /undefined - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Perl: 5.30.3 - /usr/bin/perl
Python3: 3.9.6 - /usr/bin/python3
Ruby: 2.6.10 - /usr/bin/ruby
Databases:
SQLite: 3.39.5 - /usr/bin/sqlite3
Browsers:
Chrome: 121.0.6167.160
Edge: 121.0.2277.112
Safari: 17.1.2
Any additional comments?
No response
@soeasyjx 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
Set xAxis.axisLabel.showMaxLabel:true to force the display of the last x-axis label when the last x-axis label is forcibly displayed, and the label is not displayed completely and is truncated
yep, frustrating bug 🐛 - being unable to see last date.
Note to developers - does grid.containLabel work only for left-side labels?
Workaround - add an invisible second yAxis: { position: 'right', data:[' '], show:false }
yep, frustrating bug 🐛 - being unable to see last date. Note to developers - does grid.containLabel work only for left-side labels? Workaround - add an invisible second yAxis:
{ position: 'right', data:[' '], show:false }
希望能从根本上解决这个问题
#19228 of the coming v5.5.0 may meet your needs. Feel free to try the release candidate and leave your comment.
Turns out the reason is simple - grid.right:20 means (only) 20 pixels on right side allowed. Not enough for the last X label. Solution is to increase grid.right or remove it and let the chart adjust itself - Demo Code. 📌 please close issue if problem solved.