VChart 扩展主题包

The English version is working in progress.

在默认主题的基础上，VChart 也封装了一系列开箱即用的扩展主题，以单独主题包的形式提供。这些主题默认没有内置在 VChart 里，而是支持用户按需使用，使用户可以通过更少的工作获得更美观宜人、更贴合使用场景的 VChart 图表。

此外，VChart 针对现有组件库也做了单独的主题包。这些包将在下文分别介绍。

扩展主题包 @visactor/vchart-theme

vchart-theme 包含了一些扩展主题，以 ITheme 对象或静态 json 资源的形式提供。

DEMO

请访问 codesandbox 进行预览。

安装

@visactor/vchart-theme

# npm
npm install @visactor/vchart-theme

# yarn
yarn add @visactor/vchart-theme

使用

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

如果你只需要使用某个特定主题，还可以从该包中引用该主题的 JSON 文件：

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

该包主要包含以下主题 json 资源：

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 大屏-党建红
semiDesignLight Semi Design - light
semiDesignDark Semi Design - dark
arcoDesignLight Arco Design - light
arcoDesignDark Arco Design - dark
ttPlatformLight TT Platform - light
ttPlatformDark TT Platform - dark
chartHubLight chartHub - light
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 - 新能源行业色板

VChart 扩展主题包

扩展主题包 @visactor/vchart-theme

DEMO

安装

使用