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] scrollBar will not disappear after updateSpec #1044

Closed
da730 opened this issue Sep 21, 2023 · 1 comment · Fixed by #1049
Closed

[Bug] scrollBar will not disappear after updateSpec #1044

da730 opened this issue Sep 21, 2023 · 1 comment · Fixed by #1049
Assignees
@kkxxkk2019
Labels
bp bug Something isn't working
Milestone
v1.4.0

Comments

@da730
Copy link
Contributor

da730 commented Sep 21, 2023

Version

1.4.0

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
    type: 'bar',
    xField: ['230921215252017', '20001'],
    yField: ['10002'],
    direction: 'vertical',
    sortDataByAxis: true,
    seriesField: '20001',
    padding: 0,
    labelLayout: 'region',
    data: [
      {
        id: 'data',
        values: [
          {
            '10001': '销售额',
            '10002': '2447301.0141382217',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '2447301.0141382217',
            '230921215252017': '华北'
          },
          {
            '10001': '数量',
            '10002': '5146',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '5146',
            '230921215252017': '华北'
          },
          {
            '10001': '行 ID',
            '10002': '6939587',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '6939587',
            '230921215252017': '华北'
          },
          {
            '10001': '销售额',
            '10002': '4684506.442247391',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '4684506.442247391',
            '230921215252017': '华东'
          },
          {
            '10001': '数量',
            '10002': '11041',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '11041',
            '230921215252017': '华东'
          },
          {
            '10001': '行 ID',
            '10002': '14550225',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '14550225',
            '230921215252017': '华东'
          },
          {
            '10001': '销售额',
            '10002': '815039.5979347229',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '815039.5979347229',
            '230921215252017': '西北'
          },
          {
            '10001': '数量',
            '10002': '1785',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '1785',
            '230921215252017': '西北'
          },
          {
            '10001': '行 ID',
            '10002': '2368978',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '2368978',
            '230921215252017': '西北'
          },
          {
            '10001': '销售额',
            '10002': '2681567.4745378494',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '2681567.4745378494',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '数量',
            '10002': '6463',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '6463',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '行 ID',
            '10002': '8296805',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '8296805',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '销售额',
            '10002': '1303124.5089645386',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '1303124.5089645386',
            '230921215252017': '西南'
          },
          {
            '10001': '数量',
            '10002': '3399',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '3399',
            '230921215252017': '西南'
          },
          {
            '10001': '行 ID',
            '10002': '4503658',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '4503658',
            '230921215252017': '西南'
          },
          {
            '10001': '销售额',
            '10002': '4137415.0951108932',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '4137415.0951108932',
            '230921215252017': '中南'
          },
          {
            '10001': '数量',
            '10002': '9700',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '9700',
            '230921215252017': '中南'
          },
          {
            '10001': '行 ID',
            '10002': '13157091',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '13157091',
            '230921215252017': '中南'
          }
        ],
        fields: {
          '10001': {
            alias: '指标名称 '
          },
          '10002': {
            alias: '指标值 '
          },
          '20001': {
            alias: '图例项 ',
            domain: ['销售额', '数量', '行 ID'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230921213740029': {
            alias: '销售额'
          },
          '230921213740034': {
            alias: '数量'
          },
          '230921213740037': {
            alias: '行 ID'
          },
          '230921215252017': {
            alias: '地区',
            domain: ['地区-dongbei', '华北', '华东', '西北', '西南', '中南'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          }
        }
      }
    ],
    axes: [
      {
        type: 'band',
        tick: {
          visible: false
        },
        grid: {
          visible: false,
          style: {
            zIndex: 150,
            stroke: '#DADCDD',
            lineWidth: 1,
            lineDash: [4, 2]
          }
        },
        orient: 'bottom',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: '#989999'
          }
        },
        title: {
          visible: false,
          space: 5,
          text: '地区',
          style: {
            fontSize: 12,
            fill: '#363839',
            fontWeight: 'normal'
          }
        },
        sampling: false,
        zIndex: 200,
        label: {
          visible: true,
          space: 4,
          style: {
            fontSize: 12,
            fill: '#6F6F6F',
            angle: 0,
            fontWeight: 'normal',
            direction: 'horizontal'
          },
          autoHide: true,
          autoHideMethod: 'greedy',
          flush: true
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        paddingInner: [0, 0.1],
        paddingOuter: [0, 0.25],
        bandSize: 1160
      },
      {
        type: 'linear',
        tick: {
          visible: false,
          style: {
            stroke: 'rgba(255, 255, 255, 0)'
          }
        },
        niceType: 'accurateFirst',
        zIndex: 200,
        grid: {
          visible: true,
          style: {
            zIndex: 150,
            stroke: '#DADCDD',
            lineWidth: 1,
            lineDash: [4, 2]
          }
        },
        orient: 'left',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: 'rgba(255, 255, 255, 0)'
          }
        },
        title: {
          visible: false,
          text: '销售额',
          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: 'horizontal'
          },
          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'],
      specified: {},
      domain: ['销售额', '数量', '行 ID']
    },
    legends: [
      {
        type: 'discrete',
        id: 'legend-discrete',
        orient: 'right',
        position: 'start',
        layoutType: 'normal',
        visible: true,
        maxCol: 1,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 321,
          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: 16,
          right: 0
        }
      }
    ],
    label: {
      visible: false,
      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)',
    scrollBar: [
      {
        orient: 'bottom',
        start: 0,
        auto: true,
        roam: true
      }
    ],
    animation: false,
    brush: {
      inBrush: {
        style: {
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        }
      },
      outOfBrush: {
        style: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    hash: '0664ad8a084f210c31b14466a9423d4b'
  };

  const spec2 = {
    type: 'bar',
    xField: ['230921215252017', '20001'],
    yField: ['10002'],
    direction: 'vertical',
    sortDataByAxis: true,
    seriesField: '20001',
    padding: 0,
    labelLayout: 'region',
    data: [
      {
        id: 'data',
        values: [
          {
            '10001': '销售额',
            '10002': '2447301.0141382217',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '2447301.0141382217',
            '230921215252017': '华北'
          },
          {
            '10001': '数量',
            '10002': '5146',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '5146',
            '230921215252017': '华北'
          },
          {
            '10001': '行 ID',
            '10002': '6939587',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '6939587',
            '230921215252017': '华北'
          },
          {
            '10001': '销售额',
            '10002': '4684506.442247391',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '4684506.442247391',
            '230921215252017': '华东'
          },
          {
            '10001': '数量',
            '10002': '11041',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '11041',
            '230921215252017': '华东'
          },
          {
            '10001': '行 ID',
            '10002': '14550225',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '14550225',
            '230921215252017': '华东'
          },
          {
            '10001': '销售额',
            '10002': '815039.5979347229',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '815039.5979347229',
            '230921215252017': '西北'
          },
          {
            '10001': '数量',
            '10002': '1785',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '1785',
            '230921215252017': '西北'
          },
          {
            '10001': '行 ID',
            '10002': '2368978',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '2368978',
            '230921215252017': '西北'
          },
          {
            '10001': '销售额',
            '10002': '2681567.4745378494',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '2681567.4745378494',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '数量',
            '10002': '6463',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '6463',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '行 ID',
            '10002': '8296805',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '8296805',
            '230921215252017': '地区-dongbei'
          },
          {
            '10001': '销售额',
            '10002': '1303124.5089645386',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '1303124.5089645386',
            '230921215252017': '西南'
          },
          {
            '10001': '数量',
            '10002': '3399',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '3399',
            '230921215252017': '西南'
          },
          {
            '10001': '行 ID',
            '10002': '4503658',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '4503658',
            '230921215252017': '西南'
          },
          {
            '10001': '销售额',
            '10002': '4137415.0951108932',
            '10003': '230921213740029',
            '20001': '销售额',
            '230921213740029': '4137415.0951108932',
            '230921215252017': '中南'
          },
          {
            '10001': '数量',
            '10002': '9700',
            '10003': '230921213740034',
            '20001': '数量',
            '230921213740034': '9700',
            '230921215252017': '中南'
          },
          {
            '10001': '行 ID',
            '10002': '13157091',
            '10003': '230921213740037',
            '20001': '行 ID',
            '230921213740037': '13157091',
            '230921215252017': '中南'
          }
        ],
        fields: {
          '10001': {
            alias: '指标名称 '
          },
          '10002': {
            alias: '指标值 '
          },
          '20001': {
            alias: '图例项 ',
            domain: ['销售额', '数量', '行 ID'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230921213740029': {
            alias: '销售额'
          },
          '230921213740034': {
            alias: '数量'
          },
          '230921213740037': {
            alias: '行 ID'
          },
          '230921215252017': {
            alias: '地区',
            domain: ['地区-dongbei', '华北', '华东', '西北', '西南', '中南'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          }
        }
      }
    ],
    axes: [
      {
        type: 'band',
        tick: {
          visible: false
        },
        grid: {
          visible: false,
          style: {
            zIndex: 150,
            stroke: '#DADCDD',
            lineWidth: 1,
            lineDash: [4, 2]
          }
        },
        orient: 'bottom',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: '#989999'
          }
        },
        title: {
          visible: false,
          space: 5,
          text: '地区',
          style: {
            fontSize: 12,
            fill: '#363839',
            fontWeight: 'normal'
          }
        },
        sampling: false,
        zIndex: 200,
        label: {
          visible: true,
          space: 4,
          style: {
            fontSize: 12,
            fill: '#6F6F6F',
            angle: 0,
            fontWeight: 'normal',
            direction: 'horizontal'
          },
          autoHide: true,
          autoHideMethod: 'greedy',
          flush: true
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        paddingInner: [0, 0.1],
        paddingOuter: [0, 0.25],
        bandSize: 160
      },
      {
        type: 'linear',
        tick: {
          visible: false,
          style: {
            stroke: 'rgba(255, 255, 255, 0)'
          }
        },
        niceType: 'accurateFirst',
        zIndex: 200,
        grid: {
          visible: true,
          style: {
            zIndex: 150,
            stroke: '#DADCDD',
            lineWidth: 1,
            lineDash: [4, 2]
          }
        },
        orient: 'left',
        visible: true,
        domainLine: {
          visible: true,
          style: {
            lineWidth: 1,
            stroke: 'rgba(255, 255, 255, 0)'
          }
        },
        title: {
          visible: false,
          text: '销售额',
          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: 'horizontal'
          },
          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'],
      specified: {},
      domain: ['销售额', '数量', '行 ID']
    },
    legends: [
      {
        type: 'discrete',
        id: 'legend-discrete',
        orient: 'right',
        position: 'start',
        layoutType: 'normal',
        visible: true,
        maxCol: 1,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 321,
          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: 16,
          right: 0
        }
      }
    ],
    label: {
      visible: false,
      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)',
    scrollBar: [
      {
        orient: 'bottom',
        start: 0,
        auto: true,
        roam: true
      }
    ],
    animation: false,
    brush: {
      inBrush: {
        style: {
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        }
      },
      outOfBrush: {
        style: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    hash: '0664ad8a084f210c31b14466a9423d4b'
  };

  const cs = new VChart(spec, {
    dataSet,
    dom: document.getElementById('chart') as HTMLElement,
    mode: isMobile ? 'mobile-browser' : 'desktop-browser'
  });
  console.time('renderTime');
  cs.renderAsync();

  setTimeout(() => {
    cs.updateSpec(spec2);
  }, 1000);

Current Behavior

image

Expected Behavior

image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@da730 da730 added the bug Something isn't working label Sep 21, 2023
@da730 da730 added the bp label Sep 21, 2023
@da730 da730 modified the milestones: v1.4.0, v1.4.1 Sep 21, 2023
@kkxxkk2019
Copy link
Collaborator

已经在最新的 develop 分支修复，1.4.0 正式发版之后就可以了

@kkxxkk2019 kkxxkk2019 added this to the v1.4.0 milestone Sep 22, 2023
kkxxkk2019 added a commit that referenced this issue Sep 22, 2023
@kkxxkk2019
fix: when call updateSpec, the prev scrollbar had not been clear, rel…
ee75a38 
…ate #1044
@kkxxkk2019 kkxxkk2019 mentioned this issue Sep 22, 2023
Merged
20 tasks
kkxxkk2019 added a commit that referenced this issue Sep 22, 2023
@kkxxkk2019
fix: when call updateSpec, the prev scrollbar had not been clear, rel…
fc662f0 
…ate #1044
@github-actions github-actions bot mentioned this issue Sep 25, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkxxkk2019 kkxxkk2019

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

Successfully merging a pull request may close this issue.

Fix/daily 09 22 VisActor/VChart
2 participants
@da730 @kkxxkk2019