echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] When the X-axis type is 'time', the bar chart is out of area when zooming in through dataZoom.

Open lx980312539 opened this issue 1 year ago • 4 comments

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-smooth&code=MYewdgzgLgBAJgQygmBeGBvAUDGIAOUAluAFyY64wJhEC2SJY5AZggDYQCmANJbjXqNwAEQCuAJ2HMYABj5VqtBsXAAVABYSuEDSHZxyARgVViUdl3IYYULgA8o5AOTOYAX1O4A5hKKHMGF0QAHdyKAkxXhhLFicYAGYATnkYP28NeISAJh4YACMQKCgQOnIADgBWDy8Yrm8uMADsRVxEZHIAbX5WmzAEOisYZwBRADdG2ABhEDEwWGGansU-gaHnAFkuOwkYGbmFt09lqlXBlw2EexhQA9wj2pWYfvPhgAUuCWBJ-48TgF1HrYAJ74dYQYASfTsZxA7iWYB2Zone7jH77ebOcKRXgo4ZbHZ7WaY7FRIH3S7XW4k2w48kwD5fSakrgndw9Y6KEr6Yj4awnCJEbwNCQuK5ECCwk7iiBvEBEeafawgsEuSEgCCSvKCFRMVgcbh5CD9Pm0qJLVoFEASOCfADq_igGmMQMKNs-M3Y1pcAGJgP6pZb8ghgABrXzEuCe73DCTeYMACkq8mTPFTsgAdAB2ACUgdadkcAGUoMDLMrQF7RcMfSw6w8TvgEHA4ArvMZZBzau0EAAtEClLonFqWlXrBUQfxcfOWgBeA7oABkQGH9ZxcaPbFoihYhkZZPI8doOMRXmx1_SWER2DsNiBbS4wOBp2ygSPLaXVcMIOwpxIZ6086lMuq4wOehp4k6ULFOWMD7oem7Hje9BDOBG6jleN6fHeD7DE-YDTvSGhcEKmTGAAbERNBwJYRZELOQzZJ2lqcr0eLAgAgvYEoAJJNA4XSpCYMC5IkgJHlwJ4oWuEGbpht73us-GEXiISOs6cGUZBoLgr-tr_lRTS0fRjHMa07KKOJij2FxEr8h-OkuKeKmWpOljzDJ6GKDKi4KkMNjgL2nwgCyFqtHQCouD2GwKgBuAMPYUVIAglJxTACo7GMHBimIJRpS8XAAOIIKaCQIa0PkIPkXDsMqDBxpFcGpBoU4APITBI7AlaFrHedxsryoq1Y2MEYRmtEXXVbVmDuH8ii9TAnH9UOlrvgWjnDFl7BRGluD4BqRCqDIzixFAu3PGsLgwGi8xEncwz0gVIHSC4EUtpY50FcVpqpniBUAEpFEgQwpPSEIcEMERknio0so9axqA4UAlmW_k3PoMbOD6lQACxZrIUzkQ2m4QPgv5QL5BHKrD41hZaMpqEQoEjXoY1Q1wdMVf1i5VTV9mbjA9XeI1lT0rg0HA-Q5WbpWmPY3jBNE2LQSszFYA81NcN4rgo2UhrfPjXiC2KLL1ZY7j-OE-dXVxqhBpea0IB1tw8S_ZuPl-cqgXBbZEB8baiUwJ0gIq6EPX0jKcoZUqgQ0-zeSTQbGCzcbVBucyYH26-w7aV-zhbTt9L7ZOR0uKdn2XYsBKfHdt0PX9azPaXwxvTRLmjl93UwG7HdrIDyB2OQoMw8AENayTrPj73gyI8WpawTYpu-oTuO48To6k-TlNo3HOKc31EqM8zods3vqcCNzvPTWtlpCyLysS4PcjK0vNYrzja_K7rCr69N8fayfPWV8WRG3pK_LG79P54htg0Ty9InYsBdsYBIos8QeypoEb2UJfb-wEkHEOu9zTn2oP1KOQ1qaT3GgnYBM195p2vBnNC2dVq53WAXdulpi6HT1MMcu8NXhuEpOje6FdBhNx4c4VuH1-FFS7j3S0AMgZP2HiTUesF_4TzDlQhuM8kYowXujKsvocb-mAFmIw69XJk0OtvChWj2Z0IvofJmoY7GnyIRHS-msKAC0FggBqMhUG-MfkMaWo5wE-hMf6cx50daqx_jQjRAtdZXF_iAzcxCIlRLMRY-kMC7YXjxAgpBIkmKeIlLYzBYAgrYP6rgwOwcjSUIccQyOg0dhuLhjEGhydHFBAYR5TO65mFsU3J-NhHBC54i4c3E6XA4iiPWAyT43w66LPEWQFu_g26LO-uQeRrRFEDxBmExQ4N1F0hhs0y5m4Cqz2RvPNGES4CVDMQkcoljWibxsZ7WO1yPFoP6kfVxfz7Fn3KRANJPiBZ30CQ_JRoSX4YzNj6F5byPlf3ierRJNzkmq1STiqIoC8TPNeVmd51t_GwKGbJUcxTtjkDKkE0c6C0ZYJADg_iDSCH_I5q00h7SY4szBWSbp3jenEPToMphLEehWTTp8IgOgVqjOnusG60xiSHHpOMlwwYDJ4h7CqzcN81XGEqMkSo5FyLZCYkYSo5Rla4HYca3xcELVJCtTau1DqnVUGyFUfcJgAErBDa0UMXBgQuGgIwaATMIAZi4BMeYGIzp-q5FVSwIh5n8zdV860yB8gXOhnm1yBaXAADlWoVpGLEgWEQaA_mkGoDazgq01rrXJa8OxM2Q1xaWqgYwJRECLX2olA7cDEJlhofxUBs0sGVL4EqGgABqEoxAcHoi9YYUxWqLgAKobArbCQxcsLaKyOGGydYb5W-KTRnU1m5nAxuIHG4ACaEqpqxCJBI6bvwDwlMQd9GZnIxroPgb99rLXWttbIe1jqr3_tjUBj92wPRau_dkX9iHn0AbfQm-9KaMPkADZUINf7cPIfjRmMETIaTOHghmA8naqAsGtCoC4GwNgwBECIGAAAJfjpA6BlE1Cx3Azk3jaHNdB71cGHVhqnVQCNUboV5pU9GvDKHE3JqgF-v9has05rU6WiABbe1TwHWZiQ8Q23VtrX-iTUhIBdSOi2vO7aHOIdwPJT4FntETpgEOyco70mlqUybGdNn52LqkPgVd67N2zm3c4XdB6j0noieeq2c03URdsChKTe4PVetg_BgBSnH2HMrva8x-5bU-oQ3ml1QdEO1aMPVsrvrEPlEDdkJIf6qubg00h192nCN6Yw452wvaYsmas-Z0LAXAtBHLcMTz4mCzOabW51tG3ps-e7X5pbSTAvBZHcW1kgX8uRdnXNmwS74trogBu38yXZlpcPcevIWWFY5YsuFm9fqJu5rdZRsb1HP3EZ_RRl9gHqOgeQOByDlQ6uyAa_Jprpbwfw-A4MHYX6SOnIFjj_DOnJiE5gL1sj_XYdaeo7R1ZZ0XDlHIhmJIStENsYkBx_EXGeN8cE8J0TWpEOSek-6tHGPyt5vyyNob4bI2aao8Bib-mxezeMwrstNn_OndM2tuzHbpsNpc82vb9nNuHawlIE7_bS3nbt-O8Lf7gBRbnVrmAj2EsvaSylz7GWfvIt9NlomuXfH5fF8VqXXXygVfpLe1oS1eJcqlmDVmRZgR0EKH_e3Zys857ogxRl9IuDgZnZOCAypWwQF7QEFp9J9V7OGGVAApOdHU260IR2UM2rQOg9AGBdHiQ6Zf9FPODzWUPJ6CAhkOqpzM1RMngAIoiCtYh2CcEs60fJ2_FD1VDJU5ORcoS-B0JOCYmhtDBCHyJA8B4wZ2FNGADf7ARmhtuZXTYaHdipvuDq1tfVc6I1VrXxbXC6V4KDT1GDRrP1FrboAdKA0rWAxDLDQbbzGAEbUnbTfHdDA4K3GbUde7DAnWRbS7A7VbGzStS3Cg03HbJgdzdYfbEgsCI7W3cglgx3S7DAm7KgN3O7T3b3Z7V7LdD7PdL7TLSfCBciVeHGS9AdAHXxRPTcEHebEnOHMnKHfAkjbDAdbAhHFCMDCDGTaAuTeDOnFXVDAnaHNAnDDQ8bXTSnUjcjOw-nYDRnSYb9BjA8JjWQTbbnXnTYfnXjATITETUgMTAzQrCXJAmAzHRTP1eXRDLA-wyHH_dXAdQzLgYgwLazLIvfN1PI6g43DAug1zBgi3EowLXzdgsdB2ZrYdJ3K7F3RDfg6LQQuLH3EQ97CRAPb7U9FFSBOQ8PAWSPaI4rWTWPePABcAgqc1GPFA5rSZIYBA0tdrTrRY0tMpRDcAxQFItwqwvAzEE3TXBdNQvNPIvXPPA3Kg9bGglgso83Dze4lbVgm3K4ktFbLguong6bNoj3M4h7To4Qv3MQ9LfoiJIY-QwHPNZQ0cVQ3Y0bXHD9K4Jw3Q7HVI4DRHAYYwyXDrdHWPCwiHPHdImw4nJ9TEgjRw6HanIwWnVwywmjFZTwlnNnDnfw9jJATjbjEIoXcIyIsXcY-Y_E6XBTWXRIpXc40cfYxk3AiQDI0tLInIidS4po6bIou4qoidR43bZ4rUgdGoj4-ot1b4sLcU1o93e7L3YExLN7f3cQwPAY5eGQj-YYxQ0Yv1KPYUjY-IiPZWWYmrcidHLMbIHGG1THOA5Y11XxIwIM7IEMsMzYvNck0cRE3AGU4kw4-UqbUo040HBbXXNUlgjUo3LzV4nUiovUsslbQ0os1400w2a7P4y0jo5dEEu0sEiQoPIxN-F0teEYiPIHMNBEhkzMjMLQmkWwvQykkDQwpHXE2M4M0M8M8w0c5E8c0k7Q5-NcsnNXaHFMy0fQ9w5k-jTMZjP9AIrkvnHkwXMIkXTbL0zSJcxM30vLCU1TREjM9cuUhUvNJUrXDA1Ujg3Iw3ZgwLCs9QSo6sg0tgo06bBs9mRDXg_4q0oQ200Q3oh0iEqQn0KEgc0cMYwYIrCiZ8lcsUj0mYsNOYzSBIHGbIIMsirHXxeAtrciWi-i2QRiv9A81VAdL8zQzc443MoggC14oCuoigkssClbCCsARg4o6CidWs4Cr4xo7gpsjAlC1sp7dCnozZVLLCyQns6Q2Q6E2XIcvNEc6cg48c1Emw9EvNI8hNbE5HCidihipMsHGcn8_cok9cvcrcnixQJypkujZnYYM8vwi8zk2zLjG80I4XCI0XTIoUmiuijy18v0sNJIviyUkKny_AgzPMqUkmMgiSwC0Cl47U7bcoyCqsgg5S8qs7NSn4hQ13FswE60ts3S-08EoyuWPC90jJT01K2M9yzixraYsAqiwMmQrMDnLisNFixA61VHBazy3xIK04DA_inAwStNYSozQE4ssqgoi4yq_U6qxtWquSqCgg63HtOs1SkLdSidXg3ALSzqtC33DszCvq7sgavst0pCiyt1KyjEmyic8KqciGxklyhc1a-amDCMncva6wwKvy3c6kjG1GhnE88K5wSKjknnK8oI-Kvk-8qIoimIxG9azKii9TSUz8vK7y_ah84qtMyg_I5bAs2zaSzImqp4pgqqmC94p6gdBCnEJC9qgQr6m0n6jC_Svo_qwYoGsyhmt1R82MuaummXDWk1GayA8iJIclHIRapY7aFY1ik2hIM2jagWLa3ATm3atI9GoS8Cjmk6wslSkC240s-62ka6oWhSgOxqs6k0lqs0lowLT62LbqhWvS46ZWgG1W0y_CjJUGu9XTfM9QyGuyrcmGxymc-GyDY202-i-2ikyGtmtPXG1XbGmkR2pEsnDw083w4mwIuKgXBK_k5KxU0asu22iu-m4a7Kpm5Ilm6ut2g6zIz2327m_Xc6v2_mxUwW3U4Wy6vNMOnmh3SOxs6O0tWOwIb67o3qrsp03stOoagika6mvcQeu2ke8yf0w2vcEM8oT1ZMSu1oZatY9-z-9HFGgdJu52ye2Utmk4kS46sS06ne3mkO2gteysjexS0Wx6n2idSW53NqzSjquOnShOs-x0yEtW9OgizOgWcGouvO-wNEzG7TEu4wf-yoL-oB2Gscgqxu-h6jAKrhuuhNVugmom6Kkm2K4I28xKgUlKu-phgNABya80xmj8ie1TfKiBjXKBnO3xcS8O0q5ekW1eoO9ehBjA7exeiOl61qg-vNI-oE-O0-zs4hnCwahIsNLW5h1hvWjOzcOE3AZPP2VPOCdPUITPbPfQcOiAAvfQIvIYBy1oMveLBASvavCUOvcOPEJvLuZwNvDvXvZubvNBPJhg_vG_AIYNTcUfOgcfCsZxtWvIWfYAefKWDMJfMBFfLgNfV_KvOBqgXfHp-KfxQ_X5Y_aZU_a_C_LgK_AffQAIJie_R_LgZ_V_d_baz_ARIRakbVVhMuPyYA5KaM3igWai2Isw7rC2qIA5zcE5wk1AuJ6awLF2vHfO92idWxrqghhxiRRcHiY3C-rGbJGJMh2VWE4HbOkq1ofK556Gu53OuGucnElHSY7-w81m6ezDGFquxk3h6GwNODbh48sKrwxjc8rnGK7k7uimpKh80akrOIrx_WgWHK0tR5lE2hnMgdN5k-0Er5n5hzP5yJUxQF6-liW-rgYi91JFp--aF-vNY51HEUm585q2xA-Vn01cgdQut1UB1R7yqFggzl-Wz5_S7535rJQVixIF8yChlQsFxEyFtlgujF0cEKxhvEtVs59h78muu_fFqkinGkvrAbfh0KpnLw1ndnTnA0sl68ilu8qlqmsVmI1VgkhRt8se5R3KnVmh38t1A1-x7l413llW4xc19W0ev8mlhYqVqgYhXxxaTlAOEjYJkIUJnPCJqJ9gGJkvPEBJivOyQIGvNJ2mYhTJ00bJ2QdvHvIQfJ-2Kd3UdQEpwfMp-kSp6pwIM16JXJPAJsRp0sYwPpUAMAVfKAdfTfbp8x3APpi9vxCQIZjBEZzcfAMZ8_IgS_RdmZoneZmGJ_cgF_TfFZp2nRdYRkJnf_bZ4YIA-kEA1Yg22VmrWl05pigWX-vNa55F1oeCdAh5sBscwR_VvB4-w1gtpOwylO30NFclD5S1-aa1-E214NqG9F312cwYIwxF0wxVz1gStFnQ5j7FzDXF8prj7TPDlwYlqK0l0R8l3kuNqR_umRiVjj1NrKpRrR6UnD9cvDmW9ouW_N36pW0j_lijilajvpLkGlyV-lkVyiuDyA5N0UpDzcFDt1dYlNthvNcNjnLDidFlkNzw5s2W_Bro4jlwZOozslEz4V8hkF4c-j6y2UvV3j4N111zhz5jzh6GpukK_jioQN5j0T4YTzyN0tS8sR8m2TvuithT1LqYxRt1Jl1T5ukT_GzbPNj5kLndQz0ldFMtm-txythV5Tvrnx-kfx-pbtzRFtjt9tsJztkyCb-E8vJJ_tmwQd0devcFDJ_xZvcdydwp6dnhAp92Iphd6_Jd4fCpuwKpx5Gp4y1FCLjFbdufPduQFpg99pzps98Oq964gZ29o_YhJ9kAM_TUV9yZ992_OZh_b9xZ395Z4Fqgf4SgdkdwAAbiwCwAICOjQHgGSgzCx6YFR6AA

