Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript

The article begins with a brief background about a business requirement for a data‑dashboard that supports one‑click skin changes and converting tables to charts, noting the challenges when using Vue3 and TypeScript.

Basic ECharts setup : It explains installing ECharts via npm install echarts , creating a utility module to import required chart types, components, and the canvas renderer, and registering them with echarts.use([...]) . A simple Echart.vue component is shown that initializes a chart instance, sets an option object, and renders a basic bar chart.

Encapsulating chart rendering with a hook : To avoid repetitive chart initialization, a useEcharts hook is introduced. The hook manages chart instance creation, option setting, resize handling, and lifecycle cleanup using Vue's onMounted , onDeactivated , and onBeforeUnmount . The hook returns initCharts , setOptions , and echartsResize functions for use in components.

Component integration : The hook is imported in Echart.vue , where a BaseEcharts component receives chart options as a prop. A watcher updates the chart when the options prop changes, and the chart is initialized on mount.

Theme switching : To allow dynamic theme changes, the initCharts function is extended to accept an optional themeColor array, which overrides the options.color field. A Pinia store ( themeStore ) holds the current color array and provides an updateCurrentColorByArray method.

Predefined theme data : A configuration file echartsTheme.ts defines several built‑in themes (e.g., vintage, dark, westeros) with name, background, and color palette arrays. These themes are displayed in a setting.vue component, where clicking a theme updates the store.

Custom color generation : When users need a theme based on a custom color, the tvision‑color library is used. The utility getColorArray(hex) generates a gradient palette and identifies the primary color. The store adds an updateCurrentColorArray method that swaps the primary color to the first position and updates currentColorArray .

Custom color UI : A customColor.vue component presents a list of preset colors and an el-color-picker for custom selection. Selecting a color triggers handleClick or customColor , which updates the store and consequently the chart theme.

Reactive theme application : In the main chart component, a watch monitors themeStore.currentColorArray . When it changes, the chart's option.color is updated and setOptions is called to re‑render with the new palette.

The article concludes that by combining Vue3, TypeScript, a reusable hook, Pinia state management, and the tvision‑color library, developers can provide users with one‑click skin switching and custom color‑based chart themes, fulfilling the original business requirement.