From 4f9ddec260ae81d09459ba1dea17d03b0ef79fcb Mon Sep 17 00:00:00 2001 From: skie1997 Date: Fri, 15 Sep 2023 15:31:13 +0800 Subject: [PATCH 1/2] feat: reconfig color theme demo --- docs/assets/examples/en/theme/theme-style.md | 12 +- docs/assets/examples/zh/theme/theme-style.md | 10 +- .../en/tutorial_docs/Theme/Customize_Theme.md | 12 +- .../zh/tutorial_docs/Theme/Customize_Theme.md | 11 +- docs/assets/themes/colors.json | 135 ++++++++++++++++++ 5 files changed, 174 insertions(+), 6 deletions(-) create mode 100644 docs/assets/themes/colors.json diff --git a/docs/assets/examples/en/theme/theme-style.md b/docs/assets/examples/en/theme/theme-style.md index 75ebbf5335..5f3c2f3da8 100644 --- a/docs/assets/examples/en/theme/theme-style.md +++ b/docs/assets/examples/en/theme/theme-style.md @@ -10,7 +10,6 @@ option: barChart#theme # Deffient Style of Theme Registration and Switching ## Live Demo - ```javascript livedemo /** step1: perpare */ // step1.1: mock spec @@ -169,12 +168,21 @@ for (const colorKey in colorTheme) { }; // register theme VChart.ThemeManager.registerTheme(colorKey, theme[colorName]); - // option in select component + // option in select component const option = document.createElement("option"); option.value = colorKey; option.text = colorName; select.appendChild(option); } +// append select about vchart default theme +const optionLight = document.createElement("option"); +optionLight.value = 'light'; +optionLight.text = 'light(VChart内置)'; +select.appendChild(optionLight); +const optionDark = document.createElement("option"); +optionDark.value = 'dark'; +optionDark.text = 'dark(VChart内置)'; +select.appendChild(optionDark); // step2.4: init theme VChart.ThemeManager.setCurrentTheme("volcanoBlue"); diff --git a/docs/assets/examples/zh/theme/theme-style.md b/docs/assets/examples/zh/theme/theme-style.md index 8f116668a6..802f497ce4 100644 --- a/docs/assets/examples/zh/theme/theme-style.md +++ b/docs/assets/examples/zh/theme/theme-style.md @@ -10,7 +10,6 @@ option: barChart#theme # 不同风格的主题注册、切换 ## 代码演示 - ```javascript livedemo /** step1: perpare */ // step1.1: mock spec @@ -175,6 +174,15 @@ for (const colorKey in colorTheme) { option.text = colorName; select.appendChild(option); } +// append select about vchart default theme +const optionLight = document.createElement("option"); +optionLight.value = 'light'; +optionLight.text = 'light(VChart内置)'; +select.appendChild(optionLight); +const optionDark = document.createElement("option"); +optionDark.value = 'dark'; +optionDark.text = 'dark(VChart内置)'; +select.appendChild(optionDark); // step2.4: init theme VChart.ThemeManager.setCurrentTheme("volcanoBlue"); diff --git a/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md b/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md index 36b6527bd9..f615f47ce5 100644 --- a/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md +++ b/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md @@ -431,7 +431,7 @@ For the big screen, which is heavy on performance and light on analysis, the the According to the design of the effect, the style of the chart is divided into three modules: "Color Palette", "Meta Style" and "Component Style". -- The 'color palette' is distilled from business deposits and is open for your reference here: [https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json). +- The 'color palette' is distilled from business deposits and is open for your reference here: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json). - "Mark Style" is a gradient effect, which is configured by [Mark Gradient Configuration](../../../option/barChart#bar.style.fill). @@ -604,6 +604,15 @@ for (const colorKey in colorTheme) { option.text = colorName; select.appendChild(option); } +// append select about vchart default theme +const optionLight = document.createElement("option"); +optionLight.value = 'light'; +optionLight.text = 'light(VChart内置)'; +select.appendChild(optionLight); +const optionDark = document.createElement("option"); +optionDark.value = 'dark'; +optionDark.text = 'dark(VChart内置)'; +select.appendChild(optionDark); // step2.4: init theme VChart.ThemeManager.setCurrentTheme("volcanoBlue"); @@ -625,7 +634,6 @@ vchart.renderAsync(); window['vchart'] = vchart; ``` - ## Conclusion In this chapter, we learned about theme and color palette configuration, how to use custom themes to set personalized styles for charts, and introduced two ways to register custom themes. In addition, we also learned how to dynamically update chart themes as needed. With these skills, you will be better able to use VChart to display beautiful and easy-to-understand data visualization effects. We hope this tutorial helps you get started quickly, making data visualization simpler and more fun! \ No newline at end of file diff --git a/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md b/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md index d134d80da3..a50122a7e7 100644 --- a/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md +++ b/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md @@ -431,7 +431,7 @@ vchart.renderAsync().then(() => { 根据效果的设计，图表的样式分为「色板」、「图元样式」、「组件样式」这三个模块。 -- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json)。 +- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json)。 - 「图元样式」为渐变效果，通过[图元渐变配置](../../../option/barChart#bar.style.fill)实现。 - 「组件样式」则通过各个组件的具体配置实现。 @@ -603,6 +603,15 @@ for (const colorKey in colorTheme) { option.text = colorName; select.appendChild(option); } +// append select about vchart default theme +const optionLight = document.createElement("option"); +optionLight.value = 'light'; +optionLight.text = 'light(VChart内置)'; +select.appendChild(optionLight); +const optionDark = document.createElement("option"); +optionDark.value = 'dark'; +optionDark.text = 'dark(VChart内置)'; +select.appendChild(optionDark); // step2.4: init theme VChart.ThemeManager.setCurrentTheme("volcanoBlue"); diff --git a/docs/assets/themes/colors.json b/docs/assets/themes/colors.json new file mode 100644 index 0000000000..59fddedf60 --- /dev/null +++ b/docs/assets/themes/colors.json @@ -0,0 +1,135 @@ +{ + "volcanoBlue": { + "name": "火山蓝", + "colors": [ + "#006EFF", + "#00E5E5", + "#2E55EA", + "#B8E7FE", + "#00D689", + "#B7F9F5", + "#FBCC71", + "#F46E50" + ] + }, + "clean": { + "name": "清新蜡笔", + "colors": [ + "#fd7f6f", + "#7eb0d5", + "#b2e061", + "#bd7ebe", + "#ffb55a", + "#ffee65", + "#beb9db", + "#fdcce5", + "#8bd3c7" + ] + }, + "outskirts": { + "name": "郊外", + "colors": [ + "#cfcfcf", + "#ffbc79", + "#a2c8ec", + "#898989", + "#c85200", + "#5f9ed1", + "#595959", + "#ababab", + "#ff800e", + "#006ba4" + ] + }, + "blueOrange": { + "name": "汽车蓝橙", + "colors": [ + "#4ABEFF", + "#E97A4B", + "#A0D8FF", + "#FFB99C", + "#91A9B1", + "#E9A94B", + "#4BE99D", + "#6F86FF" + ] + }, + "financeYellow": { + "name": "金融黄", + "colors": [ + "#FFCF67", + "#FF9254", + "#D7D7D7", + "#E1C396", + "#FFB99C", + "#C5BEB4", + "#96B9A8", + "#C59C7F" + ] + }, + "wenLvCyan": { + "name": "文旅青", + "colors": [ + "#32E2CD", + "#FFCE70", + "#B03C3C", + "#BEEAE4", + "#D66E41", + "#E1E1E1", + "#3BC080", + "#435BD8" + ] + }, + "electricGreen": { + "name": "电力绿", + "colors": [ + "#08FEF3", + "#FF7925", + "#FBCC71", + "#2EC8EA", + "#B8FEF1", + "#F9CFB7", + "#D43A30", + "#5FCEA6" + ] + }, + "eCommercePurple": { + "name": "电商紫", + "colors": [ + "#734AFF", + "#FF6960", + "#5484FF", + "#CDC4EC", + "#EAC4C2", + "#34CECC", + "#FFB054", + "#C13C5C" + ] + }, + "redBlue": { + "name": "红蓝", + "colors": [ + "#006EFF", + "#CC3B3B", + "#B8E5FE", + "#214FFF", + "#FFCFCF", + "#00E5E5", + "#B7F9F5", + "#FBCC71" + ] + }, + "partyRed": { + "name": "党建红", + "colors": [ + "#E82F2F", + "#FF9635", + "#D7D7D7", + "#E19B96", + "#FFB99C", + "#C5BEB4", + "#B99696", + "#C59C7F" + ] + } +} \ No newline at end of file From a1b0455c011ca6dfdfec30b80720acf1befc3d79 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Fri, 15 Sep 2023 16:12:29 +0800 Subject: [PATCH 2/2] chore: add default theme info --- docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md | 6 +++++- docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md b/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md index f615f47ce5..43257382a0 100644 --- a/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md +++ b/docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md @@ -431,13 +431,17 @@ For the big screen, which is heavy on performance and light on analysis, the the According to the design of the effect, the style of the chart is divided into three modules: "Color Palette", "Meta Style" and "Component Style". -- The 'color palette' is distilled from business deposits and is open for your reference here: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json). +- The 'color palette' is distilled from business deposits and is open for your reference here: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json). - "Mark Style" is a gradient effect, which is configured by [Mark Gradient Configuration](../../../option/barChart#bar.style.fill). - Component styles are realized through the specific configuration of each component. Eventually, these configurations are written into the theme, and then through the theme registration and switching to achieve different scenarios of the chart style effect. +Of course, VChart also has two sets of built-in themes that users can use without registering. Their specific configurations are as follows: +- dark: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json) +- light: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json) + The following example demonstrates the above process: ```javascript livedemo diff --git a/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md b/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md index a50122a7e7..664636cfc7 100644 --- a/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md +++ b/docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md @@ -431,12 +431,16 @@ vchart.renderAsync().then(() => { 根据效果的设计，图表的样式分为「色板」、「图元样式」、「组件样式」这三个模块。 -- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json)。 +- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json)。 - 「图元样式」为渐变效果，通过[图元渐变配置](../../../option/barChart#bar.style.fill)实现。 - 「组件样式」则通过各个组件的具体配置实现。 最终将这些配置写入主题中，再通过主题的注册和切换即可实现不同场景下的图表样式效果。 +当然，VChart内部也内置了两套主题，用户无需注册就可以使用，它们的具体配置如下： +- dark: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json) +- light: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json) + 下面这个示例展示了上述过程： ```javascript livedemo