echarts icon indicating copy to clipboard operation
echarts copied to clipboard

当设置了yAxis.z 值时 yAxis.splitLine 分割线,覆盖在了series.item上,没法单独设置yAxis.splitLine的层级

Open soeasyjx opened this issue 1 year ago • 4 comments

Version

5.5.0

Link to Minimal Reproduction

demo

Steps to Reproduce

  1. 通过cnpm 安装5.5.0版本的echarts
  2. 脚本顶部引入echarts ;import * as echarts from "echarts";
  3. 初始化图表 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的层级

效果

image

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 avatar Feb 21 '24 07:02 soeasyjx

@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.

echarts-bot[bot] avatar Feb 21 '24 07:02 echarts-bot[bot]

One could squeeze a chart a little, but mixing axis labels with candlesticks looks cluttered. Could be better - Demo Code image

helgasoft avatar Feb 21 '24 22:02 helgasoft

还有其他的解决方案么,我们需要把y轴覆盖在k线图上

soeasyjx avatar Feb 22 '24 01:02 soeasyjx

try with two overlapping Y-axes - one for splitlines without labels, the second with labels. Different z values.

helgasoft avatar Feb 22 '24 07:02 helgasoft

try with two overlapping Y-axes - one for splitlines without labels, the second with labels. Different z values.

在k线图中需要,监听datazoom事件来,计算min,max值,以此达到两个y轴重叠

soeasyjx avatar Mar 01 '24 06:03 soeasyjx