如何通过Spec的方式声明多个View？

[d18zj]

问题描述

我想通过Spec声明的方式实现如下的效果(同时有线+点)：
在官网的DEMO中是可以运行的：

但是在sandbox中运行失败：
或者采用以下代码也运行失败;

    const data = [
        { month: 'Jan', city: 'Tokyo', temperature: 7 },
        { month: 'Jan', city: 'London', temperature: 3.9 },
        { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
        { month: 'Feb', city: 'London', temperature: 4.2 },
        { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
        { month: 'Mar', city: 'London', temperature: 5.7 },
        { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
        { month: 'Apr', city: 'London', temperature: 8.5 },
        { month: 'May', city: 'Tokyo', temperature: 18.4 },
        { month: 'May', city: 'London', temperature: 11.9 },
        { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
        { month: 'Jun', city: 'London', temperature: 15.2 },
        { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
        { month: 'Jul', city: 'London', temperature: 17 },
        { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
        { month: 'Aug', city: 'London', temperature: 16.6 },
        { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
        { month: 'Sep', city: 'London', temperature: 14.2 },
        { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
        { month: 'Oct', city: 'London', temperature: 10.3 },
        { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
        { month: 'Nov', city: 'London', temperature: 6.6 },
        { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
        { month: 'Dec', city: 'London', temperature: 4.8 },
      ];
      
      const chart = new G2.Chart({
        container: 'testChart12',
        autoFit: true,
      });
      
      chart.options({
       
        data:data,
        encode: {
          x: 'month',
          y: 'temperature',
          color: 'city',
         
        },
        children: [{
          type: 'view',
          children: [
            { type: 'line', encode:{shape: 'smooth'} },
            {
              type: 'point',
             
              style: {
                fill: 'white'
              }
            }],
        }]
      });
      
      chart.render();

重现链接

https://codesandbox.io/p/sandbox/wizardly-kowalevski-prmw4d

重现步骤

console报错：

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[d18zj]

我知道我的问题了,正确的代码应该是这样

chart.options({
        type: 'view',
        data:data,
        encode: {
          x: 'month',
          y: 'temperature',
          color: 'city',
         
        },
        children: [
             { type: 'line', encode:{shape: 'smooth'} },
            {
              type: 'point',
               style: {
                fill: 'white'
              }
            },
        ]
      });

但上面错误的代码，在官网的DEMO中确实可以运行😂

[pearmini]

但上面错误的代码，在官网的DEMO中确实可以运行😂

官网 demo 应该做了一些特殊处理，可以先忽略就好。