想请教一下面积折线图通过一个字段设置color通道后，当存在某一个点只有一个数据，在该节点后面积图不渲染，控制台有报错是什么原因 #5160

贵州省仅有一个数据时，后面有连线的没有绘制面积图 控制台报错空对象 Demo

import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });

const data = [
{province: "山东省", city: "烟台市", goods_categories: "日用品", gross: 1096.78},
{province: "山东省", city: "青岛市", goods_categories: "日用品", gross: 2611.35},
{province: "山东省", city: "青岛市", goods_categories: "零食", gross: 2285.76},
{province: "山东省", city: "济南市", goods_categories: "零食", gross: 2109.18},
{province: "山东省", city: "济南市", goods_categories: "日用品", gross: 198.95},
{province: "山东省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "安徽省", city: "淮南市", goods_categories: "日用品", gross: 369.25},
{province: "安徽省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "黑龙江省", city: "牡丹江市", goods_categories: "零食", gross: 3128.09},
{province: "黑龙江省", city: "牡丹江市", goods_categories: "日用品", gross: 435.89},
{province: "黑龙江省", city: "鹤岗市", goods_categories: "零食", gross: 3549.17},
{province: "黑龙江省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "湖北省", city: "武汉市", goods_categories: "生鲜", gross: 3460.77},
{province: "湖北省", city: "武汉市", goods_categories: "日用品", gross: 6219.87},
{province: "湖北省", city: "武汉市", goods_categories: "零食", gross: 5003.3},
{province: "湖北省", city: "武汉市", goods_categories: "饮料", gross: 1780.84},
{province: "湖北省", city: "宜昌市", goods_categories: "生鲜", gross: 284.38},
{province: "湖北省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "山西省", city: "晋城市", goods_categories: "日用品", gross: 305.13},
{province: "山西省", city: "临汾市", goods_categories: "日用品", gross: 4546.33},
{province: "山西省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "贵州省", city: "贵阳市", goods_categories: "生鲜", gross: 1617.42},
{province: "贵州省", city: "@#&", goods_categories: "日用品", gross: null},
{province: "云南省", city: "丽江市", goods_categories: "零食", gross: 2610.5},
{province: "云南省", city: "保山市", goods_categories: "日用品", gross: 1671.64},
{province: "云南省", city: "保山市", goods_categories: "零食", gross: 417.23},
{province: "云南省", city: "保山市", goods_categories: "生鲜", gross: 7837.26}
]
// 分类轴
const xAxis = [
  [
    {name: '烟台市'},
    {name: '青岛市'},
    {name: '济南市'},
    {name:''},
    {name: '淮南市'},
    {name:''},
    {name: '牡丹江市'},
    {name: '鹤岗市'},
    {name: ''},
    {name: '武汉市'},
    {name: '宜昌市'},
    {name:''},
    {name:'晋城市'},
    {name:'临汾市'},
    {name:''},
    {name:'贵阳市'},
    {name:''},
    {name:'丽江市'},
    {name:'保山市'},
  ],
  [
    {name: '', flag: 0},
    {name: '山东省'},
    {name: ''},
    {name: ''},
    {name: '安徽省', flag: 0},
    {name: ''},
    {name: '',flag: 0},
    {name: '黑龙江省'},
    {name: ''},
    {name: '',flag: 0},
    {name: '湖北省'},
    {name: ''},
    {name: '', flag: 0},
    {name: '山西省'},
    {name: ''},
    {name: '贵州省', flag: 0},
    {name: '', flag: 0},
    {name: '云南省'},
    {name: ''},
  ]
]
const ids = []
const colorIds = [];
data.forEach(x => {
  x.id = `city:${x.city}+province:${x.province}`
  x.colorId = `province:${x.province}+goods_categories:${x.goods_categories}`
  ids.push(x.id)
  colorIds.push(x.colorId)
})
let newIdArr = [...new Set(ids)]
const map = {
  '日用品':'red',
  '生鲜':'pink',
  '零食':'green',
  '饮料':'yellow',
  '调料':'black',
}
function getColorMap(){

  const keys = Object.keys(map);
  let domain = colorIds;
  let colors = [];
  colorIds.forEach(item => {
    let mapName  =  item.substring(item.lastIndexOf(':') + 1);
    colors.push(map[mapName])
  })
  return colors
}



chart.options({
  type: "view",
  theme: "classic",
  autoFit: true,
  padding: 80,
  children: [
    {
      type: 'point',
      width: 900,
      data: data,
      scale:{
        color:{
          independent:true,
          domain:Object.keys(map),
          range:Object.values(map),
        }
      },
      legend:{
        // color:false,
      },
      encode: {
        x: 'id',
        y: 'gross',
        shape: 'point',
        color: 'goods_categories',
      },
      style:{
        connect:true
      }
    },

    {
      type: 'line',
      width: 900,
      data: data,
      scale: {
        color: { palette: 'warm' },
      },
      encode: {
        x: 'id',
        y: 'gross',
        color: 'colorId',
        shape: 'smooth',

      },
      scale:{
        color:{
          independent:true,
          domain:colorIds,
          range:getColorMap(),
        }
      },
      legend:{
        color:false,
      },
      transform: [
        {type:'groupX'}
      ],
      style: {
        lineWidth: 2
      }
    },
    {
      type: 'area',
      width: 900,
      data: data,
      // scale: {
      //   color: { palette: 'warm', },
      // },
      encode: {
        x: 'id',
        y: 'gross',
        shape: 'smooth',
        color: 'colorId',
      },
      style: {
        gradient: 'x',
        connect:false
      },
      axis: {
        x: [
          {
            title: "",
            position: "bottom",
            labelAutoHide: true,
            line: {},
            labelFormatter: (value, index) => {
              const step = newIdArr.indexOf(value)
                return xAxis[0][step]?.name || ''
            },
            grid:true,
            gridFilter:(dataum) => {
              if(dataum.label== ""){
                return true
              }
            },
            style:{
              gridLineWidth:2,
            },
            tickLength:(dataum) => {
              if(dataum.label == ""){
                return 90
              }
              return 0
            }
          },
          {
            title: "",
            tick: false,
            position: "bottom",
            labelFormatter: (value, index) => {
              const step = newIdArr.indexOf(value)
              return xAxis[1][step]?.name || ''
            },
          },
        ],
      },
      scale:{
        color:{
          independent:true,
          domain:colorIds,
          range:getColorMap(),
        }
      },
      legend:{
        color:false,
      },
    },

  ]
});

chart.render();