[Bug] 媒体查询报错

[skie1997]

Version

1.13.0

Link to Minimal Reproduction

lark card

Steps to Reproduce

画布大小: 230 * 170

VCHART_MODULE.registerMediaQuery();

const spec = {
  "yField": "value",
  "xField": "name",
  "theme": {
    "colorScheme": {
      "default": [
        {
          "scheme": [
            "#4169E1",
            "#FF8C00"
          ]
        }
      ]
    },
    "component": {
      "axis": {
        "label": {
          "style": {
            "fontSize": 11,
            "fill": "#646a73",
            "fontWeight": "normal",
            "fillOpacity": 1
          },
          "space": 0,
          "visible": true
        },
        "domainLine": {
          "visible": true,
          "style": {
            "lineWidth": 1,
            "stroke": "#dee0e3",
            "strokeOpacity": 1
          }
        },
        "grid": {
          "visible": true,
          "style": {
            "lineWidth": 1,
            "stroke": "#dee0e3",
            "strokeOpacity": 1,
            "lineDash": [
              4,
              4
            ]
          }
        },
        "tick": {
          "visible": false,
          "tickSize": 4,
          "style": {
            "lineWidth": 1,
            "stroke": "#dee0e3",
            "strokeOpacity": 1
          }
        },
        "title": {
          "space": 8,
          "style": {
            "fontSize": 12,
            "fill": "#333333",
            "fontWeight": "normal",
            "fillOpacity": 1
          }
        }
      },
      "discreteLegend": {
        "item": {
          "label": {
            "style": {
              "fontSize": 11,
              "size": 11,
              "fontWeight": "normal",
              "fontStyle": "normal",
              "fill": "rgba(46, 47, 50, 0.8)",
              "maxLineWidth": 400
            },
            "state": {
              "selected": {
                "fillOpacity": 1
              },
              "unSelected": {
                "fillOpacity": 0.9
              },
              "selectedHover": {
                "fillOpacity": 0.7,
                "fill": "#1f2329"
              },
              "unSelectedHover": {
                "fillOpacity": 0.65
              }
            }
          },
          "visible": true,
          "spaceCol": 8,
          "spaceRow": 8,
          "padding": {
            "left": 4,
            "right": 22,
            "top": 4,
            "bottom": 4
          },
          "background": {
            "visible": true,
            "state": {
              "selected": {
                "fill": "#fff",
                "fillOpacity": 0
              },
              "unSelected": {
                "fill": "#fff",
                "fillOpacity": 0
              },
              "selectedHover": {
                "fill": "#141414",
                "fillOpacity": 0.08
              },
              "unSelectedHover": {
                "fill": "#141414",
                "fillOpacity": 0.08
              }
            }
          },
          "shape": {
            "space": 4,
            "style": {
              "size": 8
            }
          }
        },
        "pager": {
          "textStyle": {
            "fontSize": 11,
            "fill": "#000",
            "lineHeight": 14
          },
          "padding": {
            "left": 8,
            "right": 8,
            "top": 8,
            "bottom": 0
          },
          "handler": {
            "style": {
              "size": 8
            }
          }
        },
        "maxRow": 1,
        "autoPage": true,
        "padding": {
          "bottom": 0,
          "left": 12,
          "right": 12,
          "top": 16
        },
        "maxLengthOnLeftRight": 214,
        "orient": "bottom",
        "title": {
          "style": {
            "fontSize": 12,
            "fontWeight": "normal",
            "fill": "rgba(46, 47, 50, 1)"
          }
        }
      },
      "title": {
        "textStyle": {
          "fontSize": 14,
          "fill": "#333",
          "fontWeight": "bold"
        },
        "subtextStyle": {
          "fontSize": 12,
          "fill": "#6F6F6F",
          "fontWeight": "normal"
        }
      },
      "indicator": {
        "title": {
          "autoLimit": true,
          "autoFit": true
        },
        "content": {
          "autoLimit": true,
          "autoFit": true
        }
      },
      "axisY": {
        "label": {
          "space": 10,
          "autoLimit": true
        },
        "domainLine": {
          "visible": false
        },
        "tick": {
          "visible": false,
          "tickSize": 0
        }
      },
      "axisX": {
        "sampling": false,
        "label": {
          "autoRotate": true,
          "autoHide": true,
          "autoLimit": true
        }
      },
      "tooltip": {
        "panel": {
          "border": {
            "width": 1,
            "radius": 3,
            "color": "#DEE0E3"
          },
          "shadow": {
            "color": "rgba(0, 0, 0, 0)",
            "x": 0,
            "y": 4,
            "blur": 12,
            "spread": 0
          },
          "padding": {
            "top": 10,
            "left": 10,
            "right": 10,
            "bottom": 10
          },
          "backgroundColor": "#ffffff"
        },
        "spaceRow": 6,
        "maxWidth": 400,
        "titleLabel": {
          "fontSize": 14,
          "fontColor": "#333",
          "lineHeight": 20,
          "textAlign": "left"
        },
        "offset": {
          "x": 10,
          "y": 10
        },
        "shape": {
          "size": 7
        },
        "keyLabel": {
          "fontSize": 14,
          "fontColor": "#646a73",
          "lineHeight": 18,
          "textAlign": "left",
          "spacing": 12
        },
        "valueLabel": {
          "fontSize": 14,
          "fontColor": "#333333",
          "lineHeight": 18,
          "textAlign": "left",
          "fontWeight": "bold"
        }
      },
      "crosshair": {
        "xField": {
          "label": {
            "labelBackground": {
              "style": {
                "fill": "#455165",
                "outerBorder": {
                  "stroke": "#455165"
                },
                "cornerRadius": 4
              }
            },
            "visible": true,
            "style": {
              "fill": "#fff",
              "fontSize": 14
            }
          },
          "visible": false,
          "line": {
            "type": "rect",
            "visible": true,
            "style": {
              "fill": "#F2F3F5",
              "opacity": 0.6
            }
          }
        },
        "yField": {
          "label": {
            "labelBackground": {
              "style": {
                "fill": "#455165",
                "outerBorder": {
                  "stroke": "#455165"
                },
                "cornerRadius": 4
              }
            },
            "visible": true,
            "style": {
              "fill": "#fff",
              "fontSize": 14
            }
          },
          "visible": false,
          "line": {
            "type": "line",
            "visible": true,
            "style": {
              "fill": "#F2F3F5",
              "opacity": 0.6
            }
          }
        },
        "categoryField": {
          "label": {
            "labelBackground": {
              "style": {
                "fill": "#455165",
                "outerBorder": {
                  "stroke": "#455165"
                },
                "cornerRadius": 4
              }
            },
            "visible": true,
            "style": {
              "fill": "#fff",
              "fontSize": 14
            }
          },
          "visible": false,
          "line": {
            "type": "line",
            "visible": true,
            "style": {
              "stroke": "rgba(47, 59, 82, 0.9)",
              "opacity": 0.2
            }
          }
        },
        "valueField": {
          "label": {
            "labelBackground": {
              "style": {
                "fill": "#455165",
                "outerBorder": {
                  "stroke": "#455165"
                },
                "cornerRadius": 4
              }
            },
            "visible": true,
            "style": {
              "fill": "#fff",
              "fontSize": 14
            }
          },
          "visible": false,
          "line": {
            "type": "line",
            "visible": true,
            "style": {
              "stroke": "rgba(47, 59, 82, 0.9)",
              "opacity": 0.2
            }
          }
        }
      },
      "colorLegend": {
        "horizontal": {
          "padding": {
            "left": 0,
            "right": 24,
            "top": 18,
            "bottom": 18
          },
          "title": {
            "visible": false,
            "padding": 0,
            "textStyle": {
              "fontSize": 12,
              "fontWeight": "normal",
              "fill": "rgba(46, 47, 50, 1)"
            },
            "space": 12
          },
          "handlerText": {
            "style": {
              "fontSize": 12
            }
          },
          "rail": {
            "width": 200,
            "height": 8,
            "style": {
              "fill": "rgba(0,0,0,0.04)"
            }
          }
        },
        "vertical": {
          "padding": {
            "left": 0,
            "right": 24,
            "top": 18,
            "bottom": 18
          },
          "title": {
            "visible": false,
            "padding": 0,
            "textStyle": {
              "fontSize": 12,
              "fontWeight": "normal",
              "fill": "rgba(46, 47, 50, 1)"
            },
            "space": 12
          },
          "handlerText": {
            "style": {
              "fontSize": 12
            }
          },
          "rail": {
            "width": 200,
            "height": 8,
            "style": {
              "fill": "rgba(0,0,0,0.04)"
            }
          }
        }
      },
      "sizeLegend": {
        "horizontal": {
          "rail": {
            "width": 200,
            "height": 12,
            "style": {
              "fill": "rgba(0,0,0,0.04)"
            }
          },
          "padding": {
            "left": 0,
            "right": 24,
            "top": 18,
            "bottom": 18
          },
          "title": {
            "visible": false,
            "padding": 0,
            "textStyle": {
              "fontSize": 12,
              "fontWeight": "normal",
              "fill": "rgba(46, 47, 50, 1)"
            },
            "space": 12
          },
          "handler": {
            "visible": true
          },
          "startText": {
            "style": {
              "fontSize": 12
            }
          },
          "endText": {
            "style": {
              "fontSize": 12
            }
          },
          "handlerText": {
            "style": {
              "fontSize": 12
            }
          }
        },
        "vertical": {
          "rail": {
            "width": 12,
            "height": 200,
            "style": {
              "fill": "rgba(0,0,0,0.04)"
            }
          },
          "padding": {
            "left": 0,
            "right": 24,
            "top": 18,
            "bottom": 18
          },
          "title": {
            "visible": false,
            "padding": 0,
            "textStyle": {
              "fontSize": 12,
              "fontWeight": "normal",
              "fill": "rgba(46, 47, 50, 1)"
            },
            "space": 12
          },
          "handler": {
            "visible": true
          },
          "startText": {
            "style": {
              "fontSize": 12
            }
          },
          "endText": {
            "style": {
              "fontSize": 12
            }
          },
          "handlerText": {
            "style": {
              "fontSize": 12
            }
          }
        }
      },
      "dataZoom": {
        "showDetail": "auto",
        "middleHandler": {
          "visible": false,
          "background": {
            "size": 5,
            "style": {
              "stroke": "#D1D5DA",
              "cornerRadius": 2
            }
          },
          "icon": {
            "style": {
              "size": 8,
              "fill": "white",
              "stroke": "#D1D5DA",
              "symbolType": "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
              "lineWidth": 0.5
            }
          }
        },
        "background": {
          "size": 28,
          "style": {
            "fill": "#e6e8eb",
            "lineWidth": 0
          }
        },
        "startHandler": {
          "style": {
            "stroke": "#7F899B"
          }
        },
        "endHandler": {
          "style": {
            "stroke": "#7F899B"
          }
        },
        "startText": {
          "padding": 8,
          "style": {
            "fontSize": 10,
            "fill": "#6F6F6F"
          }
        },
        "endText": {
          "padding": 8,
          "style": {
            "fontSize": 10,
            "fill": "#6F6F6F"
          }
        },
        "selectedBackground": {
          "style": {
            "fill": "#D8E4F7"
          }
        },
        "dragMask": {
          "style": {
            "fill": "#D9E5F8",
            "stroke": "#AEB8C6",
            "lineWidth": 1
          }
        },
        "backgroundChart": {
          "area": {
            "style": {
              "stroke": false,
              "fill": "#b2b8c3"
            }
          },
          "line": {
            "style": {
              "stroke": "#b2b8c3",
              "lineWidth": 1
            }
          }
        },
        "selectedBackgroundChart": {
          "area": {
            "style": {
              "stroke": false,
              "fill": "#e0e7f6"
            }
          },
          "line": {
            "style": {
              "stroke": "#e0e7f6",
              "lineWidth": 1
            }
          }
        }
      }
    },
    "series": {
      "bar": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "area": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "line": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "scatter": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "radar": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "rose": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "pie": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "circularProgress": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "funnel": {
        "label": {
          "style": {
            "fontSize": 11
          }
        },
        "transformLabel": {
          "style": {
            "fontSize": 11
          }
        }
      },
      "linearProgress": {
        "label": {
          "style": {
            "fontSize": 11
          }
        }
      }
    },
    "padding": {
      "top": 12,
      "right": 12,
      "left": 12,
      "bottom": 0
    },
    "background": "#fff",
    "fontFamily": "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol",
    "mark": {
      "symbol": {
        "state": {
          "hover": {
            "fillOpacity": 1,
            "stroke": "#3370ff",
            "lineWidth": 1,
            "strokeOpacity": 1,
            "scaleX": 1.2,
            "scaleY": 1.2
          },
          "dimension_hover": {
            "fillOpacity": 1,
            "scaleX": 1,
            "scaleY": 1,
            "stroke": "#3370ff",
            "lineWidth": 1,
            "strokeOpacity": 1
          }
        }
      },
      "rect": {
        "state": {
          "hover": {
            "fillOpacity": 1,
            "scaleX": 1,
            "scaleY": 1,
            "stroke": "#3370ff",
            "lineWidth": 1,
            "strokeOpacity": 1
          },
          "dimension_hover": {
            "fillOpacity": 1,
            "scaleX": 1,
            "scaleY": 1,
            "stroke": "#3370ff",
            "lineWidth": 1,
            "strokeOpacity": 1
          }
        }
      },
      "arc": {
        "state": {
          "hover": {
            "fillOpacity": 1,
            "scaleX": 1.2,
            "scaleY": 1.2,
            "stroke": "#3370ff",
            "lineWidth": 1,
            "strokeOpacity": 1
          }
        }
      }
    }
  },
  "padding": {
    "top": 0,
    "right": 0,
    "left": 0,
    "bottom": 0
  },
  "legends": {
    "visible": true,
    "position": "start",
    "padding": {
      "top": 0,
      "right": 0,
      "left": 0,
      "bottom": 30
    },
    "orient": "top",
    "maxRow": 1
  },
  "barMaxWidth": 40,
  "label": {
    "visible": false
  },
  "type": "bar",
  "tooltip": {
    "mark": {
      "visible": false
    }
  },
  "crosshair": {
    "xField": {
      "visible": true,
      "label": {
        "visible": false
      },
      "line": {
        "style": {
          "opacity": 0.05,
          "fill": "#1f2329"
        }
      }
    }
  },
  "data": {
    "values": []
  },
  "bar": {
    "style": {
      "cornerRadius": [
        0,
        0,
        0,
        0
      ],
      "cornerRadiusTopLeft": 2,
      "cornerRadiusTopRight": 2
    },
    "state": {
      "hover": {
        "lineWidth": 0
      },
      "dimension_hover": {
        "lineWidth": 0
      }
    }
  },
  "seriesField": "type",
  "direction": "vertical",
  "axes": [
    {
      "sampling": false,
      "label": {
        "autoRotate": true
      }
    }
  ],
  "animation": false,
  "media": [
    {
      "action": [
        {
          "filterType": "dataZoom",
          "spec": {
            "visible": false
          }
        }
      ],
      "query": {
        "maxHeight": 300
      }
    },
    {
      "action": [
        {
          "filterType": "title",
          "spec": {
            "visible": false
          }
        },
        {
          "filter": {
            "orient": "bottom"
          },
          "filterType": "axes",
          "spec": {
            "title": {
              "visible": false
            }
          }
        },
        {
          "filter": {
            "orient": "top"
          },
          "filterType": "axes",
          "spec": {
            "title": {
              "visible": false
            }
          }
        }
      ],
      "query": {
        "maxHeight": 180
      }
    },
    {
      "action": [
        {
          "filter": {
            "orient": "top"
          },
          "filterType": "legends",
          "spec": {
            "visible": false
          }
        },
        {
          "filter": {
            "orient": "bottom"
          },
          "filterType": "legends",
          "spec": {
            "visible": false
          }
        }
      ],
      "query": {
        "maxHeight": 150
      }
    },
    {
      "action": [
        {
          "filter": {
            "orient": "top"
          },
          "filterType": "axes",
          "spec": {
            "label": {
              "visible": false
            },
            "tick": {
              "visible": false
            }
          }
        },
        {
          "filter": {
            "orient": "bottom"
          },
          "filterType": "axes",
          "spec": {
            "label": {
              "visible": false
            },
            "tick": {
              "visible": false
            }
          }
        }
      ],
      "query": {
        "maxHeight": 120
      }
    },
    {
      "action": [
        {
          "filter": {
            "orient": "right"
          },
          "filterType": "axes",
          "spec": {
            "title": {
              "visible": false
            }
          }
        },
        {
          "filter": {
            "orient": "left"
          },
          "filterType": "axes",
          "spec": {
            "title": {
              "visible": false
            }
          }
        },
        {
          "filter": {
            "orient": "left"
          },
          "filterType": "legends",
          "spec": {
            "visible": false
          }
        },
        {
          "filter": {
            "orient": "right"
          },
          "filterType": "legends",
          "spec": {
            "visible": false
          }
        },
        {
          "filterType": "indicator",
          "spec": {
            "visible": false
          }
        }
      ],
      "query": {
        "maxWidth": 200
      }
    },
    {
      "action": [
        {
          "filter": {
            "orient": "left"
          },
          "filterType": "axes",
          "spec": {
            "label": {
              "visible": false
            },
            "tick": {
              "visible": false
            }
          }
        },
        {
          "filter": {
            "orient": "right"
          },
          "filterType": "axes",
          "spec": {
            "label": {
              "visible": false
            },
            "tick": {
              "visible": false
            }
          }
        }
      ],
      "query": {
        "maxWidth": 180
      }
    }
  ]
}



const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

Current Behavior

Expected Behavior

不报错

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[skie1997]

随下个迭代修复

[xile611]

配置使用不规范导致的，设置了axes，但是没有设置orient，这样不能指明是x轴还是y轴，所以导致了无意义的配置
报错需要兼容