[Bug] datazoom 设置了自定义 icon 之后不能缩放

[jsahkjfhasjhfas]

Version

5.3.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&code=PTAEGUFNNALAXeAHAzgLhAcwJb1gVwCMA6AYwHsBbYSCygM0htNgEMAneFAWhXlfgAoWm04pi7SDj6R2AFXasAdinrl2lABS1w_eMXiKVajWQA2-Ge2xLMASgDcgiivigAJgNagAvKADagqABAMzEAEwA7ACsAIzRACwANKDhxACc0TEAHJEAuklBAdxhIQnlAGzRKWkVAAwhcSEFRf51xI3RddkhKSUdkVXZ0S3B_rHEw-EJjSlhiZGNsaPFaXWR2emLNcTR0eF1sc2FY2nlsRWxsSnt5QnZ4RUteU4AbhygAMIAMgCq4HIAKIAJQA-p8APK_ABycl8oAqbw-ABEAJKA6HgVGoiHQ8F_AEg0Go6HIwEADXh4Scgne7FASGwtEgKHh_heghMoE0dNA2HhdQcfNAAB4vgSgWDITC5ELsABqeV2UAAbyKjOZ4iQllgmjVwWC7wskDQfJOBrMrEIkDMpoA5KQLFZQHbQPKzUVghQzOp7QBiEKRACC4WRQbtRQAvo5BJHBOQkPBsOQlPD9R4vChIPBTYEDarPQaUOR8OxSCaM_xC5HzcF0_nDMpVOpKKb6_nQPAAJ5ICt2nR6NCOyzwWQ2TB22sdlz0bCYNuFjugYdWT4lpQ58X_SXgqGwqdLkvIfDwOQ9vsocdmSCTxcdo_a-CfJ2j9iopTuSAAD2R2EokBUZMlFNNEMSxHE8R-bciRJMlyTvYI4yXJCDRQlZ4HIcgzEIcgvwXfMUFgcgAHdTUMfBICnRgBFLCt22CTx-AALUw1sCyXYIuyDL9sBQd9Pzwl0lBTG8DwNbAXFzBCDTtJABFgDBgAAWXaCo1MOCpQEiYg6l0kIQk-VT1IuUB5jqcJElM3ZDmiTSjIqdJ0nCBEMkcxpQHsxzwk-WJbi2WIPOINSHKc0Ajg6EIoisroLISMLSkiyItJ0vSDPC_Souyaz0m6MK0myOo4lAdJJnSBIKhCMKJic8owvadIHmib5YgSAYQgC8KZiOHzWoq9zwockyWqC_TojC1qrkDca2o61rAwSWIeuIK5wmyaaKtqgacqS4aNrizqQgaab5tiZr6uyIbqosgySs2EIqjyyY6kuUAsq6C6OoSqaKlc9J-q-yJPjM-JNPS_SkvsjS6uIBIGoCyGTO03SGhCJilJ-xy_rGtZUs-VrwkDMrUhSlGwt-9z8ZCTZnOqtyxqR3Haax4riEGWJIjiynIiJ2IcaOjG6ce5GbtZ-pBiFvSqvJlm2Y5qXMcqhmUZ8pnKsp6mZbFzS-f0lyFexkn9LRgXmbm_S1M-bT7piTmIvuzTtOC8zQF6yKWuSp3nOiQ2QgANR-_T7YACSy_XPhK63LID83NJKz2XIq8J3bj9TnKV_Tw6C1PkvuqYWcjuLHbUxzXvJ-ms5CoOi_qcJfZK4WDOr52I4qPOrYqG2WeCkuTfclOQs-H6KquWOK57iLHjWlu8-jyeWYb33q8coPWrD12R494v0hdifW5z1v9h3jK9_Tgyzbnoe3dt4eTOj-2d_1lzA7UoPZ9b33vYbwfd7W12k7iy-G8zb317mNYBakmK3g4jJOSeBFJKW9qtR4Y0Jg9Byukb-z10ig12LzDYet2rYLJoHQ4yUejlUqhMEhi1fI6XiPtO2pCrgZDiElNIVNDiULCBcNaYRMbmV9rUNSZQfLcL3mkcIcMUFhHKhUBhmMO7xUmGUHBCjAbDQOKtMmajppdCOMTSRF0UGtT0ZVIRG1F6_Q7ktUxpdrbZFBvjcya0srBTKEo8hmlXHCISKImGak4reI2konhdiO4OJCSfKx6ixFrU_okIa7QNjO3Me47SnizEVxEdpK45lt6pIATDJOjxiYXQaElb23NwZWXWOsXx3tyqbCSmEA4-wxrewuIVZpAw6iZB3rkWIf1opyMGXjXYF0rI5D6XNXyzk-EXTkTvZ67j8arXKEDSYFxNKtQSDEaY0U_rpACq1Dm9Q4qlEcvEUAn97pbA2YMmYlVvZlEkZk5JJSGnTCOcTXZMxrkRAOL0z4aQeHuM_vEEpawHEUyCocQZBijmxF_hETIBNgW7DKGNPh7Vxb5V5rZA599uGtO3i04YFUNkJFWhUZyaQtjizCIMDutKgqOUshNQ68Kzi2STmM2G3QDb_0iElVquQqgG10hzbeiCHgPVQSEdBkDpIrHzChRCUZzSYGsO4fCFpID0E3LzOoGqihfm4rxNsNYihcR4ugVUVrghZmsCyXVwRuy9ntCgUgAhXxQINABCgn42ydkwmYJMSBcx1BSMsUADqixdkoDhMw4BsAAC8KzxCnLgSAlBdBdmvK6g0OF2CfnYGuH07B_R7GiBGVVU5GKsCzPAfi35TSxCjLGBwQA

