echarts
echarts copied to clipboard
当设置了yAxis.z 值时 yAxis.splitLine 分割线,覆盖在了series.item上,没法单独设置yAxis.splitLine的层级
Version
5.5.0
Link to Minimal Reproduction
Steps to Reproduce
- 通过cnpm 安装5.5.0版本的echarts
- 脚本顶部引入echarts ;import * as echarts from "echarts";
- 初始化图表 echarts.init(chartDom, null, { renderer: "canvas" })
关键配置
{
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
yAxis: {
scale: true,
splitArea: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'yellow',
type: [8, 8],
}
},
splitNumber: 5,
axisLabel: {
inside: true,
margin: 0,
verticalAlign: 'bottom'
},
boundaryGap: false,
z: 3
},
}
Current Behavior
场景重现
当通过grid.containLabel: true
将坐轴包含在gird中,同时设置yAxis.axisLabel.inside=true
将y轴刻度标签朝向,添加选项yAxis.z=3
使y轴层级高于series(需求所致),显示y轴分割线(splitLine),这时分割线会覆盖在series.item上,目前没有办法单独去设置splitLine的层级
效果
Expected Behavior
需求是需要y轴层级高于series,所以设置了y轴的z值
,但此时y轴分割线覆盖在了series上,有办法单独让分割线处于series下面么
希望能提供单独设置splitLine层级的属性
Environment
System:
OS: macOS 14.1.2
CPU: (14) arm64 Apple M3 Max
Memory: 153.39 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.184
Edge: 121.0.2277.128
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
When the yAxis.z value is set, the yAxis.splitLine dividing line covers the series.item, and the level of yAxis.splitLine cannot be set separately.
One could squeeze a chart a little, but mixing axis labels with candlesticks looks cluttered.
Could be better - Demo Code
还有其他的解决方案么,我们需要把y轴覆盖在k线图上
try with two overlapping Y-axes - one for splitlines without labels, the second with labels. Different z values.
try with two overlapping Y-axes - one for splitlines without labels, the second with labels. Different z values.
在k线图中需要,监听datazoom事件来,计算min,max值,以此达到两个y轴重叠