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

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

Debug

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

rush theme