Steps to Reproduce

点击右上角放大图标，拖动缩放失效。
如果使用默认配置，功能正常。

Current Behavior

想要给 toolbox / datazoom 的「缩放」、「还原」按钮设置自定义 icon。
当我设置 icon 之后缩放失效。

Expected Behavior

点击 toolbox 左侧按钮，可以使用鼠标拖动缩放。

Environment

- OS: macOS
- Browser: Chrome
- Framework: Vue@3

Any additional comments?

No response

[echarts-bot]

@jsahkjfhasjhfas 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] Datazoom cannot scale after setting a custom icon

[plainheart]

似乎 icon 用法不正确，文档中说明 icon 是一个对象，而非数组。应该如下设置，

icon: {
    zoom: 'path://....',
    back: 'path://...'
}

[jsahkjfhasjhfas]

似乎 icon 用法不正确，文档中说明 icon 是一个对象，而非数组。应该如下设置，

icon: {
    zoom: 'path://....',
    back: 'path://...'
}

哦😯，确实是，但是我如果用这种方式设置 x 轴和 y 轴时。自定义的 icon 就不生效了。把 toolbox 改为：

toolbox: {
    show: true,
    feature: {
      // !! here
      dataZoom: [
        // 在这里设置 x y 轴缩放，但是自定义的 icon 并没有生效
        {
          yAxisIndex: 'none',
          icon: {
            zoom: 'path://M0.666016 7.00033C0.666016 3.50254 3.50156 0.666992 6.99935 0.666992C10.4971 0.666992 13.3327 3.50254 13.3327 7.00033C13.3327 8.50908 12.8051 9.89463 11.9244 10.9825L14.3731 13.4313C14.6335 13.6916 14.6335 14.1137 14.3731 14.3741C14.1128 14.6344 13.6907 14.6344 13.4303 14.3741L10.9816 11.9253C9.89365 12.8061 8.50811 13.3337 6.99935 13.3337C3.50156 13.3337 0.666016 10.4981 0.666016 7.00033ZM6.99935 2.00033C4.23794 2.00033 1.99935 4.23892 1.99935 7.00033C1.99935 9.76174 4.23794 12.0003 6.99935 12.0003C9.76076 12.0003 11.9993 9.76174 11.9993 7.00033C11.9993 4.23892 9.76076 2.00033 6.99935 2.00033ZM6.99935 4.33366C7.36754 4.33366 7.66602 4.63214 7.66602 5.00033V6.33366H8.99935C9.36754 6.33366 9.66602 6.63214 9.66602 7.00033C9.66602 7.36852 9.36754 7.66699 8.99935 7.66699H7.66602V9.00033C7.66602 9.36852 7.36754 9.66699 6.99935 9.66699C6.63116 9.66699 6.33268 9.36852 6.33268 9.00033V7.66699H4.99935C4.63116 7.66699 4.33268 7.36852 4.33268 7.00033C4.33268 6.63214 4.63116 6.33366 4.99935 6.33366H6.33268V5.00033C6.33268 4.63214 6.63116 4.33366 6.99935 4.33366Z',
            back: 'path://M5.28265 1.83909C6.0696 1.51278 6.93196 1.33301 7.83463 1.33301C10.0154 1.33301 11.9517 2.38013 13.168 3.99902V2.66634C13.168 2.29815 13.4664 1.99967 13.8346 1.99967C14.2028 1.99967 14.5013 2.29815 14.5013 2.66634V7.99967C14.5013 8.36786 14.2028 8.66634 13.8346 8.66634C13.4664 8.66634 13.168 8.36786 13.168 7.99967C13.168 5.05416 10.7802 2.66634 7.83463 2.66634C7.11029 2.66634 6.42126 2.81037 5.79337 3.07074C5.46897 3.20525 5.16057 3.37095 4.87193 3.56419C4.581 3.75895 4.3102 3.98164 4.0634 4.22844C3.8166 4.47524 3.59391 4.74604 3.39915 5.03697C3.19433 5.34293 2.78026 5.42491 2.4743 5.22009C2.16834 5.01526 2.08635 4.60119 2.29118 4.29523C2.5345 3.93176 2.81256 3.59366 3.12059 3.28563C3.42862 2.9776 3.76672 2.69954 4.13019 2.45621C4.49085 2.21477 4.87655 2.00749 5.28265 1.83909Z'
          }
        },
        {
          xAxisIndex: 'none',
          icon: {
            zoom: 'path://M0.666016 7.00033C0.666016 3.50254 3.50156 0.666992 6.99935 0.666992C10.4971 0.666992 13.3327 3.50254 13.3327 7.00033C13.3327 8.50908 12.8051 9.89463 11.9244 10.9825L14.3731 13.4313C14.6335 13.6916 14.6335 14.1137 14.3731 14.3741C14.1128 14.6344 13.6907 14.6344 13.4303 14.3741L10.9816 11.9253C9.89365 12.8061 8.50811 13.3337 6.99935 13.3337C3.50156 13.3337 0.666016 10.4981 0.666016 7.00033ZM6.99935 2.00033C4.23794 2.00033 1.99935 4.23892 1.99935 7.00033C1.99935 9.76174 4.23794 12.0003 6.99935 12.0003C9.76076 12.0003 11.9993 9.76174 11.9993 7.00033C11.9993 4.23892 9.76076 2.00033 6.99935 2.00033ZM6.99935 4.33366C7.36754 4.33366 7.66602 4.63214 7.66602 5.00033V6.33366H8.99935C9.36754 6.33366 9.66602 6.63214 9.66602 7.00033C9.66602 7.36852 9.36754 7.66699 8.99935 7.66699H7.66602V9.00033C7.66602 9.36852 7.36754 9.66699 6.99935 9.66699C6.63116 9.66699 6.33268 9.36852 6.33268 9.00033V7.66699H4.99935C4.63116 7.66699 4.33268 7.36852 4.33268 7.00033C4.33268 6.63214 4.63116 6.33366 4.99935 6.33366H6.33268V5.00033C6.33268 4.63214 6.63116 4.33366 6.99935 4.33366Z',
            back: 'path://M5.28265 1.83909C6.0696 1.51278 6.93196 1.33301 7.83463 1.33301C10.0154 1.33301 11.9517 2.38013 13.168 3.99902V2.66634C13.168 2.29815 13.4664 1.99967 13.8346 1.99967C14.2028 1.99967 14.5013 2.29815 14.5013 2.66634V7.99967C14.5013 8.36786 14.2028 8.66634 13.8346 8.66634C13.4664 8.66634 13.168 8.36786 13.168 7.99967C13.168 5.05416 10.7802 2.66634 7.83463 2.66634C7.11029 2.66634 6.42126 2.81037 5.79337 3.07074C5.46897 3.20525 5.16057 3.37095 4.87193 3.56419C4.581 3.75895 4.3102 3.98164 4.0634 4.22844C3.8166 4.47524 3.59391 4.74604 3.39915 5.03697C3.19433 5.34293 2.78026 5.42491 2.4743 5.22009C2.16834 5.01526 2.08635 4.60119 2.29118 4.29523C2.5345 3.93176 2.81256 3.59366 3.12059 3.28563C3.42862 2.9776 3.76672 2.69954 4.13019 2.45621C4.49085 2.21477 4.87655 2.00749 5.28265 1.83909Z'
          }
        }
      ]
  },

[plainheart]

datazoom 也是单个对象，并未说明支持数组。

[jsahkjfhasjhfas]

datazoom 也是单个对象，并未说明支持数组。

谢谢哦，最后解决方案：

feature: {
      dataZoom: {
        yAxisIndex: [0, 100],
        xAxisIndex: [0, 100],
        icon: {
          zoom: 'path://xxx',
          back: 'path://xxx'
        },
      }
    }