We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
latest
none
just copy the code:
const newSpec = { type: 'circularProgress', title: { text: '环形进度图' }, data: { values: [ { type: 'Industries', value: 0.795, text: '79.5%' }, { type: 'Companies', value: 0.25, text: '25%' } ] }, valueField: 'value', categoryField: 'type', seriesField: 'type', radius: 0.7, innerRadius: 0.4, cornerRadius: 20, progress: { style: { innerPadding: 5, outerPadding: 5 } }, indicator: { visible: true, trigger: 'hover', title: { visible: true, field: 'type', autoLimit: true }, content: [ { visible: true, field: 'text' } ] }, legends: { visible: true, orient: 'bottom', title: { visible: false } }, theme: { colorScheme: { default: { dataScheme: [ { maxDomainLength: 15, scheme: [ '#54a5fd', '#56d0fb', '#965ef6', '#fad45a', '#f76b66', '#ffaa47', '#7bb9fc', '#78d8fb', '#a97df7', '#f7da7d', '#f98683', '#ffb969', '#3f9bff', '#28c5ff', '#8747f6', '#ffcb21', '#f6544f', '#ff941a', '#a5cffc', '#9fe3fb', '#c1a0f9', '#f7e19c', '#faaba7', '#fecc94', '#5096e2', '#38c7fb', '#7c42dd', '#fbbf34', '#dc4c44', '#fd9f32' ] } ], palette: { labelFontColor: '#ebebeb', titleFontColor: '#ebebeb', axisGridColor: '#cacaca', axisDomainColor: '#d0d0d0' } } }, padding: { top: 12, right: 12, left: 12, bottom: 0 }, component: { title: { textStyle: { fontSize: 14, fill: '#ebebeb', fontWeight: 'bold' }, subtextStyle: { fontSize: 12, fill: '#ebebeb', 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: '#a6a6a6', fontWeight: 'normal', fillOpacity: 1 } }, domainLine: { visible: true, style: { lineWidth: 1, stroke: '#434343', strokeOpacity: 1 } }, grid: { visible: true, style: { lineWidth: 1, stroke: '#434343', strokeOpacity: 1, lineDash: [4, 4] } }, tick: { visible: false, tickSize: 4, style: { lineWidth: 1, stroke: '#434343', strokeOpacity: 1 } }, title: { space: 8, style: { fontSize: 12, fill: '#505050', 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: '#ebebeb', 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: '#dcdcdc', fillOpacity: 0 }, unSelected: { fill: '#ebebeb', fillOpacity: 0 }, selectedHover: { fill: '#dcdcdc', fillOpacity: 0.08 }, unSelectedHover: { fill: '#dcdcdc', fillOpacity: 0.08 } } }, label: { style: { fontSize: 12, fontWeight: 'normal', fontStyle: 'normal', fill: '#ffffff', maxLineWidth: 400 }, state: { selected: { fillOpacity: 1 }, unSelected: { fillOpacity: 0.9 }, selectedHover: { fillOpacity: 0.7, fill: '#d0d0d0' }, unSelectedHover: { fillOpacity: 0.65 } } }, shape: { space: 4, style: { size: 8 } } }, title: { style: { fontSize: 12, fontWeight: 'normal', fill: '#ffffff' } } }, tooltip: { panel: { border: { width: 1, radius: 3, color: '#EBEBEB26' }, 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: '#373c43' }, spaceRow: 6, maxWidth: 400, titleLabel: { fontSize: 14, fontColor: '#ffffff', lineHeight: 20, textAlign: 'left' }, offset: { x: 10, y: 10 }, shape: { size: 7 }, keyLabel: { fontSize: 14, fontColor: '#ffffff', lineHeight: 18, textAlign: 'left', spacing: 12 }, valueLabel: { fontSize: 14, fontColor: '#ffffff', lineHeight: 18, textAlign: 'left', fontWeight: 'bold' } }, colorLegend: { horizontal: { padding: { left: 0, right: 24, top: 18, bottom: 18 }, title: { visible: false, padding: 0, textStyle: { fontSize: 12, fontWeight: 'normal', fill: '#ebebeb' }, space: 12 }, handlerText: { style: { fontSize: 12 } }, rail: { width: 200, height: 8, style: { fill: '#ebebeb' } } }, vertical: { padding: { left: 0, right: 24, top: 18, bottom: 18 }, title: { visible: false, padding: 0, textStyle: { fontSize: 12, fontWeight: 'normal', fill: '#ebebeb' }, space: 12 }, handlerText: { style: { fontSize: 12 } }, rail: { width: 200, height: 8, style: { fill: '#ebebeb' } } } }, sizeLegend: { horizontal: { rail: { width: 200, height: 12, style: { fill: '#ebebeb' } }, padding: { left: 0, right: 24, top: 18, bottom: 18 }, title: { visible: false, padding: 0, textStyle: { fontSize: 12, fontWeight: 'normal', fill: '#ebebeb' }, 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: '#ebebeb' } }, padding: { left: 0, right: 24, top: 18, bottom: 18 }, title: { visible: false, padding: 0, textStyle: { fontSize: 12, fontWeight: 'normal', fill: '#ebebeb' }, 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: '#cccccc', cornerRadius: 2 } }, icon: { style: { size: 8, fill: 'white', stroke: '#cccccc', 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: '#dadada', lineWidth: 0 } }, startHandler: { style: { stroke: '#969696' } }, endHandler: { style: { stroke: '#969696' } }, startText: { padding: 8, style: { fontSize: 10, fill: '#999999' } }, endText: { padding: 8, style: { fontSize: 10, fill: '#999999' } }, selectedBackground: { style: { fill: '#c1daf2' } }, dragMask: { style: { fill: '#c1dbf4', stroke: '#b8b8b8', lineWidth: 1 } }, backgroundChart: { area: { style: { stroke: false, fill: '#b8b8b8' } }, line: { style: { stroke: '#b8b8b8', lineWidth: 1 } } }, selectedBackgroundChart: { area: { style: { stroke: false, fill: '#c9dcef' } }, line: { style: { stroke: '#c9dcef', lineWidth: 1 } } } }, crosshair: { xField: { visible: false, line: { type: 'rect', visible: true, style: { fill: '#ebebeb', opacity: 0.6 } }, label: { visible: true, style: { fill: '#ebebeb', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, yField: { visible: false, line: { type: 'line', visible: true, style: { fill: '#ebebeb', opacity: 0.6 } }, label: { visible: true, style: { fill: '#ebebeb', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, categoryField: { visible: false, line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } }, label: { visible: true, style: { fill: '#ebebeb', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, valueField: { visible: false, line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } }, label: { visible: true, style: { fill: '#ebebeb', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } } } }, background: '#1f2329', 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: '#ffffff', lineWidth: 1, strokeOpacity: 1, scaleX: 1.2, scaleY: 1.2 }, dimension_hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#ffffff', lineWidth: 1, strokeOpacity: 1 } } }, rect: { state: { hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#ffffff', lineWidth: 1, strokeOpacity: 1 }, dimension_hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#ffffff', lineWidth: 1, strokeOpacity: 1 } } }, arc: { state: { hover: { fillOpacity: 1, scaleX: 1.2, scaleY: 1.2, stroke: '#ffffff', lineWidth: 1, strokeOpacity: 1 } } } } } }; const spec = { type: 'circularProgress', title: { text: '环形进度图' }, data: { values: [ { type: 'Industries', value: 0.795, text: '79.5%' }, { type: 'Companies', value: 0.25, text: '25%' } ] }, valueField: 'value', categoryField: 'type', seriesField: 'type', radius: 0.7, innerRadius: 0.4, cornerRadius: 20, progress: { style: { innerPadding: 5, outerPadding: 5 } }, indicator: { visible: true, trigger: 'hover', title: { visible: true, field: 'type', autoLimit: true }, content: [ { visible: true, field: 'text' } ] }, legends: { visible: true, orient: 'bottom', title: { visible: false } }, theme: { colorScheme: { default: { dataScheme: [ { maxDomainLength: 15, scheme: [ '#4e83fd', '#50cefb', '#935af6', '#fad355', '#f76964', '#ffa53d', '#82a7fc', '#7edafb', '#ad82f7', '#f7dc82', '#f98e8b', '#ffba6b', '#3370ff', '#14c0ff', '#7f3bf5', '#ffc60a', '#f54a45', '#ff8800', '#bacefd', '#b1e8fc', '#cdb2fa', '#f8e6ab', '#fbbfbc', '#fed4a4', '#245bdb', '#049fd7', '#6425d0', '#dc9b04', '#d83931', '#de7802' ] } ], 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' } }, 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 } } } }, crosshair: { xField: { visible: false, line: { type: 'rect', visible: true, style: { fill: '#F2F3F5', opacity: 0.6 } }, label: { visible: true, style: { fill: '#fff', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, yField: { visible: false, line: { type: 'line', visible: true, style: { fill: '#F2F3F5', opacity: 0.6 } }, label: { visible: true, style: { fill: '#fff', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, categoryField: { visible: false, line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } }, label: { visible: true, style: { fill: '#fff', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } }, valueField: { visible: false, line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } }, label: { visible: true, style: { fill: '#fff', fontSize: 14 }, labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } } } } } }, 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 } } } } } }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); setTimeout(() => { vchart.updateSpec(newSpec); }, 1000);
fix the error
- OS: - Browser: - Framework:
No response
The text was updated successfully, but these errors were encountered:
zamhown
Successfully merging a pull request may close this issue.
Version
latest
Link to Minimal Reproduction
none
Steps to Reproduce
just copy the code:
Current Behavior
Expected Behavior
fix the error
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: