| 16 | } |
| 17 | |
| 18 | const baseCharOptions = (themeMode: ThemeMode, themeColorPresets: ThemeColorPresets): ApexOptions => { |
| 19 | const LABEL_TOTAL = { |
| 20 | show: true, |
| 21 | label: "Total", |
| 22 | color: themeVars.colors.text.secondary, |
| 23 | fontSize: themeVars.typography.fontSize.sm, |
| 24 | lineHeight: themeVars.typography.lineHeight.tight, |
| 25 | }; |
| 26 | |
| 27 | const LABEL_VALUE = { |
| 28 | offsetY: 8, |
| 29 | color: themeVars.colors.text.primary, |
| 30 | fontSize: themeVars.typography.fontSize.sm, |
| 31 | lineHeight: themeVars.typography.lineHeight.tight, |
| 32 | }; |
| 33 | return { |
| 34 | // Colors |
| 35 | colors: [ |
| 36 | presetsColors[themeColorPresets].default, |
| 37 | paletteColors.info.default, |
| 38 | paletteColors.warning.default, |
| 39 | paletteColors.error.default, |
| 40 | paletteColors.success.default, |
| 41 | |
| 42 | paletteColors.warning.dark, |
| 43 | paletteColors.info.dark, |
| 44 | paletteColors.error.dark, |
| 45 | paletteColors.success.dark, |
| 46 | ], |
| 47 | |
| 48 | // Chart |
| 49 | chart: { |
| 50 | toolbar: { show: false }, |
| 51 | zoom: { enabled: false }, |
| 52 | parentHeightOffset: 0, |
| 53 | foreColor: themeVars.colors.text.disabled, |
| 54 | fontFamily: themeVars.typography.fontFamily.openSans, |
| 55 | // 优化动画配置以提高响应式性能 |
| 56 | animations: { |
| 57 | enabled: true, |
| 58 | speed: 360, |
| 59 | animateGradually: { enabled: true, delay: 120 }, |
| 60 | dynamicAnimation: { enabled: true, speed: 360 }, |
| 61 | }, |
| 62 | // 启用快速响应式重绘 |
| 63 | redrawOnParentResize: true, |
| 64 | redrawOnWindowResize: true, |
| 65 | }, |
| 66 | |
| 67 | // States |
| 68 | states: { |
| 69 | hover: { filter: { type: "darken" } }, |
| 70 | active: { filter: { type: "darken" } }, |
| 71 | }, |
| 72 | |
| 73 | // Fill |
| 74 | fill: { |
| 75 | opacity: 1, |