refactor

src/routes/weather/week/[location]/MeteogramCharts.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import * as echarts from 'echarts';
-
 	import { formatZoned, getRelativeDayLabel } from '$lib/utils/date';
 	import { buildCurrentTimeSeries, buildDaylightSeries, getThemeColors } from '$lib/utils/echarts';
 
 	import { ChartContainer, ChartToolbar, EChart } from '$lib/components/charts';
+	import { echarts } from '$lib/components/charts/echarts';
 	import '$lib/components/charts/echarts.css';
 
 	import { getColor } from '../../utils/colors';
@@ -19,6 +18,8 @@
 		getWindUnit
 	} from './types';
 
+	import type { ECharts } from 'echarts';
+
 	interface Props {
 		data: FetchedHourly;
 		selectedDay: Date;
@@ -34,7 +35,7 @@
 
 	let showCharts = $state(false);
 	let chartComponents: EChart[] = $state([]);
-	let chartInstances: echarts.ECharts[] = $state([]);
+	let chartInstances: ECharts[] = $state([]);
 	let chartOptions: Array<Record<string, unknown>> = $state([]);
 
 	export function scrollToDay(day: Date): void {
@@ -76,7 +77,7 @@
 		onResetZoom?.();
 	}
 
-	function handleChartReady(chart: echarts.ECharts): void {
+	function handleChartReady(chart: ECharts): void {
 		chart.group = CHART_GROUP;
 		chartInstances = [...chartInstances, chart];
 		if (chartInstances.length === 3) {
@@ -85,14 +86,6 @@
 		}
 	}
 
-	$effect(() => {
-		// Reset chart instances when data changes
-		if (data) {
-			chartInstances = [];
-			chartComponents = [];
-		}
-	});
-
 	$effect(() => {
 		if (!data) return;
 
@@ -530,6 +523,7 @@
 			{#each chartOptions as option, i (i)}
 				<EChart
 					{option}
+					notMerge
 					height={i === 2 ? '320px' : '300px'}
 					onChartReady={handleChartReady}
 					bind:this={chartComponents[i]}