自定义k线图最大值和最小值标记的图形时，平移k线图，当最大值和最小值正好处于y轴边缘时，此时自定义标记图形有可能会覆盖y轴label

[soeasyjx]

Version

5.4.3

Link to Minimal Reproduction

demo

Steps to Reproduce

1. 通过cnpm 安装5.4.3版本的echarts
2. 脚本顶部引入echarts ；import * as echarts from "echarts";
3. 初始化图表 echarts.init(chartDom, null, { renderer: "canvas" })

关键option

series: [
    {
      name: '日K',
      type: 'candlestick',
      data: data0.values,
      clip: false,
      itemStyle: {
        color: upColor,
        color0: downColor,
        borderColor: upBorderColor,
        borderColor0: downBorderColor
      },
      markPoint: {
        label: {
          formatter: function (param) {
            return param != null ? Math.round(param.value) + '' : '';
          }
        },
        data: [
          {
            name: 'highest value',
            type: 'max',
            symbolKeepAspect: true,
            symbol: 'path://M0 0l1 0l0 0.00001z',
            valueDim: 'highest',
            symbolSize: 30,
            symbolOffset: ['-50%', 0],
            itemStyle: {
              borderColor: '#777777'
            },
            label: {
              color: '#777777',
              position: 'left'
            }
          },
          {
            name: 'lowest value',
            type: 'min',
            symbolKeepAspect: true,
            symbol: 'path://M0 0l1 0l0 0.00001z',
            symbolSize: 30,
            symbolOffset: ['-50%', 0],
            itemStyle: {
              borderColor: '#777777'
            },
            label: {
              color: '#777777',
              position: 'left'
            },
            valueDim: 'lowest'
          }
        ]
      }
    }
  ]

效果图

2013/4/2日为最大值，处于边缘位置，正好覆盖了y轴label

Current Behavior

自定义k线图最大值和最小值标记图形时，平移k线图，当k线的最大值和最小值正好处于当前数据视图中的边缘位置时，这时自定义的最大值或最小值标记图形有可能会覆盖在y轴label上，会导致文字重叠在一起，影响阅读

Expected Behavior

希望能当监测到，如果标记图片覆盖y轴label时，能自动调整其位置，使之不覆盖y轴label

####效果图

Environment

System:
    OS: macOS 14.1.2
    CPU: (14) arm64 Apple M3 Max
    Memory: 68.73 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

[echarts-bot[bot]]

@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 you customize the chart with the maximum and minimum values of the candlestick chart, when the maximum and minimum values are exactly at the edge of the y-axis, the custom marker graph may be overwritten on the y-axis label

[MatthiasMert]

You can manually set xAxis min and max such that your markPoints fit inside.

[soeasyjx]

You can manually set xAxis min and max such that your markPoints fit inside.

？

[helgasoft]

 markPoint: { 
    data: [{
	name: 'highest value', type: 'max', 
	symbolOffset: ['50%', 0], 
	label: {color: '#777777', position: 'right'}, ...
    },

📌 please close issue if problem solved. NB: debug and "how to" questions are better posted on stackoverflow, where there are more volunteers to help.

[soeasyjx]

 markPoint: { 
    data: [{
	name: 'highest value', type: 'max', 
	symbolOffset: ['50%', 0], 
	label: {color: '#777777', position: 'right'}, ...
    },

📌 please close issue if problem solved. NB: debug and "how to" questions are better posted on stackoverflow, where there are more volunteers to help.

按照上面的写法标识图形的位置就固定了。为了还原公司UI设计 ，标记图形的默认原始位置需要为：symbolOffset: ['-50%', 0]

只有当最大值/最小值刚好处于y轴边缘时才临时调整其位置为 symbolOffset: ['50%', 0]，否则标记位置为默认原始位置。。。。。

[soeasyjx]

我最终通过监听datazoom 事件，判断最大值，最小值，是否处于边缘来解决此问题，处于边缘则动态调整极值点symbolOffset 值