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 - 新能源行业色板
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');Run the following command from any location in the project to start the dev server:
rush theme