echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] visualMap-piecewise pieces order

Open VictorTolosanaCOVARIANS opened this issue 2 years ago • 3 comments

Version

5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=scatter-matrix&code=PTAEGUGMAsFMFsCGAuAUCUATRAXWAaAQQEUBJASwDtNYAPfABQFkAmAOgFZGmBGABnwBhAPL4AcsJb5wk1JAD2lAM45QSmAkSgAvKADaqUKADeoSonixkoAOQkK1OjfygqNWtZ4u8tHNbtkNqAAvviGJmYWVrbMLBzOro4eoFKgPn4xTCmcQaHhpuaW_sz8CW501gDM3nQZNsygpSFhRgVR_iJlSdYALDW-HcK5LRGF0TYSLF3u1lxptf4SgEEEw_mRRbYyUy7lyQBs_XUyK81rY_6Akt6A5X7TFaAA7IeXNyGoALoA3HKKKqAATogAO4AEVwWl0BiMeg4cwAnC4OAdQHw2D0kTwABwuJE2QD2QQkbAAhWDkABWVAA5jY3iM9HEXDwvCkmSi9nNKn1QPDbIAMeQJxLJlOptMRLkeoD21WRbClPE5czx_JJ5MoVJp4T0lSl4pY3JRWoZSJxfJcROVQvVUJ6qRYnJ6nJR9yRPQEjWNSsFquFGoxqQ4WK5rp4bHu4r2AYNtnxpoFKrVtPudu5oYZqOdAZY4sVMfNXst-nuAZhLgxQbYuoR3IrUY9ce9UJYex1PCRLFLLh6bAD_ADe05NkAs4mAMr0CfX9Ji5jxMy4WC2Z5xUnsmdPbIBaORHOc98Y1lW5PG5lQDKI44sqTJ4CpNtljFtpPXPTJdLhRPSls7FpqvNjHej7LkPYqcsGfB2q2qTZteubblCPZinuLBluK9xzPepqAN7xG6QVuP6wRKspzo0qIBvaM44hhta3juUqtnqMpAVKl4UXmtKwpyezovwqYcGxqRnqa0ZYXW-Z6Ji6LWgysK8V2Aawtq3I2Ouo7CSe_5Mtxz5sLCSKVKkcr8Ux0H6CwqTduKL4ZrKro2F-N7MTue7skirLLnuUrWUpLFsXuenZHwAb3FKu76ZuQkscm-Guuwr5iumwWCZRUJ8Y0vGuse_66e6po_uJKTitFjQIm-4E2VBOHqY0PDihep5sHwcJ-gGCmYWa2HCSwHIMhiczta6nZ8PB1HycOBk4XsQYIZ1rYhuKsJqVZikhQl44dVy6JsvOTollKqG2ORi12VCHA2mxZZ8AxkVMhBLWhRqaIIh2tFtgyrqZfFB1GdpOpVWwLZvlVblfgA4gArogqoAF7QPIwM_l12KpPc54_bCcxjSWcU2CDYMUpD0M_oW_7-UBMqSv-SEY1jENQzDbXLkylROWwkp2q68lA6DVN48JO05Xd0qzXMGLngDBKUzj1M_qKoBHdie61U2LiSYaFMc-LXO0n-oCVJFR6abaCLLir2O4zTIooUTqbtUiyGkUbnOmxqm2gHDFWyuWlRVT5K5XT-s0lueIGpiBanOlZAmY6rJuw5yQUSqlmma_SFUYz-mscAHLJdnsDUzm54di1Hwn3C98FlvuvaOXbasO1CKaNHVDIE9k3HcprBFXQXEvCfwrcBhiZmaVpgEzvJe22J36uO9RMkD7CDfS_T_b55HXcipyK49APHBK9Lsrgcvxurxq6fYkysID0LTLrY08kH_bvtMojDLvoRHt2rKjXh_jlm6b6G39x2ICt8PJTwRK6J2jpKqqRnGHUWK9J5QgxJyViDInzZHar2bsn84GHwQfoWSYoqqB0Ii2OYHBtRV0LmFBk2sZwrkqJpcUxZGgKjvtXHCfMkE0Llv1Fmjd0LNQnjXccPBLLdg9qmHoQsOzdgVGPCOuDhF6GkaAKR8NUxLirNpShR9DqxQlN2GUDMyaKxTsJP-XJdKJn_OWPUNCdF4JEnwDi6IMQRiZk9eu54yKCPgUoxkRZUqpkPNqDiAicH32En7VRk4k4ogsStdqGNwDQGxqk8gqdupIV1hiZ03VgGmhSWkxAGTzHUVdFwwi_UxR_WSak1U6ScLVOdueF-wZPHhgNuEwp9SKSNO7s4whDIfLASYWQy68iikNJKU07kKipxIw6UWCZzUpl9JmQM62ntiZ8DGV03aqzen9NpBiVucwm7xKRCfFIOJw5rOOcfQK20B5pyDFmO5RyNknNdMw9sVTH7dSXgSe5XyNSMnFPM_WVTtqAu6ZsT5pTqEPHPDlYMV9Ug5SuiCxFGoUayxoWWTx1jpawKyt3AiADGhJWDJvEsfCDkgJgn5Es40kZShdhIhlPTik4pgitDEsoFYkKuXlNy8j8bcnyvwb689t4mJrNy6ZvKCyPiRKcjSuTsTr1YcChFvskIPjdlA52EZLpf3MfKGamcXbMKSlivV5iwyWUztyKWO17U8qaZyOujIeHhRkXCmw2LYZhl0nwIMYobTYLJbSFs3ZPGVV0qibk58EQ4gWvCz1wlr49HGRpYlsdjUeqVT-WOUKALSiXB2KqWYvzBuEmWmOtE5Ukokp-Rl-Dp6K3RLVc5VYCmZpLd3NxqDZSpsIuxRWrrLoZqDQ62NxLRHnkXZwSczLW1rkOVm2NlK5Rvj4GyuZrq3Kzvre8L4ChlCqEEIQAAKgAUUBsIAASgATQAPrAlIEwd9IgACqYhb06AlBen4qhAaEAYMBlgoGr2gEJIQcA9730ABl70ADEgO6A4LB34CGkPvtvcIKDuh-BfAwJe34gNn2kGBO-gA6rR29AAJaDCFyNgEo-BmjdHmP3tIIDZjWGUjse-HB6jtGGNMdY7oAAFPwPgoAAC08HEPIbQ5h5ToAIMMAAJSgDADeh9T632fu_b-4QAGgMqZ07h7jkm-MCaE8B-T4atP4eQ0RqDNnIP6cM3ex9L6P1fp_f-wDWnbNid-EZwLpmQvAfuHZiAr6mCEmECh994BSAAC173AZ6F8AAZsDSgkAcDkEUP8WAOA_jkFgAAN1gFAXAeA_ighwIgWT2AOsuEwOQeAAANXr_XX36eMOEAANtVqrShgYTdUBCT44RCvyD-KAWTU3VDkGA3wD4rhQAAB4sBgjYFN1UOBoB7fIAAamu2N8IRhNuuDwPAYDehuuID0OQN473-sDZpMdjrX2ft9fgK-t4S2jBGHIC9vQMWTPBe_W8YDH3gdw4CwjszTBIdQ7-LAWb822AAAdgZKGgLJmHCBdNfCMMEcIeOcDAz-JQGbc2cBfDp8V0r5XKsUlgJQWAAI8CA1q5gJQsn7uPem7sHbNPQBcdABSUXb2ccK9oIQWg5AlAq7lwrgAnhrrXOvwgK6UILur2vFty5W2tjb0vZf7aO_DoLWOLNWau7dyXUObfrae6SB3_uncY5dyFt3gG9ukk9yYB7UPyCFfW87uL5mwvWf29d0A_uAB8uhE-I9C5ZwDXuodQ8veVygwNYBy-L3T4vRglfkEwMT0n5Pxu16h1NwrGQPOoYw0B9P22ABU62JN0cY8CFjoB086f0-nmwABSZwMfi84HkET6w3evOT4z6AIfsmR_vsc4Jvv2nfNb_n4vtvRhAQN4u9YffY-J-z4XyMNvcByB9IyPvw_zmn82CXyEanf_dXTXJQJvMnWTVvS_JQInCbGHMQYGeAAAI0FyqBf1ryJ3kCUBhwq0oH8BXyJwv0v0QBAJQyoGiEgMvzUChkBGsH920HoORDQLb0UGy0F3kGsEK0QAmzN3_1pyYKh2IK11vXIEgAAGtrAKCoDqDaCdAGCBBeDY9lAG9ogasK8FC8hKDBClAUNEBkCJsJCFCjAyd5AaDt96DdA-B1D-CjAcA9cidxh6suCK9CC2969MBSBuhEh3BrC1BIAuCVC_g1C29ghAC28DcQCwCW8FDoDYCcB4CkCUCtYfCMCsCedcDbBasP8XDa8tDSCBcDDKCjDpD9tzDQBc9XcU8tMvBDDQAWC2COCuCeDKCNCiCQDhCxCCjCjjDTDttSjyjQ9KiVNqjCjEgsCaBrBVDYArCFDcjdDYB9Do8RjujrBeiGD-jk8C9U8eBpjKDbD7D_BHCJtnCfC3CPCZgvC6AfD1B_CJjAipjgjQja8zdat8dIiICFC9jxhricBWtsji8lA9ckD5AJtwByBwZohwAUs0sMsstcsfDgCtczi7hdgfDwjETPCUSFCPtrAGcXjGtmsfjBd2tOsAQQQwQdgXBSRdN_8Qiq9FD3Bbs6Sa9XgjAGcmcWdJC3C0CESlA0C0TeSY9niLdwhggOcotVA3DhAic0jgM-cBchdYARcG9xdADV8ZTdBICwZ-tcAcCGjuCCBwhEDAiydOijAjTm88jxDbAuCJtsieSkTkhJTpScC2AeS2AkAidZMucyscD1t30dhMBaAi9cdqt2TXBAymTdM-TDclAHTrAnS0i2B-T3TEBPTvSZTZN_TwygzFja82TmdszIy0CqBCRjToBTSodV9EBIAYc9dPAY9mSWj6stdQYJsmBUyKzPj_Aic6tIBYBr8zdsjQd-csDFBrB1imA0CezYA-ylBrBIRa9jBDiK9rAAAiWyCkVclwCbOYhY9cqCLc-XYE1bNcvHTAVclo4vJcpw6IVc7FQ8ncvQtc-8lwBQCbE80AVcxAo42AC8_g68n8tcoRB83coCvxQ8t8j81cvXeY98wEP8__AClcz8kCp8z8sQeQRIFbCC48v4NcpXWAfnC8mPfMIwCjXAWACkVbC3ec66IURVdZDJU0IRMcMisAKgZ9bGcgmPDAIwSCvC_QGwAAYnTnDFhEQIJCEr7I4EgBksksK0QMgEqBPGpB4rAEvNqOBhwGEEK04tVG4rb34v8CEswFMr_2rzQKFPxzjMV1FylMTKstAI9K9JKx9Mq0zIDJzMkNZNDILIb1oCLJj2ov5zqChlq3BkUA61tLQPwOsHkOLw7zqD7MoF-JGBaJX2BPKzX1zJsMyL5wEpsEp3gHMtOCMB5PjLsudMUFdJjJGH5Iqob3spdP5JGDcIaswCauqq5PCEcvnJjzYAGoTJdMcvCDeFQFFKAA

