重新渲染/动态更新时图表重叠 (布局异常)

import ApexChart from "react-apexcharts"; import { IProps } from "./types"; import { useTheme } from "@mui/material";

export const AreaChart = ({ series, width, height }: IProps) => { const theme = useTheme(); const options: ApexCharts.ApexOptions = { chart: { height: height || 500, foreColor: theme.palette.text.primary, toolbar: { show: true, tools: { download: true, selection: false, zoom: false, zoomin: false, zoomout: false, pan: false, reset: false }, }, zoom: { enabled: false }, animations: { enabled: true, easing: "easeinout", speed: 800, animateGradually: { enabled: true, delay: 150 }, dynamicAnimation: { enabled: true, speed: 350 }, }, }, dataLabels: { enabled: false }, markers: { size: 6, strokeWidth: 2, strokeColors: theme.palette.background.paper, hover: { size: 8 }, }, legend: { position: "bottom", horizontalAlign: "center", offsetY: 10, offsetX: 0, itemMargin: { horizontal: 10, vertical: 5 }, markers: { width: 12, height: 12, radius: 12, offsetX: -2, offsetY: 1 }, labels: { colors: theme.palette.text.primary, useSeriesColors: false }, fontSize: "12px", fontFamily: theme.typography.fontFamily, onItemClick: { toggleDataSeries: true }, onItemHover: { highlightDataSeries: true }, }, stroke: { curve: "smooth", width: 3, lineCap: "round", }, xaxis: { type: "category", labels: { style: { colors: theme.palette.text.secondary, fontSize: "11px", fontFamily: theme.typography.fontFamily, }, }, }, yaxis: { min: 0, gridlines: { show: false, color: theme.palette.background.paper, width: 1, }, }, }, data: { labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], series: [ { name: "Series 1", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 2", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 3", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 4", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 5", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 6", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 7", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 8", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 9", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 10", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 11", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 12", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 13", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 14", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 15", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 16", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 17", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 18", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 19", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 20", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 21", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 22", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 23", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 24", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 25", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 26", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 27", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 28", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 29", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 30", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 31", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 32", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 33", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 34", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 35", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 36", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 37", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 38", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 39", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 40", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 41", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 42", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 43", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 44", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 45", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 46", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 47", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 48", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 49", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 50", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 51", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 52", data: [ 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22 ], }, { name: "Series 53", data: [ 100, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220 ], }, { name: "Series 54", data: [ 10, 12, 13, 14, 15, 16, 17,