Description
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
8000
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