Steps to Reproduce

When the X-axis type is 'time', the bar chart is out of area when zooming in through dataZoom. Is there a configuration that can solve this problem?

image

Current Behavior

When the X-axis type is 'time', the bar chart is out of area when zooming in through dataZoom. Is there a configuration that can solve this problem?

Expected Behavior

The bar chart beyond the area should be cropped

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

lx980312539 avatar Oct 15 '24 01:10 lx980312539

Hi @Ovilia , I found a solution. When the amount of data is large, I find that the bar chart is completely cropped. Then I set the 'largeThreshold' to 0, and that met my needs. Do you think this approach is feasible?

image

lx980312539 avatar Oct 15 '24 03:10 lx980312539

The bar chart beyond the area should be cropped

use dataZoom.filter:'filter' instead of 'none' 📌 please close issue if problem solved.

helgasoft avatar Oct 15 '24 16:10 helgasoft

Hi @helgasoft ,I've tried this before, but we don't need to filter the scene. The use of 'none' is what we expect and only requires the graph to zoom in and out. It would be too simple if it was just that. 0170E2C0

lx980312539 avatar Oct 16 '24 00:10 lx980312539

I've hit this bug as well and there are no decent workarounds. Using filterMode: filter may cause the y-axis to change dynamically without explicitly setting yMin/yMax and/or cause the bars to grow and shrink as the user drags the data, which isn't a great look.

adammark avatar Dec 13 '24 16:12 adammark