apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.3k stars 19.61k forks source link

[Bug] Disable Zoom out but have zoom in #20132

Open princ09 opened 3 months ago

princ09 commented 3 months ago

Version

5.5

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=treemap-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5GDllgLYCGITANFQoATLmC7Ey1aqilToXDo1hNowIVgCC_QbIBuXADYBXJQEYADANnUAxgAsIBoW2gSd1mddnzFzVeo0ubS89QxNiABZ3WQBfKxD0TwT0HyUVNU0AI2Dk9H1jJQA2aKkYkvQAXRK4kqTrVL8MgCEcr3zw2AAmS3LYe0dnLFdSXsTRigblfywmoPjc9qVu-eT-pxc3XOlx7wU06dnTVq28sKXzHYoyk6rc65Db63vqCpX0DBtDLAAZCA4IMDEOrUf7DCw9LzcAAexAArOYLrE3rADFxMlgDECSgAzYA4bhgMC4YjYozQGyQGCwAAUAEpKAk2GAjDg4AADJB_ADmAB8YrBLtJUjyAEoAUW-AEkNAA5ADCYv5gooSGxEBwGDAADUzjyAMx8bqmAB0AA5zEqTtJsDYYEIdQUeeZjQB2F0AUhibPGNS8eHsWNy3MDW0yXBsAGsuThgGShHLgAY8SGTn8uFy0nZCSAiAB6XMYPUAWgwtA4mUTRaTXOAxtYXCEEGgXN0-AA7sbbRxc2wDBAuOSsEWm0IjJq8IZh9BsTguOOjBSWVhjRhdFzjglfVs7FgIFys8RwcivG2IEIwHZDwjj9YKzh1DgRQ2IGO4RCtoY98MmDYhkScBuTw3tQkzAiEn5ct-v7QP-gFeLiMEAMoQAAXksETAVItpJjgzAAMQAGJEXB1hElCYAACqztAGC4vizBGCADA4J82BMD6mHoGqGramcKbJBBUF_rgJGyAhYDIWhxDLJc2HJugTCEcRnEUGRlHUbReIcAxTG4KxWDsXcKk2naDodGBXiCcw0GwSpXEwBJqFmKadl9Im8mKURBGiVIalUQOmn0cojHMfphnJFuXiRdYVnKDZImYbouCQJ8BgaH2kHMP8QhCAYBnIs8sD3FUMQANxAA

Steps to Reproduce

Run the link or check below code

option = {
  series: [
    {
      type: 'treemap',
      data: [
        {
          name: 'nodeA',
          value: 10,
          children: [
            {
              name: 'nodeAa',
              value: 4
            },
            {
              name: 'nodeAb',
              value: 6
            }
          ]
        },
        {
          name: 'nodeB',
          value: 20,
          children: [
            {
              name: 'nodeBa',
              value: 20,
              children: [
                {
                  name: 'nodeBa1',
                  value: 20
                }
              ]
            }
          ]
        }
      ],
      scaleLimit: {
        min: 100,
        max: 500
      },
      label: {
        formatter: function () {
          return `{img|} 
                  {name|RELIANCE} 
                  {firstValue|3,201.80} 
                  {secondValue|0.77%}`
            },
        rich: {
            img: {
              backgroundColor: {
                image: 'https://s3-symbol-logo.tradingview.com/reliance-industrial-infrastructure.svg',
              },
              height: 100,
              width: 100,
              borderRadius: 50,
              align: 'center',
            },
            name: {
              align: 'center',
              fontSize: 24,
              color: '#FFF',
              textTransform: 'uppercase'
            },
            firstValue: {
              align: 'center',
              fontSize: 20,
              color:  '#FFF',
              textTransform: 'uppercase'
            },
            secondValue: {
              align: 'center',
              fontSize: 18,
              color: '#FFF',
              textTransform: 'uppercase'
            },
          },
          align: 'center',
          verticalAlign: 'middle',
      }
    }
  ]
};

Current Behavior

I would like to disable the zoom out so that user cannot zoom out and see the white spaces around the treemap. for this I set min value of scaleLimit to 100, expecting that it will be always 100 and wont zoom out further. But it's not working and I am getting unexpected zoom.

Expected Behavior

Ideally It shouldn't zoom out and just zoom in till 500.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

helgasoft commented 2 months ago

I set min value of scaleLimit to 100

This value is too high. Value of 1 is like 100%, so try scaleLimit: { max: 1.5, min: 0.5 } - Demo.

princ09 commented 2 months ago

Still, if we set 1 in min ( considering its minimum zoom) ideally this shouldn't zoom in at all. But here it's getting zoomed in. The original issue is , if someone wants to disable the zoom in then how can they do it?

helgasoft commented 2 months ago

max should be 1 to disable zoom-in (not min).