Steps to Reproduce

  1. Use visualMap.piecewise using dedicated dimension to apply color and label on a scatter.
  2. Define pieces for values of type strings with custom labels to assign a label "No info" to an empty string value : image

Current Behavior

In the visualMap display, items seem to be ordered by value. image

Expected Behavior

Items in the visualMap should be ordered by order of definition in pieces.

Environment

- OS: Windows 10
- Browser: Chrome 114
- Framework: ECharts examples official editor

Any additional comments?

I can't find any workaround as using categories and inRange instead of pieces allows to choose the order but not to have custom labels. Let me know if there's a way to do that.

VictorTolosanaCOVARIANS avatar Jun 12 '23 14:06 VictorTolosanaCOVARIANS

I can't find any workaround as using categories and inRange instead of pieces allows to choose the order

when using categories make sure all of them exist in the data. Instead of empty string, there should be category 'No info'. Demo Code

image

helgasoft avatar Jun 13 '23 08:06 helgasoft

Yes it's a good workaround, thank you. It still isn't perfect as I have to alter my dataset (replace all "" with "No info").

VictorTolosanaCOVARIANS avatar Jun 13 '23 08:06 VictorTolosanaCOVARIANS

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] avatar Jun 12 '25 21:06 github-actions[bot]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

github-actions[bot] avatar Jun 20 '25 21:06 github-actions[bot]