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

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
@@ -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, [
{
@@ -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, [
{
@@ -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) => {
@@ -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]
// 水球颜色