diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 917a5064..c6c07610 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -1,7 +1,6 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' -import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index e0d9fb7e..0bd33cfe 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index 8643426f..67ed6437 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -14,7 +14,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge} from '@/utils' const props = defineProps({ themeSetting: { @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any, index: number) => { value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [ { diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue index 19f4ef70..b2863a23 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue @@ -15,7 +15,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { useChartDataFetch } from '@/hooks' -import { isPreview } from '@/utils' +import { isPreview, colorGradientCustomMerge } from '@/utils' const props = defineProps({ themeSetting: { @@ -45,7 +45,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] props.chartConfig.option.series.forEach((value: any) => { value.lineStyle.shadowColor = themeColor[2] value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => { diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue index f5aa4f74..e1fefed9 100644 --- a/src/packages/components/Charts/Mores/WaterPolo/index.vue +++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue @@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js' import { CanvasRenderer } from 'echarts/renderers' import { GridComponent } from 'echarts/components' import config from './config' -import { isPreview, isString, isNumber } from '@/utils' +import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartDataFetch } from '@/hooks' @@ -44,7 +44,9 @@ watch( (newColor: keyof typeof chartColorsSearch) => { try { if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme] + const themeColor = + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] || + colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme] // 背景颜色 props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2] // 水球颜色 diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 29d9bc32..acb30a3e 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -1,4 +1,5 @@ import { + Add as AddIcon, Close as CloseIcon, Remove as RemoveIcon, Resize as ResizeIcon, @@ -52,6 +53,7 @@ import { ColorWand as ColorWandIcon, ArrowBack as ArrowBackIcon, ArrowForward as ArrowForwardIcon, + ArrowDown as ArrowDownIcon, Planet as PawIcon, Search as SearchIcon, Reload as ReloadIcon, @@ -103,6 +105,8 @@ import { } from '@vicons/carbon' const ionicons5 = { + // 新增 + AddIcon, // 帮助（问号） HelpOutlineIcon, // 添加 @@ -208,6 +212,8 @@ const ionicons5 = { ArrowBackIcon, // 前进 ArrowForwardIcon, + // 向下 + ArrowDownIcon, // 狗爪 PawIcon, // 搜索（放大镜） diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index ab4dbb1f..0d004df7 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -57,6 +57,7 @@ import { NProgress, NDatePicker, NGrid, + NGi, NGridItem, NList, NListItem, @@ -160,6 +161,7 @@ const naive = create({ NProgress, NDatePicker, NGrid, + NGi, NGridItem, NList, NListItem, diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts index d066d858..75e79e5c 100644 --- a/src/settings/chartThemes/index.ts +++ b/src/settings/chartThemes/index.ts @@ -31,38 +31,20 @@ export const chartColors = { // 默认主题 export const defaultTheme = 'dark' -// 主题色列表 -export type ChartColorsNameType = keyof typeof chartColorsName -export const chartColorsName = { - dark: '明亮', - customed: '暗淡', - macarons: '马卡龙', - walden: '蓝绿', - purplePassion: '深紫', - vintage: '复古', - chalk: '粉青', - westeros: '灰粉', - wonderland: '青草', - essos: '橘红', - shine: '深色', - roma: '罗马红' +// 默认展示的选择器颜色列表 +export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa'] + +// 自定义颜色 +export type CustomColorsType = { + id: string, + name: string, + color: string[] } -// 主题色列表 -export const chartColorsshow = { - dark: 'linear-gradient(to right, #4992ff 0%, #7cffb2 100%)', - customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)', - macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)', - walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)', - purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)', - vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)', - chalk: 'linear-gradient(to right, #fc97af 0%, #87f7cf 100%)', - westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)', - wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)', - essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)', - shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)', - roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)' -} +// 主题色列表, 自定义的颜色使用的是 UUID 作为标识，因为两者数据结构不一致 +export type ChartColorsNameType = keyof typeof chartColors + + // 渐变主题色列表（主色1、主色2、阴影、渐变1、渐变2） export const chartColorsSearch = { dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'], diff --git a/src/settings/chartThemes/themes/chalk.json b/src/settings/chartThemes/themes/chalk.json index 09ac9268..62f4b9ea 100644 --- a/src/settings/chartThemes/themes/chalk.json +++ b/src/settings/chartThemes/themes/chalk.json @@ -8,5 +8,6 @@ "#d4a4eb", "#d2f5a6", "#76f2f2" - ] + ], + "name": "粉青" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/customed.json b/src/settings/chartThemes/themes/customed.json index d29733a6..2a0ffa2c 100644 --- a/src/settings/chartThemes/themes/customed.json +++ b/src/settings/chartThemes/themes/customed.json @@ -9,5 +9,6 @@ "#fc8452", "#9a60b4", "#ea7ccc" - ] + ], + "name": "暗淡" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/dark.json b/src/settings/chartThemes/themes/dark.json index 59126d9b..887a6469 100644 --- a/src/settings/chartThemes/themes/dark.json +++ b/src/settings/chartThemes/themes/dark.json @@ -9,5 +9,6 @@ "#ff8a45", "#8d48e3", "#dd79ff" - ] + ], + "name": "明亮" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/essos.json b/src/settings/chartThemes/themes/essos.json index 18823d46..27d57201 100644 --- a/src/settings/chartThemes/themes/essos.json +++ b/src/settings/chartThemes/themes/essos.json @@ -6,5 +6,6 @@ "#ffb248", "#f2d643", "#ebdba4" - ] + ], + "name": "橘红" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/macarons.json b/src/settings/chartThemes/themes/macarons.json index a800789a..14a4aa0f 100644 --- a/src/settings/chartThemes/themes/macarons.json +++ b/src/settings/chartThemes/themes/macarons.json @@ -20,5 +20,6 @@ "#7eb00a", "#6f5553", "#c14089" - ] + ], + "name": "马卡龙" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/purple-passion.json b/src/settings/chartThemes/themes/purple-passion.json index d96e4104..91550499 100644 --- a/src/settings/chartThemes/themes/purple-passion.json +++ b/src/settings/chartThemes/themes/purple-passion.json @@ -6,5 +6,6 @@ "#71669e", "#cc70af", "#7cb4cc" - ] + ], + "name": "深紫" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/roma.json b/src/settings/chartThemes/themes/roma.json index 2b527f53..be5af4df 100644 --- a/src/settings/chartThemes/themes/roma.json +++ b/src/settings/chartThemes/themes/roma.json @@ -20,5 +20,6 @@ "#3cb371", "#d5b158", "#38b6b6" - ] + ], + "name": "罗马红" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/shine.json b/src/settings/chartThemes/themes/shine.json index 4c4e0f88..1b2d8529 100644 --- a/src/settings/chartThemes/themes/shine.json +++ b/src/settings/chartThemes/themes/shine.json @@ -8,5 +8,6 @@ "#339ca8", "#cda819", "#32a487" - ] + ], + "name": "深色" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/vintage.json b/src/settings/chartThemes/themes/vintage.json index 28190dd7..72957825 100644 --- a/src/settings/chartThemes/themes/vintage.json +++ b/src/settings/chartThemes/themes/vintage.json @@ -10,5 +10,6 @@ "#cc7e63", "#724e58", "#4b565b" - ] + ], + "name": "复古" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/walden.json b/src/settings/chartThemes/themes/walden.json index 2cf15ab9..37127fba 100644 --- a/src/settings/chartThemes/themes/walden.json +++ b/src/settings/chartThemes/themes/walden.json @@ -6,5 +6,6 @@ "#a0a7e6", "#c4ebad", "#96dee8" - ] + ], + "name": "蓝绿" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/westeros.json b/src/settings/chartThemes/themes/westeros.json index 257891de..6dc5d0b6 100644 --- a/src/settings/chartThemes/themes/westeros.json +++ b/src/settings/chartThemes/themes/westeros.json @@ -6,5 +6,6 @@ "#93b7e3", "#a5e7f0", "#cbb0e3" - ] + ], + "name": "灰粉" } \ No newline at end of file diff --git a/src/settings/chartThemes/themes/wonderland.json b/src/settings/chartThemes/themes/wonderland.json index 06c33113..c3739021 100644 --- a/src/settings/chartThemes/themes/wonderland.json +++ b/src/settings/chartThemes/themes/wonderland.json @@ -6,5 +6,6 @@ "#d0648a", "#f58db2", "#f2b3c9" - ] + ], + "name": "青草" } \ No newline at end of file diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 2050d59d..e53f1bc5 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -11,7 +11,7 @@ import { RequestParamsObjType } from '@/enums/httpEnum' import { PreviewScaleEnum } from '@/enums/styleEnum' -import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' +import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from '@/settings/chartThemes/index' // 项目数据枚举 export enum ProjectInfoEnum { @@ -79,6 +79,7 @@ export enum EditCanvasConfigEnum { WIDTH = 'width', HEIGHT = 'height', CHART_THEME_COLOR = 'chartThemeColor', + CHART_CUSTOM_THEME_COLOR_INFO = 'chartCustomThemeColorInfo', CHART_THEME_SETTING = 'chartThemeSetting', BACKGROUND = 'background', BACKGROUND_IMAGE = 'backgroundImage', @@ -121,9 +122,12 @@ export type EditCanvasConfigType = { [EditCanvasConfigEnum.HEIGHT]: number // 背景色 [EditCanvasConfigEnum.BACKGROUND]?: string + // 背景图片 [EditCanvasConfigEnum.BACKGROUND_IMAGE]?: string | null // 图表主题颜色 [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType + // 自定义图表主题颜色 + [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[] // 图表全局配置 [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType // 图表主题颜色 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 21015254..b5c13b32 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -126,6 +126,8 @@ export const useChartEditStore = defineStore({ selectColor: true, // chart 主题色 chartThemeColor: defaultTheme || 'dark', + // 自定义颜色列表 + chartCustomThemeColorInfo: undefined, // 全局配置 chartThemeSetting: globalThemeJson, // 适配方式 diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss index 5cb85f5f..ec6f2ccd 100644 --- a/src/styles/common/mixins/mixins.scss +++ b/src/styles/common/mixins/mixins.scss @@ -17,7 +17,7 @@ } @mixin deep() { - :deep(*) { + :deep() { @content; } } diff --git a/src/utils/style.ts b/src/utils/style.ts index 8e8605d3..34dce3fe 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -2,6 +2,7 @@ import Color from 'color' import { useDesignStore } from '@/store/modules/designStore/designStore' import { PickCreateComponentType } from '@/packages/index.d' import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index' type AttrType = PickCreateComponentType<'attr'> type StylesType = PickCreateComponentType<'styles'> @@ -86,6 +87,21 @@ export function darken(color: string, concentration: number) { return Color(color).darken(concentration).toString() } +/** + * * hsl 转成16进制 + * @param hsl + * @returns + */ +export function hslToHexa(hslString: string): string { + const color = Color(hslString) + return color.hexa() +} + +export function hslToHex(hslString: string): string { + const color = Color(hslString) + return color.hex() +} + /** * * 修改主题色 * @param themeName 主题名称 @@ -100,3 +116,48 @@ export const setHtmlTheme = (themeName?: string) => { const designStore = useDesignStore() e.setAttribute('data-theme', designStore.themeName) } + +/** + * * 合并基础颜色和自定义颜色 + * @param chartDefaultColors + * @param customColor + * @returns + */ +export const colorCustomMerge = (customColor?: CustomColorsType[]) => { + type FormateCustomColorType = { + [T: string]: { + color: string[] + name: string + } + } + const formateCustomColor: FormateCustomColorType = {} + customColor?.forEach(item => { + formateCustomColor[item.id] = { + color: item.color, + name: item.name + } + }) + return { ...formateCustomColor, ...chartColors } +} + +/** + * * 合并基础渐变颜色和自定义渐变颜色 + * @param customColor + */ +export const colorGradientCustomMerge = (customColor?: CustomColorsType[]) => { + type FormateGradientCustomColorType = { + [T: string]: string[] + } + const formateGradientCustomColor: FormateGradientCustomColorType = {} + customColor?.forEach(item => { + formateGradientCustomColor[item.id] = [ + item.color[0], + item.color[1], + fade(item.color[0], 0.3), + fade(item.color[0], 0.5), + fade(item.color[1], 0.5) + ] + }) + + return { ...formateGradientCustomColor, ...chartColorsSearch } +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue index 8313bda2..9891ad88 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue @@ -1,7 +1,16 @@ diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts new file mode 100644 index 00000000..0008d299 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts @@ -0,0 +1,3 @@ +import CreateColorRender from './index.vue' + +export { CreateColorRender } diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue new file mode 100644 index 00000000..7a842200 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue @@ -0,0 +1,274 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts new file mode 100644 index 00000000..20fe41a0 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions.ts @@ -0,0 +1,47 @@ +import { echartOptionProfixHandle } from '@/packages/public' + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] + +const seriesHandle = (color: string[]) => { + const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2 + const nums = [260, 251, 200, 334, 366, 256, 253] + + return color.map((item, index) => ({ + name: `data${index + 1}`, + type: 'bar', + data: nums.map((numsItem, numsi) => numHandle(numsItem, index)) + })) +} + +export const option = (color: string[]) => { + return echartOptionProfixHandle( + { + tooltip: { + trigger: 'axis', + showContent: false, + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: color.map((e, i) => `data${i + 1}`), + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + show: true, + type: 'value' + }, + series: seriesHandle(color || []) + }, + includes + ) +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts new file mode 100644 index 00000000..cf82cfcc --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts @@ -0,0 +1,3 @@ +import CreateColorRenderChart from './index.vue' + +export { CreateColorRenderChart } diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue new file mode 100644 index 00000000..fba33a6d --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts new file mode 100644 index 00000000..2a41700d --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/lineOptions.ts @@ -0,0 +1,72 @@ +import { echartOptionProfixHandle } from '@/packages/public' +import { graphic } from 'echarts/core' +import { fade, hslToHex } from '@/utils' + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] + +const seriesHandle = (color: string[]) => { + const numHandle = (numsi: number, i: number) => parseInt(`${numsi * Math.random()}`, 10) * 2 + const nums = [130, 251, 200, 334, 366, 456, 223] + + return color.map((item, index) => ({ + name: `data${index + 1}`, + type: 'line', + smooth: true, + lineStyle: { + width: 1, + type: 'solid' + }, + emphasis: { + focus: 'series' + }, + areaStyle: { + opacity: 0.8, + color: new graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: item + }, + { + offset: 0, + color: item + } + ]) + }, + showSymbol: false, + data: nums.reverse().map((numsItem, numsi) => numHandle(numsItem, index)) + })) +} + +export const option = (color: string[]) => { + return echartOptionProfixHandle( + { + tooltip: { + trigger: 'axis', + showContent: false, + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: color.map((e, i) => `data${i + 1}`), + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + show: true, + type: 'value' + }, + series: seriesHandle(color || []) + }, + includes + ) +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index 084b33ee..79a6c916 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -22,7 +22,7 @@ - +
- +
背景颜色 @@ -128,6 +128,7 @@ diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index eca587aa..800214cf 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -43,12 +43,14 @@ import { ChartEditStorageType } from '../../index.d' import { PreviewRenderGroup } from '../PreviewRenderGroup/index' import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' -import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils' import { useLifeHandler } from '@/hooks' // 初始化数据池 const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch() +const chartEditStore = useChartEditStore() const props = defineProps({ localStorageInfo: { @@ -63,10 +65,11 @@ const themeSetting = computed(() => { return chartThemeSetting }) + // 配置项 const themeColor = computed(() => { - const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor - return chartColors[chartThemeColor] + const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo) + return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor] }) // 组件渲染结束初始化数据池