开启.style('gradient', 'color')之后slider拖动报错,例子如下

[ChristmasFox]

/**
A recreation of this demo: https://observablehq.com/@d3/bar-chart
*/
import { Chart } from '@antv/g2';
// 数据准备
const data = [
  {
    area: '东北',
    province: '吉林',
    customer: '何先生',
    value: 10000,
    value2: 60000,
  },
  {
    area: '东北',
    province: '辽宁',
    customer: '方先生',
    value: 10000,
    value2: 60000,
  },
  { area: '', province: '辽宁', customer: '方先生', value: null, value2: null },
  {
    area: '华东',
    province: '上海',
    customer: '林小姐',
    value: 10000,
    value2: 10000,
  },
  {
    area: '华东',
    province: '山东',
    customer: '陈先生',
    value: 40000,
    value2: 160000,
  },
  {
    area: '华东',
    province: '江苏',
    customer: '王先生',
    value: 10000,
    value2: 50000,
  },
  {
    area: '华东',
    province: '江西',
    customer: '成先生',
    value: 10000,
    value2: 30000,
  },
  {
    area: '华东',
    province: '浙江',
    customer: '梁女士',
    value: 10000,
    value2: 40000,
  },
  { area: '', province: '浙江', customer: '方先生', value: null, value2: null },
  {
    area: '西南',
    province: '云南',
    customer: '锤小姐',
    value: 10000,
    value2: 50000,
  },
  {
    area: '西南',
    province: '四川',
    customer: '谢小姐',
    value: 20000,
    value2: 70000,
  },
  {
    area: '西南',
    province: '重庆',
    customer: '陈先生',
    value: 30000,
    value2: 60000,
  },
];

// 分类轴
const xAxis = [
  [
    { name: '吉林' },
    { name: '辽宁' },
    { name: '' },
    { name: '上海' },
    { name: '山东' },
    { name: '江苏' },
    { name: '江西' },
    { name: '浙江' },
    { name: '' },
    { name: '云南' },
    { name: '四川' },
    { name: '重庆' },
  ],
  [
    { name: '', flag: 0 },
    { name: '东北' },
    { name: '' },

    { name: '', flag: 0 },
    { name: '' },
    { name: '华东' },
    { name: '' },
    { name: '' },
    { name: '' },

    { name: '', flag: 0 },
    { name: '西南' },
    { name: '' },
  ],
];

const ids = [];
data.forEach((x) => {
  // 假id用于当横坐标
  x.id = 'area:' + x.area + 'province:' + x.province;
  x.colorId = 'area:' + x.area;
  ids.push(x.id);
});
let newIdArr = [...new Set(ids)];
console.log(newIdArr);

function doXAxis(chart, xAxis, newIdArr) {
  xAxis.forEach((data, deep) => {
    const lineArr = [];
    data.forEach((x, idx) => {
      if (deep > 0 && x.flag === 0 && idx !== 0) {
        if (deep === xAxis.length - 1 || xAxis[deep + 1][idx].flag !== 0) {
          lineArr.push(newIdArr[idx - 1]);
        }
      }
    });
    if (lineArr.length) {
      let scaleHeight = 0.1 * deep + 1;
      chart
        .lineX()
        .data(lineArr)
        .style({
          stroke: '#54545',
        })
        .slider('x', {
          // position: commData.isChangeXY ? 'right' : 'bottom',
          values: [0, 0.1],
          formatter: () => '',
        })
        .style('transformOrigin', 'top top')
        .style('transform', 'scale(1, ' + scaleHeight + ')');
      // .slider('x',{
      // values:[0,0.3]
      // })
    }
  });
}

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart
  .line()
  .data(data)
  .encode('x', 'id')
  .encode('y', 'value')
  .encode('color', 'value2')
  .encode('series', 'area')
  .transform({ type: 'groupX' })
  .style('gradient', 'color') // 这一行注释掉 缩略轴正常
  .style('lineWidth', 2)
  .axis('x', [
    {
      title: '',
      position: 'bottom',
      // position: 'left',
      labelAutoHide: true,
      line: {},
      labelFormatter: (value, index) => {
        const step = newIdArr.indexOf(value);
        return xAxis[0][step]?.name || '';
      },
    },
    {
      title: '',
      tick: false,
      position: 'bottom',
      // position: 'left',
      labelFormatter: (value, index) => {
        const step = newIdArr.indexOf(value);
        return xAxis[1][step]?.name || '';
      },
    },
  ])
  .axis('y', [
    {
      position: 'left',
      line: {},
      tickCount: 5,
      lineExtension: [0, 100],
    },
  ])
  .scale('color', {
    type: 'linear',
    unknown: '#fff',
  })
  .slider('x', {
    values: [0, 0.1],
    formatter: () => '',
  });

doXAxis(chart, xAxis, newIdArr);

chart.render();

[pearmini]

这个应该是数据有空值导致的