Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] 折线图数据密集时使用visualMap颜色不正确 #19944

Open
GetemJay opened this issue May 17, 2024 · 3 comments
Open

[Bug] 折线图数据密集时使用visualMap颜色不正确 #19944

GetemJay opened this issue May 17, 2024 · 3 comments
Labels
bug pending We are not sure about whether this is a bug/new feature.

Comments

@GetemJay
Copy link

GetemJay commented May 17, 2024

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=MYewdgzgLgBANgS2gRhgXhgbQFAzzAb13xICIATAQygFNSAuGZAdmQGYBOAFg4CZm2yLswA0xEnlIA3SnACudRmDlw44mAF8xJIhPwVqipq049-bAGwAOAKza9MabIUMmyDuq3rdDg7Vcs7NwcFsgADGE2bPZ6TvJGyCyeMYTqZFT-jIGmHBw2QsxhKWQy8QHuyd5p-hkJJnlhvFbMrEXVkqUuWchWlTrtjrUB9TZhFrxszdEDcV1uvSRe_Q6DhsNBoyE2XE3F-p0JPX34PrFDWSPsYSyhex3Ohwv4Sycz58YbyBaTYcx2Mwdyk88C88KcJH46p8OMw-Cw7o5Ad1mMcwW81hcNhNkDZQqIAQ8gajUitIetODZeBZ8hwwtNSUj5sTwekMR8KbxcmxeNsEbNHsz0Zl2Xk2Nzghw-YzEsDNCkWTU2dlRRZqYVeFLCd1ZaCSb53srthELHwLJqysjBaSDSMuGw7Tz6b5GfarfqlbaLLCuBY2gytUzFvKhVCKaNeGMLFxzXMZW6zh6NlFcbCrDGBUGqtbE2GTYJeQSLYHnsHs8LDb77VF8f6i3HM8t3eWRt9ClYrGbC7Gkg3XmXQ3kvb8Ihqu0ZXb20f3yXlClwrCwa86A2wbPGITaNgIrFx50vYi7eOvWc2t8weQu_cui4Jj4rTxSrGMIzj0642GE75JN4_OAvcW-jAfl-qwPnkUwcNyyCATAnIgWSmIUrSfy4tGY6uHBk56gmYE2NwMp4TBt5YQq345nkMKUlYfAwfWJZZk2A6-mE7a5JK6HavBP4hGEOz5DY_y1t2OqloxM6-swqo8IJ17CVx5GhOEVI0RxxYgqJOFMUIkztk6B4BnR6kMZp4mLrk1i0RUJEhuJvCJKEtiWSJxkbgpvBcJSnCjkJGb0Y2JmISE_CQVG7E-US1nToF3zIJyO56RC0pHJFYnRfa1K5GmqmGXKLknkxPzntyTnyWBUbaR5CUlAZyV-X2qUilGwgwpMJUpQFjXzhGIRhbJvlGf5rllfxRXeX15Qou1Q1MdskFRNB2W1QN9Udcq1JWOl3BtXVU4NWteJKVl4WcVN-XidSvx2Ud40nTt2HTedO5PfuiU1c5g1ndFrA7m223Lbtq31F6lLhDCf25R995McwHbufw4O6qRoFMQuHAdmwL3VXWS0QytD3RbY9rUQtx1uB4p1Q-J7aSbwuyLe9eOfY1cI8l6CMafjzPbM0NjXfp2MMwDnNrWj1HUZ2pM5YjNmBeqVITGN_NyRTZFgYUuI8kI7N5ZTsthLSkzw_TpUDqwEy5KM2uQ6rps4pJ7BVfsb0mzOrAcCw0mWeTd1IwhIrno6O4yUr_W40LTPKueeERLFVuM7r_ucoIXyO_cAsu7L3JenavUhxFPsy_7lh0tYfOvenKvI67pg8GKcfhwnkc7AunJoZLOPS1F_s-rToRXnnt3_fdEf1Mw0nUXXqmTBn_uUnkOK5-XysF13ke4pYPf18Pjej3h54w2XWPL0PvvcZJH7UYUlmTSve2j6qoyLlvp_kZJaNNYfTsV7fgNBC03JUijM_QukdJJRl4iTG6akw7bxtq7J8McxjANXqPDaG8IjILvn_DsLRWzXxnpHWk7ArATEwb_TgsJVzXFXGQ4Wo8ersF9LQkeQQEH8F5sHJeodO5YL_CXSYvNmE71YcOfIVIhFwMCpeLgOJeISKrlI9gLRJKYy_sfGBL8wILjdtcThR9uEcxYX-CMAl7SqLTuonh5C0bmw9hLKBUtDHCOMQIVui99H5xPiA-oG0xiQRYvIv2yoNpcEiBdQJ3ENpjxNAJCJ5EdwsW5PkOJWjdzuB4PYge0CrF0NYcICSNhzGImdpXIJPjNjqn7lw98gtYEKJFLYO04oin8k8Ro7xrDCljyoikgcHZEhjD-L0mcHZdzWCiMMqRXp2w4k_hYgxOtJENLNh5cYkzlk-l-BtdZwSYbXBCKnYp38vEoNYQuSY7gWlJVqZovpP1dwfh2T4mZuImHG1KZE92-RbCZOqYPdppy_zcHbI0NuDiO5OKWcEmxfA5HvJ_rkzgRDqRRDBVkxxiz6nKlpI_E0kD0UQsxWUoItJ4rXHxX87JkKsX1Hdiwd2bz243I6UinEEZLBzKOZY6lxLWU_OpGiylGLrY0pJXZPgfBBUeP-TkoxuRHQyMtvCk5vD5XNF4pyfBHzyKQQjKqCyi1vYqusXNZqT4nkkp0jIjsFqkU7BMbuW1uRVlfHdk64FaN9nus8jsRl4LmWAotoUgSlJvV0pQu68YZq9FqIWSK3l5leawsOa0mVPLuI9R5JSGN8y2myucbkc8eJQ3KoBaqmElZIhVOlVSolGbKG6quSUhFcqbEoXNaW_NULaX9OztW2Neb006uovNVU7q-DUR2E245ZaTUHP1qQztQ6wJsS9E0ClNbhXx27UICIdI6Tnn7bmtNdbEyhONB5BdFrz36xbhMpdp7TznvYDcOkWqW3COfRldgUqB0nvjZuZ9FsfQpuuQQ1g56JiCDHr-49taANnpHF6KCG6_3we3aK89H59bzl-TWzg4Hd10irO7dxaGt0Nx3Vh6whRYRETXNqp9ERQkTGEJy1N6HKOYeY6uNGsSH0IaY7xQo7B71MsI-e0YGNVSKyFVZD9VGIjVgxtRa9SnWD5HPGpsYkQcRAMWjfY1uTz3fGaNRI9XK40YeJSZ88kFJLvqMyw89hQ1SWEc7O4zEQx6NF4uxpKhnPPOe82PMxsnN2EsE1Cc9T5UwYIE9ZwDEQdx2UaDmyzE0JPJb-AIX4Xssv631hjCM2nuBUKvglrjNmIgwhMAa8TjHovXGa5JHYanwi7hxf55tTnP0tdsKMCzHHEiBa7dxxIsUeix0q3U6riQQORHC-RyLiXEMja5GJ8Fo3l1Ncm6uPBM3bnrFCbFfJ798uNeO9cddWc8PLaNUFvrL7pLFUOx0k79pSU-na4bM2ZG4Mjay0IFO3xYMZf_atpjQhRhdSG2By7mITvzhkb8UDNVtuPt25pgQggLsKfGwJHoC4wfDZW1VpLsyBJVrx71xTXx3CyJJ_D_Hc3qTcg2ul0nD2xus47AbNHM6ecU8PUaad3LMdXZYNsZDqGAdk9m8L3S1xuuC525LkhDOBDtZ-ZELXb3TkndYtYcIHmhdrb4GKFOREA1YJO7OXcDn9e2_2e7VHTOeuPcUxGdyJo2tO9_ixyI7ZAGm7V4j3zkrrB3bl9zsPHwWOxV9O2aP4POMK8Q3ZX0dlCL-68-KyYwhOfM9p9x2m_BpJi8OBjqLV3e5fHcrL1PiRY8S_D7TPIPJ4sNZZ0lhWrEjbd5L9ViY3xrhjoM1l82D9km5-C-5D8TQ6aD896Xn0aStOGsnzwJ8wglty5twHtLUFulqdZoU3IcOPdm6YzyZ1H4Bfi5r2374q4_gq8f5DprgCReN655PwoiS2ys-fW5gPAAg_2Te8mQ-vekktgHep-T4ZeHkCBlg-2D-Vm5OGefO5kl-qure8ejQBs4w7YNOK-w-9m9sReAYoSk-MIxC3wam2Gg2NqwBim9-Xy8IrB3GH4-8hQEBf-COBBggYwLGe-kBB-XmggoSUQQBy-1-TW0G1qBY7cLeT-QhEYeyY8jBDe3AG-7c1en-V23IKEGUREBhmBTGYo-s7gDBXB1WYoTSdk6B5Qqhhh4eYob8GSjBKOvMjqdhSW9oDuQgKepOEhwWZiaCqm_hiGq4zewMoe-BgQoSq4myWwCRahSRdI5-54zQZhWWlgDshSv-xeZBARUYY8T47-GB6elhxuSkzhEOFhChEG0SDRbg5hNRzR846qleg6iREGB6JC3RvRQEHRR27hC4fcJachcemRAiaWXe_q-Ruk7YoS6RbhQh7sfwE2jB884wWh0RlhfGrMVRmWghmRhuk6xRV-sxAx0hH4KOamoSHYMmuBH-TRV2Mi3uhMTxOIu4EYbx1R4xBB1qT44yeR5xdxZeL4_BJR8hnxWaJC-mMx_Ru6zc3A841xeBGRdx3Ir-W0hxTWdohSdkiQTxnALEe4TxOwGSbMhJnxHkcBAS9J4enWZeuQTxlI3wqogJfROJaJAkbE0xSxkJApIUsyTx-xoWWJ7xnRnxqoxC7AkpDQJiTxdmL6IxaewJFxNMY8euKJ_JoSzUrYkETxviVEYhoRWWuGMiu-ZptWLQlpcJtxaJkE7gkQsJNxqJRpWw2wS-W21pbEPQBxBpGxmRUmlunAamowqoEqMpQJ72um6mPApB8J4e-QZigR0ZXwHOMi0ZMJfB-ZBRMc-ZJoPmIRzp3pkQ9-KmTpXphp1ZGM4Y7u2JYZAx1YE24-pMYoWWRoheBJoZHx6Zdo5maxLJBB2wUcnAFZ9ZbZu6VOoQ_E0ZRo_ALQy54BPQvJjRcp6ZBS1gLZ3YrhQ5E55UXoa5454ZwMggA-IpPeiGhSLE9mM5rZx54ZoW-s-pt50B95uC-88ZfJc50hl4VYB5VevZO4u4Gs0ZZm-stI0Z7stMg26xr57Z3AvMep8F3owKyFO5BBvojCWZF5Axvou-UwamSe1hSqg5uFmRikMOMM5FQgLxJoREFgWWDkEwt65FmeHkehX5pRiG4wzBAERFu6xBlgPU5F0G8Upx252pxFsRxpUltgiQOe1F8lYlMiFuQyoloSUYVE5R5FuG4YW5WpiZ1IeqlY5FAkzci66l5l6FtI-s5F4w3uIl9lBukYAkXoSpulkYE8hW5FRUdoixBKYRfWwMrmeZflXoyESk5FQxoybRFGNFxFtgP0n5YV7F1E3UXZ_FaZeFpoqWslZlnlMS78jkMVG2e6am6oNM_GHlzurmp2KkjVh-fB84BytVsUBsmqflrA4wF0plKVGloSbs-xr2bVXmRUvEWRtVVIRpk8U1wWdmKithy1fWOOm5PQ1uWWAgAqeJtVSKYSyV8uo1vwjh4Qw1Z1iZ0S-5gim-opY1g2PoeQtVqKeE9o711g7kjuG1imkkjQnAXwREbAe13JSm_5QER4T1vwsZ3wbqU8MNd5TGLQgxwgREyN35qNAgMGY53ZWNAlONrQUFU8yAe1T43y32ZNFNOkvmRE5NsNMM54IGbRxEKNTWsIYweEHa3Zn4TN3AjQ7gnpN4_NHNV2sI24owmpwEsNCCqYO1U8Yt2NTWO-9OeWStWWsWlIPAItcwst4t4el4kEfOREytRNqt2kMcVBotWtNwUYX1mtctqWB8z5-t5tBVmRQx_xIQMEmEhtBBJCeyKKftR5qVu6G0k2ooodWtVY8UoFGEYd51USuh1NpM_tKtV2O4jC1wCdjAGdFtWdDu5smpBdntAxT0j5UZqkZdLpzx_EQNpltdVZjS6MHJNdSdiZ6VvcJWHdWtoQ5U-NUCzdDZHYg2qEMdct1gHK1Ik9AdXtrAMMOIUNsEndnlPMQgu4edq9WtMM0tiN6da9zuMysKDFfdcttgi-URh9WtyeHkitN9ctsKHCJVI9gFj5fpPIdZRYb9KFEdaMMM-5c9md4etI4q_SwDhdoDkQuIiQbRv94doSpKfAeENtcwCD51CF9oy9kD5du6XyhQFCuDdd1htIPJ8DR9h-fAv1osxDVZKDO4qopdlDXmEqF4b15989Axuq4wqOdDDZc0aMu4TdLDwWkE4jkE29GDiZ3A_AvDr9ojfW3AoQv1zDWWwQMhf1w9ijimHeRCWsnDIDBBg4gCvlj9XD-DeEsVr4hjUDxjo-MiNCtjeDSDUkVabtRg0jnlPUC4Ys_D79LUPQ5e_jf9SDkk2wpN5jRjmRMIFsS9ITiDt6YodkFWUTdjMTLx5majsNF-4Q4QHjid6jkj-xetnjOj3G5kQxaMCTo1V1oKU2NT72V1xcIaZtEmV1JosVpT74HtddeTdIvjJVBt0TEGeTGMmyMtvT3peTrA4QwpWSXjtuSki26SjTBu9R7YHCazSzjQLNXy2zAe4QH4qoGMFD7TdILG2aBzxmRz24ye1zzmHWLE-yIj5zaSao2TFjKOhenIyh2j5zmwOw1TzjfTkQIVTSDzn6czYCxukLVG-T4QJCsh_zT1-TW9qDcLmG-TmhGMmLNm4QZsAJUj5T-LF16FhSeLgGBLsI-QyJKLXziLjCvFlLZ6iLu-DtLLT6iLT4DQBT-dJLVLlFLErAnL0WoMuGtDIL0zt6V9fLMAwz6TozeT5RcFTtDLcz5KWjWSCrLjAyKWYyorx2E2LAzQfhfN7TqlQgF-bTqLBEUY9WUCOrfTUdgC3TQEUzhpiQX9Ys397tFrTQImO4Nr6r3IXlbNHrgFcDfp88wbIzwOxCEFadjrEboT82tMkY29Tr0z0OuIzQbr8rKbiD82Prqr5rtrPqjDsbir8bAksz02Zb6reEp2ZjybFrUaxM4bbbHCVInbtrJoVIrTarcbMiLA8srmVburUuF-LBDbw762el7kE7LpTbcNG0lVpMygqgng2AAAutgKAJALAAAA4IA0DAA0AQDoBYBEoADmuEJmpofIcAUAM40u3ovo8Ed7A468bYM7vgz7r7lETQfAn7asPcVIJuMwAHssc8_EJLX7Iy-SvwFLUHL7Ui2wyTMIoHTWjQyGpJT7aHBBxGHkpG2HV2xHTb_B0HRHLGERZH4eROIQl4BHku9u-S9HBBnIJcTQ7G1HmRnIJg6MHHcxOhdpqHRhH4pG3wwnAxKRvoaR4n7hoQYoRRMnu64z1MGtpIfHsnkxczhNPOCHrJfxOwoVEIOnaJ0J-yan9xTZoKLHw5wmeEXANnYwqlwmvHhHtFQTkn4VkgRnBBq1Xo61_7XnAx-1GHEwrnfwP1-SDnHwTbpJ-2Bnu7-74A0A8ASAUAvAV7iAKAAAdBAIgOewABRhAwAiCZcFdwA0BgB3sAAWMAAAtEwAAJTYAgBHtQAIDgBXs-A3sABOCA5AjAOAOgAARiAFAFACAAALaMAADkvoAApAt4jDN0e4tyt2t8QDu_YAAB4ACC-3SAo3OsUAAAnkezQIt917NzQAt3sIN8NwAJJgDkA0D7eMCFsKiXfXe3cID3ePfVDPfkBvcfdfdMDbt4B7fEAXfHenfXuQx_c3cwALcHDA96Cg_g-fffd3go-LcY9PdDdg_ve49Q-LC7f2AQA0BDcXtneQwZCUCMB5dQDID5ezeUBHslcIC0CzfoAAB8WAvPNAs3-XtQlXIvYvBwO7rXewBPaPiAYAD3ewR3J3EAOPkP_a8P6vmvePFMTPLPWXvAHPXPPPfPgvwvfP4vhgkv1vMvcv1QCvC3SvKv1QavSAevTAewOvnvZPkPjNzwVPxAUgSAcgsgAAslz4wOCBAPVyAAAO6MAABmsgNPKQ5AgPtXEAPXYA33KQJ7Z7F7KQCAYAAASpQHV6jwqKAHACAAN4twNzQOQAt8SCAHIFAAAPLJ8V9V8x_VC1_1-LeDc0C1et-U8gjYAaAADcQAA

