@visactor/vchart-theme-utils

@visactor/vchart-theme

Description

The extension themes for VChart.

The list of themes included here is as follows, with links to the theme JSON files:

• vScreenVolcanoBlue 大屏-火山蓝
• vScreenClean 大屏-清新蜡笔
• vScreenOutskirts 大屏-郊外
• vScreenBlueOrange 大屏-汽车蓝橙
• vScreenFinanceYellow 大屏-金融黄
• vScreenWenLvCyan 大屏-文旅青
• vScreenElectricGreen 大屏-电力绿
• vScreenECommercePurple 大屏-电商紫
• vScreenRedBlue 大屏-红蓝
• vScreenPartyRed 大屏-党建红

Usage

Import the full theme map and register them in sequence:

import { allThemeMap } from '@visactor/vchart-theme';
import VChart from '@visactor/vchart';

// register themes
allThemeMap.forEach((theme, name) => {
  VChart.ThemeManager.registerTheme(name, theme);
});

// apply a theme
VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue');

If you only use a specific theme, you can also import the specific theme JSON from this package:

import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json';
import VChart from '@visactor/vchart';

// register the theme
VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue);

// apply the theme
VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue');

Debug

Run the following command from any location in the project to start the dev server:

rush theme