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

lbsnaicq  于 4个月前  发布在  Echarts
关注(0)|答案(5)|浏览(41)

Version

5.5.0

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.截图中蓝框部分的数据我都设为红色。图二没问题,但是图一有明显的绿色。向下的线都是红色 红色跟红色叠加也不存在变成绿色。

Current Behavior

visualMap颜色不正确

Expected Behavior

visualMap颜色正确

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

blmhpbnm

blmhpbnm1#

@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

h43kikqp

h43kikqp2#

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'] },

bnl4lu3b

bnl4lu3b3#

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'] },

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.

ou6hu8tu

ou6hu8tu4#

I had the same problem, but when I zoomed out the colors were correct.

bejyjqdl

bejyjqdl5#

I had the same problem, but when I zoomed out the colors were correct.

跟开启large并且数据点超出largeThreshold时 图表缩放尺寸或者缩放数据显示时会出现上面的问题;

设置large: false就好了

相关问题