From 4c8c4ba475c2b6bc85de2d5cc5bd89cdd691d762 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Fri, 28 Nov 2025 11:28:09 +0800 Subject: [PATCH] docs: fix issue of docs --- .../en/tutorial_docs/Theme/Apply_Theme.md | 63 +++--------- .../en/tutorial_docs/Theme/Theme_Extension.md | 96 +++++++++---------- .../zh/tutorial_docs/Theme/Apply_Theme.md | 68 ++++--------- 3 files changed, 78 insertions(+), 149 deletions(-) diff --git a/docs/assets/guide/en/tutorial_docs/Theme/Apply_Theme.md b/docs/assets/guide/en/tutorial_docs/Theme/Apply_Theme.md index a4cd23b871..af56fd4c1f 100644 --- a/docs/assets/guide/en/tutorial_docs/Theme/Apply_Theme.md +++ b/docs/assets/guide/en/tutorial_docs/Theme/Apply_Theme.md @@ -92,16 +92,7 @@ Custom themes are theme configuration objects defined by users. For custom conte const customTheme = { name: 'myCustomTheme', colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -161,16 +152,7 @@ There are two ways: // Define custom theme object const customTheme = { colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -212,16 +194,7 @@ vchart.renderSync(); // Define and register custom theme const customTheme = { colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -277,11 +250,12 @@ yarn add @visactor/vchart-theme ```javascript livedemo // Import extension theme package -import { allThemeMap } from '@visactor/vchart-theme'; -import VChart from '@visactor/vchart'; +// import { allThemeMap } from '@visactor/vchart-theme'; + +// The VChartTheme object is already mounted on the window object in the editor environment // Register all extension themes -allThemeMap.forEach((theme, name) => { +VChartTheme.allThemeMap.forEach((theme, name) => { VChart.ThemeManager.registerTheme(name, theme); }); @@ -313,8 +287,8 @@ vchart.renderSync(); ```javascript livedemo // Import specific theme -import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; -import VChart from '@visactor/vchart'; +const response = await fetch('https://www.unpkg.com/@visactor/vchart-theme@latest/public/vScreenVolcanoBlue.json'); +const vScreenVolcanoBlue = await response.json(); // Register extension theme VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); @@ -356,16 +330,7 @@ const defaultTheme = VChart.ThemeManager.getDefaultTheme(); const extendedTheme = { ...defaultTheme, colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { ...defaultTheme.series, @@ -417,6 +382,8 @@ vchart.renderSync(); // Import extension theme (the following two lines are needed in development environment, not needed in vchart playground) //import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; //import VChart from '@visactor/vchart'; +const response = await fetch('https://www.unpkg.com/@visactor/vchart-theme@latest/public/vScreenVolcanoBlue.json'); +const vScreenVolcanoBlue = await response.json(); // Register original theme VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); @@ -569,17 +536,17 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); ``` - - ## Summary This article introduced a complete guide to VChart theme application: 1. **Theme Application Scope**: + - Global application: Affects all charts through `ThemeManager.setCurrentTheme()` - Chart instance application: Through the `theme` configuration item in spec or the instance's `setCurrentTheme()` method 2. **Theme Types**: + - **Default themes**: VChart's built-in `light` and `dark` themes that can be used without registration - **Custom themes**: Theme configuration objects defined by users - **Extension package themes**: Rich themes provided through the `@visactor/vchart-theme` package @@ -591,5 +558,3 @@ This article introduced a complete guide to VChart theme application: - Use theme extension for scenarios that need fine-tuning based on existing themes By flexibly using these theme application methods, you can easily achieve personalized customization and unified management of charts. - - diff --git a/docs/assets/guide/en/tutorial_docs/Theme/Theme_Extension.md b/docs/assets/guide/en/tutorial_docs/Theme/Theme_Extension.md index 57aef1fa05..d7017b4d20 100644 --- a/docs/assets/guide/en/tutorial_docs/Theme/Theme_Extension.md +++ b/docs/assets/guide/en/tutorial_docs/Theme/Theme_Extension.md @@ -1,22 +1,20 @@ -# VChart 扩展主题包 +# VChart Theme Extensions - Repository Address: [https://github.com/VisActor/vchart-theme](https://github.com/VisActor/vchart-theme) -The English version is working in progress. +VChart provides a set of ready-to-use theme extensions as separate packages. These themes are not bundled with VChart by default; you can import and register them on demand to quickly achieve attractive, scenario-appropriate chart styles with minimal effort. -在默认主题的基础上，VChart 也封装了一系列开箱即用的扩展主题，以单独主题包的形式提供。这些主题默认没有内置在 VChart 里，而是支持用户按需使用，使用户可以通过更少的工作获得更美观宜人、更贴合使用场景的 VChart 图表。 +In addition, VChart offers dedicated theme packages for popular UI component libraries. These are introduced below. -此外，VChart 针对现有组件库也做了单独的主题包。这些包将在下文分别介绍。 +## Extension Package @visactor/vchart-theme -## 扩展主题包 @visactor/vchart-theme +The `vchart-theme` package includes several extended themes, provided as `ITheme` objects or static JSON assets. -vchart-theme 包含了一些扩展主题，以 `ITheme` 对象或静态 json 资源的形式提供。 +### Demo -### DEMO +Visit [codesandbox](https://vv67jn.csb.app/) for a live preview. -请访问 [codesandbox](https://vv67jn.csb.app/) 进行预览。 - -### 安装 +### Installation [@visactor/vchart-theme](https://www.npmjs.com/package/@visactor/vchart-theme) @@ -28,9 +26,9 @@ npm install @visactor/vchart-theme yarn add @visactor/vchart-theme ``` -### 使用 +### Usage -注册 vchart-theme 中包含的主题并使用： +Register and use themes included in `vchart-theme`: ```typescript import { allThemeMap } from '@visactor/vchart-theme'; @@ -45,7 +43,7 @@ allThemeMap.forEach((theme, name) => { VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); ``` -如果你只需要使用某个特定主题，还可以从该包中引用该主题的 JSON 文件： +If you only need a specific theme, you can import its JSON file directly from the package: ```typescript import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; @@ -58,44 +56,44 @@ VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); ``` -该包主要包含以下主题 json 资源： +This package mainly includes the following theme JSON assets: - [light](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/light.json) - [dark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/dark.json) - [mobileLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/mobileLight.json) light theme for mobile devices - [mobileDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/mobileDark.json) dark theme for mobile devices -- [legacyLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/legacyLight.json) legacy light theme for simply legend style -- [legacyDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/legacyDark.json) legacy dark theme for simply legend style -- [vScreenVolcanoBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenVolcanoBlue.json) 大屏-火山蓝 -- [vScreenClean](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenClean.json) 大屏-清新蜡笔 -- [vScreenOutskirts](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenOutskirts.json) 大屏-郊外 -- [vScreenBlueOrange](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenBlueOrange.json) 大屏-汽车蓝橙 -- [vScreenFinanceYellow](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenFinanceYellow.json) 大屏-金融黄 -- [vScreenWenLvCyan](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenWenLvCyan.json) 大屏-文旅青 -- [vScreenElectricGreen](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenElectricGreen.json) 大屏-电力绿 -- [vScreenECommercePurple](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenECommercePurple.json) 大屏-电商紫 -- [vScreenRedBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenRedBlue.json) 大屏-红蓝 -- [vScreenPartyRed](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenPartyRed.json) 大屏-党建红 -- [semiDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/semiDesignLight.json) Semi Design - light -- [semiDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/semiDesignDark.json) Semi Design - dark -- [arcoDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/arcoDesignLight.json) Arco Design - light -- [arcoDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/arcoDesignDark.json) Arco Design - dark -- [ttPlatformLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/ttPlatformLight.json) TT Platform - light -- [ttPlatformDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/ttPlatformDark.json) TT Platform - dark -- [chartHubLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/chartHubLight.json) chartHub - light -- [veODesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLight.json) O Design - light -- [veODesignLightFinance](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightFinance.json) O Design - light - 金融行业色板 -- [veODesignLightGovernment](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightGovernment.json) O Design - light - 政府行业色板 -- [veODesignLightConsumer](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightConsumer.json) O Design - light - 大消费行业色板 -- [veODesignLightAutomobile](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightAutomobile.json) O Design - light - 汽车行业色板 -- [veODesignLightCulturalTourism](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightCulturalTourism.json) O Design - light - 文旅行业色板 -- [veODesignLightMedical](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightMedical.json) O Design - light - 医疗行业色板 -- [veODesignLightNewEnergy](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightNewEnergy.json) O Design - light - 新能源行业色板 -- [veODesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDark.json) O Design - dark -- [veODesignDarkFinance](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkFinance.json) O Design - dark - 金融行业色板 -- [veODesignDarkGovernment](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkGovernment.json) O Design - dark - 政府行业色板 -- [veODesignDarkConsumer](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkConsumer.json) O Design - dark - 大消费行业色板 -- [veODesignDarkAutomobile](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkAutomobile.json) O Design - dark - 汽车行业色板 -- [veODesignDarkCulturalTourism](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkCulturalTourism.json) O Design - dark - 文旅行业色板 -- [veODesignDarkMedical](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkMedical.json) O Design - dark - 医疗行业色板 -- [veODesignDarkNewEnergy](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkNewEnergy.json) O Design - dark - 新能源行业色板 +- [legacyLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/legacyLight.json) legacy light theme with simple legend style +- [legacyDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/legacyDark.json) legacy dark theme with simple legend style +- [vScreenVolcanoBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenVolcanoBlue.json) Large Screen – Volcano Blue +- [vScreenClean](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenClean.json) Large Screen – Clean Crayon +- [vScreenOutskirts](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenOutskirts.json) Large Screen – Outskirts +- [vScreenBlueOrange](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenBlueOrange.json) Large Screen – Automotive Blue-Orange +- [vScreenFinanceYellow](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenFinanceYellow.json) Large Screen – Finance Yellow +- [vScreenWenLvCyan](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenWenLvCyan.json) Large Screen – Culture & Tourism Cyan +- [vScreenElectricGreen](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenElectricGreen.json) Large Screen – Electric Green +- [vScreenECommercePurple](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenECommercePurple.json) Large Screen – E-commerce Purple +- [vScreenRedBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenRedBlue.json) Large Screen – Red-Blue +- [vScreenPartyRed](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenPartyRed.json) Large Screen – Party Red +- [semiDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/semiDesignLight.json) Semi Design – light +- [semiDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/semiDesignDark.json) Semi Design – dark +- [arcoDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/arcoDesignLight.json) Arco Design – light +- [arcoDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/arcoDesignDark.json) Arco Design – dark +- [ttPlatformLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/ttPlatformLight.json) TT Platform – light +- [ttPlatformDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/ttPlatformDark.json) TT Platform – dark +- [chartHubLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/chartHubLight.json) chartHub – light +- [veODesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLight.json) O Design – light +- [veODesignLightFinance](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightFinance.json) O Design – light – Financial industry palette +- [veODesignLightGovernment](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightGovernment.json) O Design – light – Government industry palette +- [veODesignLightConsumer](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightConsumer.json) O Design – light – Consumer industry palette +- [veODesignLightAutomobile](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightAutomobile.json) O Design – light – Automobile industry palette +- [veODesignLightCulturalTourism](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightCulturalTourism.json) O Design – light – Cultural tourism industry palette +- [veODesignLightMedical](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightMedical.json) O Design – light – Medical industry palette +- [veODesignLightNewEnergy](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignLightNewEnergy.json) O Design – light – New energy industry palette +- [veODesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDark.json) O Design – dark +- [veODesignDarkFinance](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkFinance.json) O Design – dark – Financial industry palette +- [veODesignDarkGovernment](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkGovernment.json) O Design – dark – Government industry palette +- [veODesignDarkConsumer](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkConsumer.json) O Design – dark – Consumer industry palette +- [veODesignDarkAutomobile](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkAutomobile.json) O Design – dark – Automobile industry palette +- [veODesignDarkCulturalTourism](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkCulturalTourism.json) O Design – dark – Cultural tourism industry palette +- [veODesignDarkMedical](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkMedical.json) O Design – dark – Medical industry palette +- [veODesignDarkNewEnergy](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/veODesignDarkNewEnergy.json) O Design – dark – New energy industry palette diff --git a/docs/assets/guide/zh/tutorial_docs/Theme/Apply_Theme.md b/docs/assets/guide/zh/tutorial_docs/Theme/Apply_Theme.md index e078533ff7..3c875db5b1 100644 --- a/docs/assets/guide/zh/tutorial_docs/Theme/Apply_Theme.md +++ b/docs/assets/guide/zh/tutorial_docs/Theme/Apply_Theme.md @@ -8,13 +8,13 @@ VChart 支持两种主题应用范围： ### 1. 全局应用 -通过 `ThemeManager.setCurrentTheme()` ( ) 方法可以设置全局主题，该方法会影响页面上所有已创建的图表实例以及后续创建的图表实例。 +通过 `ThemeManager.setCurrentTheme()` ( ) 方法可以设置全局主题，该方法会影响页面上所有已创建的图表实例以及后续创建的图表实例。 ### 2. 图表实例应用 通过图表 spec 的 `theme` 配置项或通过构造函数( )，可以为单个图表实例应用特定的主题，不会影响其他图表。 -也可以通过 setCurrentTheme 实例方法，对当前图表进行动态更新，前提是该主题通过 VChart.ThemeManager.registerTheme 注册过。 +也可以通过 setCurrentTheme 实例方法，对当前图表进行动态更新，前提是该主题通过 VChart.ThemeManager.registerTheme 注册过。 ```js vchart.setCurrentTheme('userTheme'); @@ -85,7 +85,6 @@ vchart.renderSync(); - #### 全局应用自定义主题 ```javascript livedemo @@ -93,16 +92,7 @@ vchart.renderSync(); const customTheme = { name: 'myCustomTheme', colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -162,16 +152,7 @@ vchart.renderSync(); // 定义自定义主题对象 const customTheme = { colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -213,16 +194,7 @@ vchart.renderSync(); // 定义并注册自定义主题 const customTheme = { colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { bar: { @@ -278,11 +250,13 @@ yarn add @visactor/vchart-theme ```javascript livedemo // 导入扩展主题包 -import { allThemeMap } from '@visactor/vchart-theme'; -import VChart from '@visactor/vchart'; +// Import extension theme package +// import { allThemeMap } from '@visactor/vchart-theme'; + +// The VChartTheme object is already mounted on the window object in the editor environment // 注册所有扩展主题 -allThemeMap.forEach((theme, name) => { +VChartTheme.allThemeMap.forEach((theme, name) => { VChart.ThemeManager.registerTheme(name, theme); }); @@ -314,8 +288,8 @@ vchart.renderSync(); ```javascript livedemo // 导入特定主题 -import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; -import VChart from '@visactor/vchart'; +const response = await fetch('https://www.unpkg.com/@visactor/vchart-theme@latest/public/vScreenVolcanoBlue.json'); +const vScreenVolcanoBlue = await response.json(); // 注册扩展主题 VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); @@ -357,16 +331,7 @@ const defaultTheme = VChart.ThemeManager.getDefaultTheme(); const extendedTheme = { ...defaultTheme, colorScheme: { - default: [ - '#FF6B6B', - '#4ECDC4', - '#45B7D1', - '#FFA07A', - '#98D8C8', - '#F7DC6F', - '#BB8FCE', - '#85C1E2' - ] + default: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2'] }, series: { ...defaultTheme.series, @@ -418,6 +383,8 @@ vchart.renderSync(); // 导入扩展主题(以下两行代码在开发环境中需要使用，vchart playground 中不需要) //import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; //import VChart from '@visactor/vchart'; +const response = await fetch('https://www.unpkg.com/@visactor/vchart-theme@latest/public/vScreenVolcanoBlue.json'); +const vScreenVolcanoBlue = await response.json(); // 注册原始主题 VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); @@ -570,17 +537,17 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); ``` - - ## 总结 本文介绍了 VChart 主题应用的完整指南： 1. **主题应用范围**： + - 全局应用：通过 `ThemeManager.setCurrentTheme()` 影响所有图表 - 图表实例应用：通过 spec 的 `theme` 配置项或实例的 `setCurrentTheme()` 方法 2. **主题类型**： + - **默认主题**：VChart 内置的 `light` 和 `dark` 主题，无需注册即可使用 - **自定义主题**：用户自己定义的主题配置对象 - **扩展包主题**：通过 `@visactor/vchart-theme` 包提供的丰富主题 @@ -592,4 +559,3 @@ vchart.renderSync(); - 对于需要基于现有主题进行微调的场景，使用主题扩展 通过灵活运用这些主题应用方式，您可以轻松实现图表的个性化定制和统一管理。 -