VChart/packages/vchart-theme

@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 obtain the specific theme JSON from this package and place it under your project for reference:

import vScreenVolcanoBlue from 'xxx'; // your json path
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