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] updataSpec error in common chart #1062

Closed
da730 opened this issue Sep 22, 2023 · 1 comment · Fixed by #1065
Closed

[Bug] updataSpec error in common chart #1062

da730 opened this issue Sep 22, 2023 · 1 comment · Fixed by #1065
Assignees
@kkxxkk2019
Labels
bp bug Something isn't working

Comments

@da730
Copy link
Contributor

da730 commented Sep 22, 2023 •
edited by kkxxkk2019

Version

1.4.0

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
    type: 'common',
    series: [
      {
        id: 'mainSeries',
        type: 'bar',
        xField: ['230922161103013', '10001'],
        yField: '10011',
        zIndex: 200,
        seriesField: '20001',
        data: {
          id: 'mainSeriesData',
          values: [
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '4933854',
              '20001': '办公-行 ID',
              '230922161103013': '小型企业',
              '230922161103019': '4933854',
              '230922174525033': '办公'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '14721235',
              '20001': '办公-行 ID',
              '230922161103013': '消费者',
              '230922161103019': '14721235',
              '230922174525033': '办公'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '4905157',
              '20001': '技术-行 ID',
              '230922161103013': '消费者',
              '230922161103019': '4905157',
              '230922174525033': '技术'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '8795638',
              '20001': '办公-行 ID',
              '230922161103013': '公司',
              '230922161103019': '8795638',
              '230922174525033': '办公'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '5989411',
              '20001': '家具-行 ID',
              '230922161103013': '消费者',
              '230922161103019': '5989411',
              '230922174525033': '家具'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '2020565',
              '20001': '家具-行 ID',
              '230922161103013': '小型企业',
              '230922161103019': '2020565',
              '230922174525033': '家具'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '3247362',
              '20001': '技术-行 ID',
              '230922161103013': '公司',
              '230922161103019': '3247362',
              '230922174525033': '技术'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '3384905',
              '20001': '家具-行 ID',
              '230922161103013': '公司',
              '230922161103019': '3384905',
              '230922174525033': '家具'
            },
            {
              '10001': '行 ID',
              '10003': '230922161103019',
              '10011': '1818217',
              '20001': '技术-行 ID',
              '230922161103013': '小型企业',
              '230922161103019': '1818217',
              '230922174525033': '技术'
            }
          ],
          fields: {
            '10001': {
              alias: '指标名称 '
            },
            '10011': {
              alias: '指标值(主轴) '
            },
            '10012': {
              alias: '指标值(次轴) '
            },
            '20001': {
              alias: '图例项 ',
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣'],
              sortIndex: 0,
              lockStatisticsByDomain: true
            },
            '230922161103013': {
              alias: '细分',
              domain: ['公司', '消费者', '小型企业'],
              sortIndex: 0,
              lockStatisticsByDomain: true
            },
            '230922161103019': {
              alias: '行 ID'
            },
            '230922174525033': {
              alias: '类别'
            },
            '230922191548009': {
              alias: '折扣'
            }
          }
        },
        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: 400,
            fill: null,
            strokeOpacity: 1
          },
          position: 'inside',
          smartInvert: {
            fillStrategy: 'invertBase',
            strokeStrategy: 'similarBase'
          }
        },
        line: {
          style: {
            curveType: {
              type: 'ordinal',
              field: '20001',
              range: ['linear'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            lineWidth: {
              type: 'ordinal',
              field: '20001',
              range: [3],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            lineDash: {
              type: 'ordinal',
              field: '20001',
              range: [[0, 0]],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            }
          }
        },
        area: {
          style: {
            fillOpacity: 0.35
          },
          visible: true
        },
        point: {
          style: {
            shape: {
              type: 'ordinal',
              field: '20001',
              range: ['circle'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            size: {
              type: 'ordinal',
              field: '20001',
              range: [7.0898154036220635],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            stroke: {
              field: '20001',
              type: 'ordinal',
              range: ['#2E62F1', '#4DC36A', '#FF8406', '#FFCC00', '#4F44CF', '#5AC8FA'],
              specified: {},
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            strokeOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            fillOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            }
          },
          state: {
            hover: {
              lineWidth: 2,
              fillOpacity: 1,
              strokeOpacity: 1,
              scaleX: 1.5,
              scaleY: 1.5
            }
          }
        },
        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
            }
          }
        },
        invalidType: 'break',
        seriesMark: 'point',
        region: [
          {
            clip: true
          }
        ],
        background: 'rgba(255, 255, 255, 0)',
        animation: false
      },
      {
        id: 'subSeries',
        type: 'line',
        xField: '230922161103013',
        yField: '10012',
        zIndex: 300,
        seriesField: '20001',
        data: {
          id: 'subSeriesData',
          values: [
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '76.00000113248825',
              '20001': '办公-折扣',
              '230922161103013': '小型企业',
              '230922174525033': '办公',
              '230922191548009': '76.00000113248825'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '251.00000374019146',
              '20001': '办公-折扣',
              '230922161103013': '消费者',
              '230922174525033': '办公',
              '230922191548009': '251.00000374019146'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '128.4000019133091',
              '20001': '技术-折扣',
              '230922161103013': '消费者',
              '230922174525033': '技术',
              '230922191548009': '128.4000019133091'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '157.0000023394823',
              '20001': '办公-折扣',
              '230922161103013': '公司',
              '230922174525033': '办公',
              '230922191548009': '157.0000023394823'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '168.6500028371811',
              '20001': '家具-折扣',
              '230922161103013': '消费者',
              '230922174525033': '家具',
              '230922191548009': '168.6500028371811'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '59.750000946223736',
              '20001': '家具-折扣',
              '230922161103013': '小型企业',
              '230922174525033': '家具',
              '230922191548009': '59.750000946223736'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '84.80000126361847',
              '20001': '技术-折扣',
              '230922161103013': '公司',
              '230922174525033': '技术',
              '230922191548009': '84.80000126361847'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '96.70000156760216',
              '20001': '家具-折扣',
              '230922161103013': '公司',
              '230922174525033': '家具',
              '230922191548009': '96.70000156760216'
            },
            {
              '10001': '折扣',
              '10003': '230922191548009',
              '10012': '37.40000055730343',
              '20001': '技术-折扣',
              '230922161103013': '小型企业',
              '230922174525033': '技术',
              '230922191548009': '37.40000055730343'
            }
          ],
          fields: {
            '10001': {
              alias: '指标名称 '
            },
            '10011': {
              alias: '指标值(主轴) '
            },
            '10012': {
              alias: '指标值(次轴) '
            },
            '20001': {
              alias: '图例项 ',
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣'],
              sortIndex: 0,
              lockStatisticsByDomain: true
            },
            '230922161103013': {
              alias: '细分',
              domain: ['公司', '消费者', '小型企业'],
              sortIndex: 0,
              lockStatisticsByDomain: true
            },
            '230922161103019': {
              alias: '行 ID'
            },
            '230922174525033': {
              alias: '类别'
            },
            '230922191548009': {
              alias: '折扣'
            }
          }
        },
        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: 400,
            fill: null,
            strokeOpacity: 1
          },
          position: 'center',
          smartInvert: {
            fillStrategy: 'invertBase',
            strokeStrategy: 'similarBase'
          }
        },
        line: {
          style: {
            curveType: {
              type: 'ordinal',
              field: '20001',
              range: ['linear'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            lineWidth: {
              type: 'ordinal',
              field: '20001',
              range: [3],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            lineDash: {
              type: 'ordinal',
              field: '20001',
              range: [[0, 0]],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            }
          }
        },
        area: {
          style: {
            fillOpacity: 0.35
          },
          visible: true
        },
        point: {
          style: {
            shape: {
              type: 'ordinal',
              field: '20001',
              range: ['circle'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            size: {
              type: 'ordinal',
              field: '20001',
              range: [7.0898154036220635],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            stroke: {
              field: '20001',
              type: 'ordinal',
              range: ['#2E62F1', '#4DC36A', '#FF8406', '#FFCC00', '#4F44CF', '#5AC8FA'],
              specified: {},
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            strokeOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            },
            fillOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣']
            }
          },
          state: {
            hover: {
              lineWidth: 2,
              fillOpacity: 1,
              strokeOpacity: 1,
              scaleX: 1.5,
              scaleY: 1.5
            }
          }
        },
        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
            }
          }
        },
        invalidType: 'break',
        seriesMark: 'point',
        region: [
          {
            clip: true
          }
        ],
        background: 'rgba(255, 255, 255, 0)',
        animation: false
      }
    ],
    padding: 0,
    labelLayout: 'region',
    data: [
      {
        id: 'data',
        values: [
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '4933854',
            '20001': '办公-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '4933854',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '14721235',
            '20001': '办公-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '14721235',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '4905157',
            '20001': '技术-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '4905157',
            '230922174525033': '技术'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '8795638',
            '20001': '办公-行 ID',
            '230922161103013': '公司',
            '230922161103019': '8795638',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '5989411',
            '20001': '家具-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '5989411',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '2020565',
            '20001': '家具-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '2020565',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '3247362',
            '20001': '技术-行 ID',
            '230922161103013': '公司',
            '230922161103019': '3247362',
            '230922174525033': '技术'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '3384905',
            '20001': '家具-行 ID',
            '230922161103013': '公司',
            '230922161103019': '3384905',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '1818217',
            '20001': '技术-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '1818217',
            '230922174525033': '技术'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '76.00000113248825',
            '20001': '办公-折扣',
            '230922161103013': '小型企业',
            '230922174525033': '办公',
            '230922191548009': '76.00000113248825'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '251.00000374019146',
            '20001': '办公-折扣',
            '230922161103013': '消费者',
            '230922174525033': '办公',
            '230922191548009': '251.00000374019146'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '128.4000019133091',
            '20001': '技术-折扣',
            '230922161103013': '消费者',
            '230922174525033': '技术',
            '230922191548009': '128.4000019133091'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '157.0000023394823',
            '20001': '办公-折扣',
            '230922161103013': '公司',
            '230922174525033': '办公',
            '230922191548009': '157.0000023394823'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '168.6500028371811',
            '20001': '家具-折扣',
            '230922161103013': '消费者',
            '230922174525033': '家具',
            '230922191548009': '168.6500028371811'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '59.750000946223736',
            '20001': '家具-折扣',
            '230922161103013': '小型企业',
            '230922174525033': '家具',
            '230922191548009': '59.750000946223736'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '84.80000126361847',
            '20001': '技术-折扣',
            '230922161103013': '公司',
            '230922174525033': '技术',
            '230922191548009': '84.80000126361847'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '96.70000156760216',
            '20001': '家具-折扣',
            '230922161103013': '公司',
            '230922174525033': '家具',
            '230922191548009': '96.70000156760216'
          },
          {
            '10001': '折扣',
            '10003': '230922191548009',
            '10012': '37.40000055730343',
            '20001': '技术-折扣',
            '230922161103013': '小型企业',
            '230922174525033': '技术',
            '230922191548009': '37.40000055730343'
          }
        ],
        fields: {
          '10001': {
            alias: '指标名称 '
          },
          '10011': {
            alias: '指标值(主轴) '
          },
          '10012': {
            alias: '指标值(次轴) '
          },
          '20001': {
            alias: '图例项 ',
            domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID', '办公-折扣', '技术-折扣', '家具-折扣'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230922161103013': {
            alias: '细分',
            domain: ['公司', '消费者', '小型企业'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230922161103019': {
            alias: '行 ID'
          },
          '230922174525033': {
            alias: '类别'
          },
          '230922191548009': {
            alias: '折扣'
          }
        }
      }
    ],
    axes: [
      {
        id: 'dimensionAxis',
        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.15, 0.1],
        paddingOuter: [0.075, 0.1]
      },
      {
        id: 'measureAxisLeft',
        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: '行 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: 'horizontal'
          },
          autoHide: true,
          autoHideMethod: 'greedy'
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        zero: true,
        nice: true,
        seriesId: 'mainSeries'
      },
      {
        id: 'measureAxisRight',
        type: 'linear',
        tick: {
          visible: false,
          style: {
            stroke: 'rgba(255, 255, 255, 0)'
          }
        },
        niceType: 'accurateFirst',
        zIndex: 200,
        grid: {
          visible: false,
          style: {
            zIndex: 150,
            stroke: '#DADCDD',
            lineWidth: 1,
            lineDash: [4, 2]
          }
        },
        orient: 'right',
        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,
        seriesId: 'subSeries',
        sync: {
          axisId: 'measureAxisLeft',
          zeroAlign: true
        }
      }
    ],
    seriesField: '20001',
    color: {
      field: '20001',
      type: 'ordinal',
      range: ['#2E62F1', '#4DC36A', '#FF8406', '#FFCC00', '#4F44CF', '#5AC8FA'],
      specified: {},
      domain: ['办公-行 ID', '技术-行 ID', '家具-行 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: 386,
          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
        }
      }
    ],
    tooltip: {
      handler: {}
    },
    crosshair: {
      xField: {
        visible: true
      },
      gridZIndex: 100
    },
    brush: {
      inBrush: {
        style: {
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        }
      },
      outOfBrush: {
        style: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    hash: '417c6da1d3a72345f824723464fa6c8c'
  };
  const spec2 = {
    type: 'common',
    series: [
      {
        id: 'mainSeries',
        type: 'bar',
        xField: ['230922161103013', '10001'],
        yField: '10011',
        zIndex: 200,
        seriesField: '20001',
        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: 400,
            fill: null,
            strokeOpacity: 1
          },
          position: 'inside',
          smartInvert: {
            fillStrategy: 'invertBase',
            strokeStrategy: 'similarBase'
          }
        },
        line: {
          style: {
            curveType: {
              type: 'ordinal',
              field: '20001',
              range: ['linear'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            lineWidth: {
              type: 'ordinal',
              field: '20001',
              range: [3],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            lineDash: {
              type: 'ordinal',
              field: '20001',
              range: [[0, 0]],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            }
          }
        },
        area: {
          style: {
            fillOpacity: 0.35
          },
          visible: true
        },
        point: {
          style: {
            shape: {
              type: 'ordinal',
              field: '20001',
              range: ['circle'],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            size: {
              type: 'ordinal',
              field: '20001',
              range: [7.0898154036220635],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            stroke: {
              field: '20001',
              type: 'ordinal',
              range: ['#2E62F1', '#4DC36A', '#FF8406'],
              specified: {},
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            strokeOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            },
            fillOpacity: {
              type: 'ordinal',
              field: '20001',
              range: [1],
              domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID']
            }
          },
          state: {
            hover: {
              lineWidth: 2,
              fillOpacity: 1,
              strokeOpacity: 1,
              scaleX: 1.5,
              scaleY: 1.5
            }
          }
        },
        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
            }
          }
        },
        invalidType: 'break',
        seriesMark: 'point',
        region: [
          {
            clip: true
          }
        ],
        background: 'rgba(255, 255, 255, 0)',
        animation: false
      }
    ],
    padding: 0,
    labelLayout: 'region',
    data: [
      {
        id: 'data',
        values: [
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '4933854',
            '20001': '办公-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '4933854',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '14721235',
            '20001': '办公-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '14721235',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '4905157',
            '20001': '技术-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '4905157',
            '230922174525033': '技术'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '8795638',
            '20001': '办公-行 ID',
            '230922161103013': '公司',
            '230922161103019': '8795638',
            '230922174525033': '办公'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '5989411',
            '20001': '家具-行 ID',
            '230922161103013': '消费者',
            '230922161103019': '5989411',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '2020565',
            '20001': '家具-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '2020565',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '3247362',
            '20001': '技术-行 ID',
            '230922161103013': '公司',
            '230922161103019': '3247362',
            '230922174525033': '技术'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '3384905',
            '20001': '家具-行 ID',
            '230922161103013': '公司',
            '230922161103019': '3384905',
            '230922174525033': '家具'
          },
          {
            '10001': '行 ID',
            '10003': '230922161103019',
            '10011': '1818217',
            '20001': '技术-行 ID',
            '230922161103013': '小型企业',
            '230922161103019': '1818217',
            '230922174525033': '技术'
          }
        ],
        fields: {
          '10001': {
            alias: '指标名称 '
          },
          '10011': {
            alias: '指标值(主轴) '
          },
          '20001': {
            alias: '图例项 ',
            domain: ['办公-行 ID', '技术-行 ID', '家具-行 ID'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230922161103013': {
            alias: '细分',
            domain: ['公司', '消费者', '小型企业'],
            sortIndex: 0,
            lockStatisticsByDomain: true
          },
          '230922161103019': {
            alias: '行 ID'
          },
          '230922174525033': {
            alias: '类别'
          }
        }
      }
    ],
    axes: [
      {
        id: 'dimensionAxis',
        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.15, 0.1],
        paddingOuter: [0.075, 0.1]
      },
      {
        id: 'measureAxisLeft',
        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: '行 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: 'horizontal'
          },
          autoHide: true,
          autoHideMethod: 'greedy'
        },
        hover: true,
        background: {
          visible: true,
          state: {
            hover: {
              fillOpacity: 0.08,
              fill: '#141414'
            }
          }
        },
        zero: true,
        nice: true,
        seriesId: 'mainSeries'
      }
    ],
    seriesField: '20001',
    color: {
      field: '20001',
      type: 'ordinal',
      range: ['#2E62F1', '#4DC36A', '#FF8406'],
      specified: {},
      domain: ['办公-行 ID', '技术-行 ID', '家具-行 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: 386,
          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
        }
      }
    ],
    tooltip: {
      handler: {}
    },
    crosshair: {
      xField: {
        visible: true
      },
      gridZIndex: 100
    },
    brush: {
      inBrush: {
        style: {
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1
        }
      },
      outOfBrush: {
        style: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      }
    },
    hash: 'bff3019df0c51d07a34ee1c1432bbd53'
  };
  const cs = new VChart(spec, {
    dataSet,
    dom: document.getElementById('chart') as HTMLElement,
    mode: isMobile ? 'mobile-browser' : 'desktop-browser'
  });
  console.time('renderTime');
  cs.renderAsync().then(() => {
    console.timeEnd('renderTime');
  });

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

Current Behavior

image

Expected Behavior

update normally

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@da730 da730 added the bug Something isn't working label Sep 22, 2023
@da730 da730 added the bp label Sep 22, 2023
@kkxxkk2019 kkxxkk2019 assigned skie1997 and unassigned kkxxkk2019 Sep 25, 2023
@kkxxkk2019
Copy link
Collaborator

哦哦，应该是报错引起的

@kkxxkk2019 kkxxkk2019 assigned kkxxkk2019 and unassigned skie1997 Sep 25, 2023
@kkxxkk2019 kkxxkk2019 mentioned this issue Sep 25, 2023
Merged
20 tasks
@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
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/normal inline layout VisActor/VChart
3 participants
@da730 @skie1997 @kkxxkk2019