|
| 1 | +import { default as VChart, type ISpec } from '../../../../src/index'; |
| 2 | + |
| 3 | +const WIDTH = 640; |
| 4 | +const HEIGHT = 360; |
| 5 | +const DATA_COUNT = 1000; |
| 6 | + |
| 7 | +const values = Array.from({ length: DATA_COUNT }, (_, index) => { |
| 8 | + const itemIndex = index + 1; |
| 9 | + const category = `R${itemIndex.toString().padStart(5, '0')}`; |
| 10 | + |
| 11 | + return { |
| 12 | + category: itemIndex % 17 === 0 ? `${category}-resize-label-long-text` : category, |
| 13 | + value: (itemIndex * 37 + 1) % 997, |
| 14 | + value2: (itemIndex * 53 + 18) % 991, |
| 15 | + word: `word-${itemIndex.toString().padStart(5, '0')}` |
| 16 | + }; |
| 17 | +}); |
| 18 | + |
| 19 | +const spec: ISpec = { |
| 20 | + type: 'pie', |
| 21 | + width: WIDTH, |
| 22 | + height: HEIGHT, |
| 23 | + autoFit: false, |
| 24 | + animation: false, |
| 25 | + background: '#ffffff', |
| 26 | + color: ['#3370ff', '#00b8d9', '#34c724', '#ff7d00', '#7b67ee', '#f54a45'], |
| 27 | + padding: { top: 24, right: 24, bottom: 52, left: 60 }, |
| 28 | + data: [{ id: 'main', values }], |
| 29 | + tooltip: { visible: true }, |
| 30 | + categoryField: 'category', |
| 31 | + valueField: 'value', |
| 32 | + outerRadius: 0.82, |
| 33 | + label: { visible: true, style: { fontSize: 10 }, position: 'outside' }, |
| 34 | + legends: { visible: true, orient: 'right' } |
| 35 | +}; |
| 36 | + |
| 37 | +const chartContainer = document.getElementById('chartContainer') as HTMLElement; |
| 38 | +const chartDom = document.getElementById('chart') as HTMLElement; |
| 39 | +const controlPanel = document.getElementById('controlPanel') as HTMLElement; |
| 40 | + |
| 41 | +chartContainer.style.flexGrow = '0'; |
| 42 | +chartContainer.style.width = `${WIDTH}px`; |
| 43 | +chartContainer.style.height = `${HEIGHT}px`; |
| 44 | +chartContainer.style.margin = '12px auto 0'; |
| 45 | +chartDom.style.width = '100%'; |
| 46 | +chartDom.style.height = '100%'; |
| 47 | + |
| 48 | +const renderButton = document.createElement('button'); |
| 49 | +renderButton.type = 'button'; |
| 50 | +renderButton.textContent = '渲染 pie.small.100'; |
| 51 | + |
| 52 | +const resetButton = document.createElement('button'); |
| 53 | +resetButton.type = 'button'; |
| 54 | +resetButton.textContent = '释放并重置'; |
| 55 | + |
| 56 | +const status = document.createElement('span'); |
| 57 | +status.style.marginLeft = '8px'; |
| 58 | +status.textContent = '100 个数据点，等待录制后点击渲染'; |
| 59 | + |
| 60 | +let chart: VChart | undefined; |
| 61 | + |
| 62 | +const reset = () => { |
| 63 | + chart?.release(); |
| 64 | + chart = undefined; |
| 65 | + chartDom.replaceChildren(); |
| 66 | + renderButton.disabled = false; |
| 67 | + status.textContent = '已重置，可开始下一次录制'; |
| 68 | +}; |
| 69 | + |
| 70 | +renderButton.addEventListener('click', () => { |
| 71 | + reset(); |
| 72 | + performance.mark('vchart-pie-small:create-start'); |
| 73 | + chart = new VChart(spec, { dom: chartDom, mode: 'desktop-browser', animation: false }); |
| 74 | + performance.mark('vchart-pie-small:render-start'); |
| 75 | + chart.renderSync(); |
| 76 | + performance.mark('vchart-pie-small:render-end'); |
| 77 | + renderButton.disabled = true; |
| 78 | + window['vchart'] = chart; |
| 79 | + status.textContent = '已渲染；使用“释放并重置”后可进行下一次录制'; |
| 80 | +}); |
| 81 | + |
| 82 | +resetButton.addEventListener('click', reset); |
| 83 | +controlPanel.append(renderButton, resetButton, status); |
0 commit comments