apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.61k stars 19.62k forks source link

自定义多个markPoint ,分别设置其z值,markPoint.label没有按照z值的大小来显示,z值只对图形标签(symbol)有用,对图形标签上的label不起作用 #19643

Open soeasyjx opened 8 months ago

soeasyjx commented 8 months ago

Version

5.5.0

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" })

自定义markPoint

 markPoint: {
        silent: true,
        data: [
          {
            coord: [1, 50], // 自定义买入点位置
            symbol:
              'path://M0 0l20 0l0 22l-5 0l-5 4l-5-4l-5 0z m10 26 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1 l0 1 m0 1z m-2 0a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0',
            label: {
              color: '#ffffff',
              fontSize: 14,
              position: 'insideTop',
              align: 'center',
              offset: [0, 10],
              formatter: () => {
                return 'B';
              }
            }, // 标记内容
            symbolSize: 50,
            symbolKeepAspect: true,
            itemStyle: {
              borderColor: '#61B2FF',
              color: '#61B2FF'
            },
            z: 2
          },
          {
            name: '最高点值',
            type: 'max',
            valueDim: 'highest',
            symbolKeepAspect: true,
            symbol: 'path://M0 0l5 0l0 0.000001l-5 0z',
            symbolSize: 20,
            symbolOffset: ['50%', 0],
            itemStyle: {
              borderColor: 'red'
            },
            label: {
              color: '#777777',
              fontSize: 14,
              position: 'right'
            },
            z: 3
          },
          {
            name: '最低点值',
            type: 'min',
            valueDim: 'lowest',
            symbolKeepAspect: true,
            symbol: 'path://M0 0l5 0l0 0.000001l-5 0z',
            symbolSize: 20,
            symbolOffset: ['-50%', 0],
            itemStyle: {
              borderColor: '#777777'
            },
            label: {
              color: '#777777',
              fontSize: 14,
              position: 'left'
            },
            z: 3
          }

效果1

image

红色横线明显被markPoint.label覆盖,红色横线的z值设置为3,蓝色图形的z值设置为2

效果图2

image

这个效果图可更明显的看到markPoint.z值的设置不会影响到markPoint.label

数字2334.33所处的图形标签z值为3,黄色图形标签所处的z值为2,但是它的label却覆盖在了数字图形标签的label之上

Current Behavior

自定义k线图 多个图形标签(markPoint.symbol),设置markPoint.z,图形标签markPoint.z值大的,显示在上面,但是对于其标签上的label却没有施加相应的效果(示例中的"B"),个人认为这是一个bug,当然通过调整位置,可以避免两个标签重叠在一起

红色横线z值=3 蓝色图形标签z值=2

Expected Behavior

希望markPoint.z能同样影响markPoint.label,不只影响symbol

Environment

System:
    OS: macOS 14.1.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 84.87 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Managers:
    Homebrew: 4.1.22 - /usr/local/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:
    VirtualBox: 7.0.12 - /usr/local/bin/vboxmanage
  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: 122.0.2365.52
    Safari: 17.1.2

Any additional comments?

No response

echarts-bot[bot] commented 8 months ago

@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** Customize multiple markPoints, set their z values separately, markPoint.label is not displayed according to the size of the z value, the z value is only useful for the label (symbol), not for the label on the label
helgasoft commented 8 months ago

duplicate of #19108 The markPoint and markLine z value is a constant =5. So yes, there is a bug since z cannot be changed. Workaround for your example: Since all markPoints have the same z, they overlap each other by order of appearance - Demo Code image

soeasyjx commented 8 months ago

duplicate of #19108 The markPoint and markLine z value is a constant =5. So yes, there is a bug since z cannot be changed. Workaround for your example: Since all markPoints have the same z, they overlap each other by order of appearance - Demo Code image

但是现在我的需求是,需要将数字图形标签有所有内容覆盖在蓝色图形标签之上显示,如果他们两个图形存在重叠的时候

还有一个问题,我现在蓝色图形标签是动态通过setOption 在数字图形标签之后添加进去的,也会导致上面的解决方案并不可行

当前bug已存在相当长一段时间,希望能尽快修复

helgasoft commented 8 months ago

I think I finally understand now. Sorry but Google translation was not very helpful. This is a new bug - label 'BB' of first blue markPoint should be under the red line of the second markPoint. So it seems labels have some higher z value than their parent markPoint. image

soeasyjx commented 8 months ago

I think I finally understand now. Sorry but Google translation was not very helpful. This is a new bug - label 'BB' of first blue markPoint should be under the red line of the second markPoint. So it seems labels have some higher z value than their parent markPoint. image

Thank you. Please fix the bug as soon as possible, or do you have any temporary solutions

soeasyjx commented 6 months ago

Is there a schedule to solve this problem

helgasoft commented 6 months ago

scheduled issues are in Milestones. The rest is DIY PRs.