@visactor/vchart-theme NPM

@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:

light
dark
mobileLight light theme for mobile devices
mobileDark dark theme for mobile devices
legacyLight legacy light theme for simply legend style
legacyDark legacy dark theme for simply legend style
vScreenVolcanoBlue 大屏-火山蓝
vScreenClean 大屏-清新蜡笔
vScreenOutskirts 大屏-郊外
vScreenBlueOrange 大屏-汽车蓝橙
vScreenFinanceYellow 大屏-金融黄
vScreenWenLvCyan 大屏-文旅青
vScreenElectricGreen 大屏-电力绿
vScreenECommercePurple 大屏-电商紫
vScreenRedBlue 大屏-红蓝
vScreenPartyRed 大屏-党建红
chartHubLight light theme for ChartHub.
semiDesignLight Semi Design - light
semiDesignDark Semi Design - dark
arcoDesignLight Arco Design - light
arcoDesignDark Arco Design - dark
ttPlatformLight TT Platform - light
ttPlatformDark TT Platform - dark
veODesignLight O Design - light
veODesignLightFinance O Design - light - 金融行业色板
veODesignLightGovernment O Design - light - 政府行业色板
veODesignLightConsumer O Design - light - 大消费行业色板
veODesignLightAutomobile O Design - light - 汽车行业色板
veODesignLightCulturalTourism O Design - light - 文旅行业色板
veODesignLightMedical O Design - light - 医疗行业色板
veODesignLightNewEnergy O Design - light - 新能源行业色板
veODesignDark O Design - dark
veODesignDarkFinance O Design - dark - 金融行业色板
veODesignDarkGovernment O Design - dark - 政府行业色板
veODesignDarkConsumer O Design - dark - 大消费行业色板
veODesignDarkAutomobile O Design - dark - 汽车行业色板
veODesignDarkCulturalTourism O Design - dark - 文旅行业色板
veODesignDarkMedical O Design - dark - 医疗行业色板
veODesignDarkNewEnergy O Design - dark - 新能源行业色板

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');