Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] The dataZoom‘s bounding box was calculated incorrectly and obscured the legend. #1050

Closed
kkxxkk2019 opened this issue Sep 22, 2023 · 0 comments · Fixed by #1076
Closed

[Bug] The dataZoom‘s bounding box was calculated incorrectly and obscured the legend. #1050

kkxxkk2019 opened this issue Sep 22, 2023 · 0 comments · Fixed by #1076
Assignees
@skie1997
Labels
bp bug Something isn't working
Milestone
v1.4.1

Comments

@kkxxkk2019
Copy link
Collaborator

Version

latest

Link to Minimal Reproduction

none

Steps to Reproduce

const spec = {
    type: 'bar',
    xField: ['230921112314016', '20001'],
    yField: ['10002'],
    direction: 'vertical',
    sortDataByAxis: true,
    seriesField: '20001',
    padding: 0,
    labelLayout: 'region',
    data: [
      {
        id: 'data',
        values: [
          {
            '10001': '行 ID',
            '10002': '1937717',
            '10003': '230921103852091',
            '20001': '华北-行 ID',
            '230921103852091': '1937717',
            '230921112314016': '公司',
            '230921112314146': '华北'
          },
          {
            '10001': '利润',
            '10002': '166445.20906487107',
            '10003': '230921112314124',
            '20001': '华北-利润',
            '230921112314016': '公司',
            '230921112314124': '166445.20906487107',
            '230921112314146': '华北'
          },
          {
            '10001': '销售额',
            '10002': '804769.4678850174',
            '10003': '230921112314131',
            '20001': '华北-销售额',
            '230921112314016': '公司',
            '230921112314131': '804769.4678850174',
            '230921112314146': '华北'
          },
          {
            '10001': '行 ID',
            '10002': '1431967',
            '10003': '230921103852091',
            '20001': '西南-行 ID',
            '230921103852091': '1431967',
            '230921112314016': '公司',
            '230921112314146': '西南'
          },
          {
            '10001': '利润',
            '10002': '30208.023854598403',
            '10003': '230921112314124',
            '20001': '西南-利润',
            '230921112314016': '公司',
            '230921112314124': '30208.023854598403',
            '230921112314146': '西南'
          },
          {
            '10001': '销售额',
            '10002': '469341.68548202515',
            '10003': '230921112314131',
            '20001': '西南-销售额',
            '230921112314016': '公司',
            '230921112314131': '469341.68548202515',
            '230921112314146': '西南'
          },
          {
            '10001': '行 ID',
            '10002': '4537839',
            '10003': '230921103852091',
            '20001': '华东-行 ID',
            '230921103852091': '4537839',
            '230921112314016': '公司',
            '230921112314146': '华东'
          },
          {
            '10001': '利润',
            '10002': '186383.42677396536',
            '10003': '230921112314124',
            '20001': '华东-利润',
            '230921112314016': '公司',
            '230921112314124': '186383.42677396536',
            '230921112314146': '华东'
          },
          {
            '10001': '销售额',
            '10002': '1454715.804889679',
            '10003': '230921112314131',
            '20001': '华东-销售额',
            '230921112314016': '公司',
            '230921112314131': '1454715.804889679',
            '230921112314146': '华东'
          },
          {
            '10001': '行 ID',
            '10002': '758080',
            '10003': '230921103852091',
            '20001': '西北-行 ID',
            '230921103852091': '758080',
            '230921112314016': '公司',
            '230921112314146': '西北'
          },
          {
            '10001': '利润',
            '10002': '44090.564069509506',
            '10003': '230921112314124',
            '20001': '西北-利润',
            '230921112314016': '公司',
            '230921112314124': '44090.564069509506',
            '230921112314146': '西北'
          },
          {
            '10001': '销售额',
            '10002': '253458.18463516235',
            '10003': '230921112314131',
            '20001': '西北-销售额',
            '230921112314016': '公司',
            '230921112314131': '253458.18463516235',
            '230921112314146': '西北'
          },
          {
            '10001': '行 ID',
            '10002': '4292739',
            '10003': '230921103852091',
            '20001': '中南-行 ID',
            '230921103852091': '4292739',
            '230921112314016': '公司',
            '230921112314146': '中南'
          },
          {
            '10001': '利润',
            '10002': '197862.08459425718',
            '10003': '230921112314124',
            '20001': '中南-利润',
            '230921112314016': '公司',
            '230921112314124': '197862.08459425718',
            '230921112314146': '中南'
          },
          {
            '10001': '销售额',
            '10002': '1335665.32513237',
            '10003': '230921112314131',
            '20001': '中南-销售额',
            '230921112314016': '公司',
            '230921112314131': '1335665.32513237',
            '230921112314146': '中南'
          },
          {
            '10001': '行 ID',
            '10002': '2469563',
            '10003': '230921103852091',
            '20001': '地区-dongbei-行 ID',
            '230921103852091': '2469563',
            '230921112314016': '公司',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '利润',
            '10002': '56978.326416149735',
            '10003': '230921112314124',
            '20001': '地区-dongbei-利润',
            '230921112314016': '公司',
            '230921112314124': '56978.326416149735',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '销售额',
            '10002': '834842.828546524',
            '10003': '230921112314131',
            '20001': '地区-dongbei-销售额',
            '230921112314016': '公司',
            '230921112314131': '834842.828546524',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '行 ID',
            '10002': '2120483',
            '10003': '230921103852091',
            '20001': '中南-行 ID',
            '230921103852091': '2120483',
            '230921112314016': '小型企业',
            '230921112314146': '中南'
          },
          {
            '10001': '利润',
            '10002': '147234.50668483973',
            '10003': '230921112314124',
            '20001': '中南-利润',
            '230921112314016': '小型企业',
            '230921112314124': '147234.50668483973',
            '230921112314146': '中南'
          },
          {
            '10001': '销售额',
            '10002': '743813.0075492859',
            '10003': '230921112314131',
            '20001': '中南-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '743813.0075492859',
            '230921112314146': '中南'
          },
          {
            '10001': '行 ID',
            '10002': '2750373',
            '10003': '230921103852091',
            '20001': '华东-行 ID',
            '230921103852091': '2750373',
            '230921112314016': '小型企业',
            '230921112314146': '华东'
          },
          {
            '10001': '利润',
            '10002': '109774.25205981731',
            '10003': '230921112314124',
            '20001': '华东-利润',
            '230921112314016': '小型企业',
            '230921112314124': '109774.25205981731',
            '230921112314146': '华东'
          },
          {
            '10001': '销售额',
            '10002': '942432.3721942902',
            '10003': '230921112314131',
            '20001': '华东-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '942432.3721942902',
            '230921112314146': '华东'
          },
          {
            '10001': '行 ID',
            '10002': '317294',
            '10003': '230921103852091',
            '20001': '西北-行 ID',
            '230921103852091': '317294',
            '230921112314016': '小型企业',
            '230921112314146': '西北'
          },
          {
            '10001': '利润',
            '10002': '5439.727965354919',
            '10003': '230921112314124',
            '20001': '西北-利润',
            '230921112314016': '小型企业',
            '230921112314124': '5439.727965354919',
            '230921112314146': '西北'
          },
          {
            '10001': '销售额',
            '10002': '103523.30778121948',
            '10003': '230921112314131',
            '20001': '西北-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '103523.30778121948',
            '230921112314146': '西北'
          },
          {
            '10001': '行 ID',
            '10002': '1364082',
            '10003': '230921103852091',
            '20001': '华北-行 ID',
            '230921103852091': '1364082',
            '230921112314016': '小型企业',
            '230921112314146': '华北'
          },
          {
            '10001': '利润',
            '10002': '72593.22689580917',
            '10003': '230921112314124',
            '20001': '华北-利润',
            '230921112314016': '小型企业',
            '230921112314124': '72593.22689580917',
            '230921112314146': '华北'
          },
          {
            '10001': '销售额',
            '10002': '422100.9874534607',
            '10003': '230921112314131',
            '20001': '华北-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '422100.9874534607',
            '230921112314146': '华北'
          },
          {
            '10001': '行 ID',
            '10002': '1556714',
            '10003': '230921103852091',
            '20001': '地区-dongbei-行 ID',
            '230921103852091': '1556714',
            '230921112314016': '小型企业',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '利润',
            '10002': '64188.91547188163',
            '10003': '230921112314124',
            '20001': '地区-dongbei-利润',
            '230921112314016': '小型企业',
            '230921112314124': '64188.91547188163',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '销售额',
            '10002': '522739.03513240814',
            '10003': '230921112314131',
            '20001': '地区-dongbei-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '522739.03513240814',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '行 ID',
            '10002': '663690',
            '10003': '230921103852091',
            '20001': '西南-行 ID',
            '230921103852091': '663690',
            '230921112314016': '小型企业',
            '230921112314146': '西南'
          },
          {
            '10001': '利润',
            '10002': '13248.031875252724',
            '10003': '230921112314124',
            '20001': '西南-利润',
            '230921112314016': '小型企业',
            '230921112314124': '13248.031875252724',
            '230921112314146': '西南'
          },
          {
            '10001': '销售额',
            '10002': '156479.9320793152',
            '10003': '230921112314131',
            '20001': '西南-销售额',
            '230921112314016': '小型企业',
            '230921112314131': '156479.9320793152',
            '230921112314146': '西南'
          },
          {
            '10001': '行 ID',
            '10002': '3637788',
            '10003': '230921103852091',
            '20001': '华北-行 ID',
            '230921103852091': '3637788',
            '230921112314016': '消费者',
            '230921112314146': '华北'
          },
          {
            '10001': '利润',
            '10002': '192014.78153175116',
            '10003': '230921112314124',
            '20001': '华北-利润',
            '230921112314016': '消费者',
            '230921112314124': '192014.78153175116',
            '230921112314146': '华北'
          },
          {
            '10001': '销售额',
            '10002': '1220430.5587997437',
            '10003': '230921112314131',
            '20001': '华北-销售额',
            '230921112314016': '消费者',
            '230921112314131': '1220430.5587997437',
            '230921112314146': '华北'
          },
          {
            '10001': '行 ID',
            '10002': '1293604',
            '10003': '230921103852091',
            '20001': '西北-行 ID',
            '230921103852091': '1293604',
            '230921112314016': '消费者',
            '230921112314146': '西北'
          },
          {
            '10001': '利润',
            '10002': '49023.18348328769',
            '10003': '230921112314124',
            '20001': '西北-利润',
            '230921112314016': '消费者',
            '230921112314124': '49023.18348328769',
            '230921112314146': '西北'
          },
          {
            '10001': '销售额',
            '10002': '458058.10551834106',
            '10003': '230921112314131',
            '20001': '西北-销售额',
            '230921112314016': '消费者',
            '230921112314131': '458058.10551834106',
            '230921112314146': '西北'
          },
          {
            '10001': '行 ID',
            '10002': '6743869',
            '10003': '230921103852091',
            '20001': '中南-行 ID',
            '230921103852091': '6743869',
            '230921112314016': '消费者',
            '230921112314146': '中南'
          },
          {
            '10001': '利润',
            '10002': '325788.7225390896',
            '10003': '230921112314124',
            '20001': '中南-利润',
            '230921112314016': '消费者',
            '230921112314124': '325788.7225390896',
            '230921112314146': '中南'
          },
          {
            '10001': '销售额',
            '10002': '2057936.7624292374',
            '10003': '230921112314131',
            '20001': '中南-销售额',
            '230921112314016': '消费者',
            '230921112314131': '2057936.7624292374',
            '230921112314146': '中南'
          },
          {
            '10001': '行 ID',
            '10002': '2408001',
            '10003': '230921103852091',
            '20001': '西南-行 ID',
            '230921103852091': '2408001',
            '230921112314016': '消费者',
            '230921112314146': '西南'
          },
          {
            '10001': '利润',
            '10002': '54180.67230556905',
            '10003': '230921112314124',
            '20001': '西南-利润',
            '230921112314016': '消费者',
            '230921112314124': '54180.67230556905',
            '230921112314146': '西南'
          },
          {
            '10001': '销售额',
            '10002': '677302.8914031982',
            '10003': '230921112314131',
            '20001': '西南-销售额',
            '230921112314016': '消费者',
            '230921112314131': '677302.8914031982',
            '230921112314146': '西南'
          },
          {
            '10001': '行 ID',
            '10002': '7262013',
            '10003': '230921103852091',
            '20001': '华东-行 ID',
            '230921103852091': '7262013',
            '230921112314016': '消费者',
            '230921112314146': '华东'
          },
          {
            '10001': '利润',
            '10002': '311061.0042088777',
            '10003': '230921112314124',
            '20001': '华东-利润',
            '230921112314016': '消费者',
            '230921112314124': '311061.0042088777',
            '230921112314146': '华东'
          },
          {
            '10001': '销售额',
            '10002': '2287358.2651634216',
            '10003': '230921112314131',
            '20001': '华东-销售额',
            '230921112314016': '消费者',
            '230921112314131': '2287358.2651634216',
            '230921112314146': '华东'
          },
          {
            '10001': '行 ID',
            '10002': '4270528',
            '10003': '230921103852091',
            '20001': '地区-dongbei-行 ID',
            '230921103852091': '4270528',
            '230921112314016': '消费者',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '利润',
            '10002': '121024.26733334363',
            '10003': '230921112314124',
            '20001': '地区-dongbei-利润',
            '230921112314016': '消费者',
            '230921112314124': '121024.26733334363',
            '230921112314146': '地区-dongbei'
          },
          {
            '10001': '销售额',
            '10002': '1323985.6108589172',
            '10003': '230921112314131',
            '20001': '地区-dongbei-销售额',
            '230921112314016': '消费者',
            '230921112314131': '1323985.6108589172',
            '230921112314146': '地区-dongbei'
          }
        ],
        fields: {
          '10001': {
            alias: '指标名称 '
          },
          '10002': {
            alias: '指标值 '
          },
          '20001': {
            alias: '图例项 ',
            domain: [
              '华北-行 ID',
              '西南-行 ID',
              '华东-行 ID',
              '西北-行 ID',
              '中南-行 ID',
              '地区-dongbei-行 ID',
              '华北-利润',
              '西南-利润',
              '华东-利润',
              '西北-利润',
              '中南-利润',
              '地区-dongbei-利润',
              '华北-销售额',
              '西南-销售额',
              '华东-销售额',
              '西北-销售额',
              '中南-销售额',
              '地区-dongbei-销售额'
            ],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230921103852091': {
            alias: '行 ID'
          },
          '230921112314016': {
            alias: '细分',
            domain: ['公司', '消费者', '小型企业'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230921112314124': {
            alias: '利润'
          },
          '230921112314131': {
            alias: '销售额'
          },
          '230921112314146': {
            alias: '地区'
          }
        }
      }
    ],
    dataZoom: [
      {
        filterMode: 'axis',
        showDetail: false,
        orient: 'bottom',
        padding: {
          top: 15
        },
        height: 28,
        backgroundColor: {
          style: {}
        },
        backgroundChart: {
          area: {
            style: {}
          }
        },
        selectedBackground: {
          style: {}
        },
        startHandler: {
          style: {
            size: 20
          }
        },
        endHandler: {
          style: {
            size: 20
          }
        },
        middleHandler: {
          visible: false
        }
      },
      {
        filterMode: 'axis',
        orient: 'left',
        padding: {
          right: 15
        },
        width: 28,
        backgroundColor: {
          style: {}
        },
        backgroundChart: {
          area: {
            style: {}
          }
        },
        selectedBackground: {
          style: {}
        },
        startHandler: {
          style: {}
        },
        endHandler: {
          style: {}
        },
        middleHandler: {
          visible: false
        }
      }
    ],
    axes: [
      {
        type: 'band',
        tick: {
          visible: false
        },
        grid: {
          visible: false,
          style: {
            zIndex: 150,
            stroke: '#6392ff',
            lineWidth: 5,
            lineDash: [5, 5]
          }
        },
        orient: 'bottom',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: '#989999'
          }
        },
        title: {
          visible: true,
          space: 5,
          text: '细分',
          style: {
            fontSize: 22,
            fill: '#363839',
            fontWeight: 'normal'
          }
        },
        sampling: false,
        zIndex: 200,
        label: {
          visible: true,
          space: 4,
          style: {
            fontSize: 28,
            fill: '#3772ff',
            angle: 0,
            fontWeight: 'normal',
            direction: 'vertical'
          },
          autoHide: true,
          autoHideMethod: 'greedy',
          flush: true
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        paddingInner: [0.15, 0.1],
        paddingOuter: [0.075, 0.1]
      },
      {
        type: 'linear',
        tick: {
          visible: false,
          style: {
            stroke: '#cfcfcf'
          }
        },
        niceType: 'accurateFirst',
        zIndex: 200,
        grid: {
          visible: false,
          style: {
            zIndex: 150,
            stroke: '#6392ff',
            lineWidth: 5,
            lineDash: [5, 5]
          }
        },
        orient: 'left',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: '#cfcfcf'
          }
        },
        title: {
          visible: true,
          text: '行 ID',
          space: 8,
          style: {
            fontSize: 12,
            fill: '#363839',
            fontWeight: 'normal'
          }
        },
        sampling: false,
        label: {
          visible: true,
          space: 6,
          flush: true,
          padding: 0,
          style: {
            fontSize: 12,
            maxLineWidth: 174,
            fill: '#6F6F6F',
            angle: 0,
            fontWeight: 'normal',
            dy: -1,
            direction: 'vertical'
          },
          autoHide: true,
          autoHideMethod: 'greedy'
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        zero: true,
        nice: true
      }
    ],
    color: {
      field: '20001',
      type: 'ordinal',
      range: [
        '#2E62F1',
        '#4DC36A',
        '#FF8406',
        '#FFCC00',
        '#4F44CF',
        '#5AC8FA',
        '#003A8C',
        '#B08AE2',
        '#FF6341',
        '#98DD62',
        '#07A199',
        '#87DBDD',
        '#2E62F1',
        '#4DC36A',
        '#FF8406',
        '#FFCC00',
        '#4F44CF',
        '#5AC8FA'
      ],
      specified: {},
      domain: [
        '华北-行 ID',
        '西南-行 ID',
        '华东-行 ID',
        '西北-行 ID',
        '中南-行 ID',
        '地区-dongbei-行 ID',
        '华北-利润',
        '西南-利润',
        '华东-利润',
        '西北-利润',
        '中南-利润',
        '地区-dongbei-利润',
        '华北-销售额',
        '西南-销售额',
        '华东-销售额',
        '西北-销售额',
        '中南-销售额',
        '地区-dongbei-销售额'
      ]
    },
    legends: [
      {
        type: 'discrete',
        id: 'legend-discrete',
        orient: 'left',
        position: 'middle',
        layoutType: 'normal',
        visible: true,
        maxCol: 1,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 435,
          spaceRow: 0,
          spaceCol: 0,
          padding: {
            top: 1,
            bottom: 2,
            left: 3,
            right: 2
          },
          background: {
            visible: false,
            style: {
              fillOpacity: 0.001
            }
          },
          label: {
            style: {
              fontSize: 12,
              fill: '#6F6F6F'
            }
          },
          shape: {
            style: {
              lineWidth: 0,
              symbolType: 'square'
            }
          }
        },
        pager: {
          layout: 'horizontal',
          padding: {
            left: -18
          },
          textStyle: {},
          space: 0,
          handler: {
            preShape: 'triangleLeft',
            nextShape: 'triangleRight',
            style: {},
            state: {
              disable: {}
            }
          }
        },
        padding: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 16
        }
      }
    ],
    label: {
      visible: true,
      overlap: {
        hideOnHit: true,
        avoidBaseMark: false,
        strategy: [
          {
            type: 'moveY',
            offset: [
              -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4,
              5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
            ]
          },
          {
            type: 'moveX',
            offset: [
              -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4,
              5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20
            ]
          }
        ],
        clampForce: true
      },
      style: {
        fontSize: 12,
        fontWeight: 'normal',
        zIndex: 100,
        fill: null,
        strokeOpacity: 1
      },
      position: 'inside',
      smartInvert: {
        fillStrategy: 'invertBase',
        strokeStrategy: 'similarBase'
      }
    },
    tooltip: {
      handler: {}
    },
    hover: {
      enable: true
    },
    select: {
      enable: true
    },
    bar: {
      state: {
        hover: {
          cursor: 'pointer',
          fillOpacity: 0.8,
          stroke: '#58595B',
          lineWidth: 1,
          zIndex: 500
        },
        selected: {
          cursor: 'pointer',
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        },
        selected_reverse: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    region: [
      {
        clip: true
      }
    ],
    background: 'rgba(255, 255, 255, 0)',
    animation: false,
    brush: {
      inBrush: {
        style: {
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        }
      },
      outOfBrush: {
        style: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    hash: '9f491e93aebec1525311e22f00265332'
  };

Current Behavior

2023-09-22 10-14-13 2023-09-22 10_14_27

Expected Behavior

fix it

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@skie1997 skie1997

Labels
bp bug Something isn't working
Projects
None yet
Milestone
v1.4.1
Development

Successfully merging a pull request may close this issue.

Fix/data zoom bounds VisActor/VChart
2 participants
@skie1997 @kkxxkk2019