github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 处理渐变色和自定义色的交互

Browse Source
This commit is contained in:
奔跑的面条 2023-02-26 23:34:40 +08:00
parent 2abf83b6bc
commit 9222dec9f2
7 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
View File

@ -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, [
{

6
src/packages/components/Charts/Lines/LineGradients/index.vue
View File

@ -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, [
{

6
src/packages/components/Charts/Lines/LineLinearSingle/index.vue
View File

@ -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) => {

6
src/packages/components/Charts/Mores/WaterPolo/index.vue
View File

@ -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]
// 水球颜色

36
src/utils/style.ts
View File

@ -2,7 +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, CustomColorsType } from '@/settings/chartThemes/index'
import { chartColors, chartColorsSearch, CustomColorsType } from '@/settings/chartThemes/index'
type AttrType = PickCreateComponentType<'attr'>
type StylesType = PickCreateComponentType<'styles'>
@ -93,12 +93,12 @@ export function darken(color: string, concentration: number) {
* @returns
*/
export function hslToHexa(hslString: string): string {
const color = Color(hslString);
const color = Color(hslString)
return color.hexa()
}
export function hslToHex(hslString: string): string {
const color = Color(hslString);
const color = Color(hslString)
return color.hex()
}
@ -119,9 +119,9 @@ export const setHtmlTheme = (themeName?: string) => {
/**
* * 合并基础颜色和自定义颜色
* @param chartDefaultColors
* @param customColor
* @returns
* @param chartDefaultColors
* @param customColor
* @returns
*/
export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
type FormateCustomColorType = {
@ -138,4 +138,26 @@ export const colorCustomMerge = (customColor?: CustomColorsType[]) => {
}
})
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 }
}

49
src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
View File

@ -199,21 +199,34 @@ const createColor = () => {
// 删除
const deleteHandle = (index: number) => {
goDialog({
message: `是否删除此颜色？`,
onPositiveCallback: () => {
colorList.splice(index, 1)
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
nextTick(() => {
if (index) {
selectHandle(colorList[index - 1])
} else {
// 已清空
selectColor.selectInfo = undefined
}
})
}
})
const positiveHandle = () => {
colorList.splice(index, 1)
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
nextTick(() => {
if (index) {
selectHandle(colorList[index - 1])
} else {
// 已清空
selectColor.selectInfo = undefined
}
})
}
if (updateColor.value !== undefined) {
goDialog({
message: '当前有变动未保存，是否直接放弃修改？',
onPositiveCallback: () => {
updateColor.value = undefined
positiveHandle()
}
})
} else {
goDialog({
message: `是否删除此颜色？`,
onPositiveCallback: () => {
positiveHandle()
}
})
}
}
// 存储更新数据的值
@ -226,13 +239,17 @@ const saveHandle = () => {
if (!updateColor.value) return
const index = colorList.findIndex(item => item.id === updateColor.value?.id)
if (index !== -1) {
window.$message.success('颜色应用成功！')
const updateColorPrefix = cloneDeep({ ...updateColor.value, name: updateColor.value.name || '未定义' })
colorList.splice(index, 1, updateColorPrefix)
window.$message.success('颜色应用成功！')
updateColor.value = undefined
const selectTheme = chartEditStore.getEditCanvasConfig.chartThemeColor
// 变换主题强制渐变色更新
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, 'dark')
// 存储到全局数据中
nextTick(() => {
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO, cloneDeep(colorList))
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, selectTheme)
})
} else {
window.$message.error('颜色应用失败！')

9
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -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]
})
// 组件渲染结束初始化数据池