| 26 | }; |
| 27 | |
| 28 | const createOptions = (title: string, data: ReadonlyArray<DataPoint>, color: string): ChartGPUOptions => { |
| 29 | const xMax = Math.PI * 2; |
| 30 | return { |
| 31 | grid: { left: 70, right: 24, top: 24, bottom: 56 }, |
| 32 | xAxis: { type: 'value', min: 0, max: xMax, name: 'Angle (rad)' }, |
| 33 | yAxis: { type: 'value', min: -1.2, max: 1.2, name: title }, |
| 34 | palette: [color], |
| 35 | tooltip: { trigger: 'axis' }, |
| 36 | animation: { duration: 900, easing: 'cubicOut', delay: 0 }, |
| 37 | series: [ |
| 38 | { |
| 39 | type: 'line', |
| 40 | name: title, |
| 41 | data, |
| 42 | color, |
| 43 | lineStyle: { width: 2, opacity: 1 }, |
| 44 | }, |
| 45 | ], |
| 46 | }; |
| 47 | }; |
| 48 | |
| 49 | async function main() { |
| 50 | const containerA = document.getElementById('chart-a'); |