[Bug] media query title error issue

[neuqzxy]

Version

1.11.11

Link to Minimal Reproduction

1.11.11

Steps to Reproduce

import { isMobile } from 'react-device-detect'; import type { IAreaChartSpec } from '../../../../src/index'; // eslint-disable-next-line no-duplicate-imports import { default as VChart, registerMediaQuery } from '../../../../src/index';

const spec: IAreaChartSpec = { bandWidth: 10, cornerRadius: 10, height: 40, data: [ { id: 'd0', values: [ { type: '模型渲染进度', value: 0.5 } ] } ], direction: 'horizontal', progress: { bottomPadding: 10, style: { fill: 'red' }, topPadding: 10 }, title: { visible: false }, type: 'linearProgress', xField: 'value', yField: 'type', theme: { colorScheme: { default: { dataScheme: [ { maxDomainLength: 15, scheme: [ '#4e83fd', '#50cefb', '#14e1c6', '#62d256', '#c3dd40', '#fad355', '#ffa53d', '#f76964', '#f14ba9', '#db66db', '#935af6', '#616ae5', '#82a7fc', '#7edafb', '#64e8d6', '#8ee085', '#d2e76a', '#f7dc82', '#ffba6b', '#f98e8b', '#f57ac0', '#e58fe5', '#ad82f7', '#7b83ea', '#3370ff', '#14c0ff', '#00d6b9', '#34c724', '#b3d600', '#ffc60a', '#ff8800', '#f54a45', '#f01d94', '#d136d1', '#7f3bf5', '#4954e6', '#bacefd', '#b1e8fc', '#a9efe6', '#b7edb1', '#dfee96', '#f8e6ab', '#fed4a4', '#fbbfbc', '#f9aed9', '#efb9ef', '#cdb2fa', '#b4b9f3', '#245bdb', '#049fd7', '#04b49c', '#2ea121', '#8fac02', '#dc9b04', '#de7802', '#d83931', '#c71077', '#b220b2', '#6425d0', '#2933c7' ] } ], palette: { labelFontColor: '#333333', titleFontColor: '#333333', axisGridColor: '#d0d3d6', axisDomainColor: '#1f2329' } } }, padding: { top: 12, right: 12, left: 12, bottom: 0 }, component: { 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 } }, axis: { label: { space: 0, visible: true, style: { fontSize: 12, fill: '#646a73', fontWeight: 'normal', fillOpacity: 1 } }, 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: { maxRow: 1, autoPage: true, padding: { bottom: 0, left: 12, right: 12, top: 16 }, pager: { padding: { left: 8, right: 8, top: 8, bottom: 0 }, handler: { style: { size: 8 } }, textStyle: { fill: '#000', fontSize: 12, lineHeight: 14 } }, maxLengthOnLeftRight: 214, orient: 'bottom', item: { 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 } } }, label: { style: { fontSize: 12, 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 } } }, shape: { space: 4, style: { size: 8 } } }, title: { style: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' } } }, 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 } } } } }, 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 } } } } }, 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: { tick: { visible: false }, label: { visible: false } } }, { filter: { orient: 'bottom' }, filterType: 'axes', spec: { tick: { visible: false }, label: { 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: { tick: { visible: false }, label: { visible: false } } }, { filter: { orient: 'right' }, filterType: 'axes', spec: { tick: { visible: false }, label: { visible: false } } } ], query: { maxWidth: 180 } } ], region: [{}], tooltip: { style: { offset: { x: 10, y: 10 }, panel: { padding: { top: 10, left: 10, right: 10, bottom: 10 }, backgroundColor: '#ffffff', border: { color: '#DEE0E3', width: 1, radius: 3 }, shadow: { x: 0, y: 4, blur: 12, spread: 0, color: 'rgba(0, 0, 0, 0)' } }, spaceRow: 6, titleLabel: { fontSize: 14, lineHeight: 20, fontColor: '#333', fontWeight: 'bold', textAlign: 'left', textBaseline: 'middle', spacing: 0 }, shape: { size: 7, spacing: 6 }, keyLabel: { fontSize: 14, lineHeight: 18, fontColor: '#646a73', textAlign: 'left', textBaseline: 'middle', spacing: 12 }, valueLabel: { fontSize: 14, lineHeight: 18, fontColor: '#333333', fontWeight: 'bold', textBaseline: 'middle', spacing: 0, textAlign: 'left' }, maxWidth: 400 }, visible: true, activeType: ['mark', 'dimension'], renderMode: 'html', trigger: 'hover', className: 'vchart-tooltip-element', enterable: false, transitionDuration: 150, triggerOff: 'hover', confine: false, parentElement: {} }, series: [ { bandWidth: 10, progress: { 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 } }, style: { fillOpacity: 1, fill: 'red' }, bottomPadding: 10, topPadding: 10 }, track: { 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 } }, style: { fill: '#E7EBED', fillOpacity: 1 } }, label: { style: { fontSize: 14, fontWeight: 'normal', fillOpacity: 1, lineJoin: 'bevel' } }, group: {}, direction: 'horizontal', animation: true, animationThreshold: 2000, xField: 'value', yField: 'type', type: 'linearProgress', cornerRadius: 10 } ], axes: [ { domainLine: { visible: false, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } }, grid: { visible: false, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1, lineDash: [4, 4] } }, subGrid: { visible: false, style: { lineWidth: 1, stroke: '#d0d3d6', strokeOpacity: 1, lineDash: [4, 4] } }, tick: { visible: false, inside: false, tickSize: 0, alignWithLabel: true, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } }, subTick: { visible: false, tickSize: 2, style: { lineWidth: 1, stroke: '#1f2329', strokeOpacity: 1 } }, label: { visible: true, inside: false, space: 10, style: { fontSize: 12, fill: '#646a73', fontWeight: 'normal', fillOpacity: 1 }, autoLimit: true }, title: { space: 12, padding: 0, style: { fontSize: 12, lineHeight: '130%', fill: '#333333', fontWeight: 'normal', fillOpacity: 1 }, autoRotate: true }, maxWidth: '30%', unit: { visible: false, style: { fontSize: 12, fill: '#89909d', fontWeight: 'normal', fillOpacity: 1 } }, type: 'band', orient: 'left', visible: false }, { domainLine: { visible: false, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } }, grid: { visible: true, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1, lineDash: [4, 4] } }, subGrid: { visible: false, style: { lineWidth: 1, stroke: '#d0d3d6', strokeOpacity: 1, lineDash: [4, 4] } }, tick: { visible: false, inside: false, tickSize: 4, alignWithLabel: true, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } }, subTick: { visible: false, tickSize: 2, style: { lineWidth: 1, stroke: '#1f2329', strokeOpacity: 1 } }, label: { visible: true, inside: false, space: 8, style: { fontSize: 12, fill: '#646a73', fontWeight: 'normal', fillOpacity: 1 }, autoRotate: true, autoHide: true, autoLimit: true }, title: { space: 8, padding: 0, style: { fontSize: 12, lineHeight: '130%', fill: '#333333', fontWeight: 'normal', fillOpacity: 1 } }, maxHeight: '30%', unit: { visible: false, style: { fontSize: 12, fill: '#89909d', fontWeight: 'normal', fillOpacity: 1 } }, sampling: false, orient: 'bottom', visible: false, type: 'linear', min: 0, max: 1 } ] };

const run = () => { registerMediaQuery(); // VChart.ThemeManager.setCurrentTheme('dark'); const cs = new VChart(spec, { dom: document.getElementById('chart') as HTMLElement, mode: isMobile ? 'mobile-browser' : 'desktop-browser', //theme: 'dark', onError: err => { console.error(err); } }); console.time('renderTime');

cs.renderAsync().then(() => { console.timeEnd('renderTime'); });

window['vchart'] = cs; console.log(cs); }; run();

Current Behavior

报错

Expected Behavior

不报错

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response