Steps to Reproduce

1.list1是原始数据(其中最后一条数据的时间跨度比较大),list2只是把list1的最后一条数据删除,都使用同一个visualMap的pieces。第二张图就是相当于把数据拉的更开一些,观察两个图的区别。
2.截图中蓝框部分的数据我都设为红色。图二没问题,但是图一有明显的绿色。向下的线都是红色 红色跟红色叠加也不存在变成绿色。
image

Current Behavior

visualMap颜色不正确

Expected Behavior

visualMap颜色正确

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@GetemJay GetemJay added the bug label May 17, 2024
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label May 17, 2024
Copy link

echarts-bot bot commented May 17, 2024

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

[Bug] The visualMap color is not used correctly when the line chart is data-intensive

@helgasoft
Copy link

when visualMap dimension/pieces are by X-axis, vertical or near-vertical lines will have two colors (start, end). These two colors blend depending on pieces rules. Your upper chart example shows the blending effect more pronounced because many lines overlap. This is not a bug, since the API documentation does not elaborate on how blending is done and what results should be expected.
A suggestion for alternative coloring by Y-axis:

    dimension: 1, pieces: [{ gte: 0, lt: 110 }, { gte: 110 }],
    inRange: { color: ['red', 'green'] },

image

@GetemJay
Copy link
Author

when visualMap dimension/pieces are by X-axis, vertical or near-vertical lines will have two colors (start, end). These two colors blend depending on pieces rules. Your upper chart example shows the blending effect more pronounced because many lines overlap. This is not a bug, since the API documentation does not elaborate on how blending is done and what results should be expected. A suggestion for alternative coloring by Y-axis:

    dimension: 1, pieces: [{ gte: 0, lt: 110 }, { gte: 110 }],
    inRange: { color: ['red', 'green'] },

image

My requirement is to draw three lines: upper limit, lower limit, and actual value. When the actual value exceeds the upper or lower limit, the line needs to turn red. However, the upper and lower limits for each point are different, so it seems impossible to differentiate colors using the Y-axis.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

2 participants