From 43844c834e8b7fde4f344196138f96f16b75c057 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 10 Mar 2022 21:35:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B8=90=E5=8F=98?=
=?UTF-8?q?=E8=89=B2=E6=A0=B9=E6=8D=AE=E5=85=A8=E5=B1=80=E5=8F=98=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Charts/Lines/LineCommon/config.vue | 7 ++++--
.../Charts/Lines/LineCommon/index.vue | 21 +++++++++++++----
src/settings/chartThemes/index.ts | 23 +++++++++++++++----
.../components/EditRange/index.vue | 3 ++-
4 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
index 25b2aae8..4752a9c8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@@ -44,7 +44,7 @@
/>
</SettingItem>
</SettingItemBox>
- <SettingItemBox name="阴影">
+ <SettingItemBox name="阴影" :alone="true">
<SettingItem name="颜色">
<n-color-picker
size="small"
@@ -52,7 +52,10 @@
v-model:value="item.lineStyle.shadowColor"
/>
</SettingItem>
- <SettingItem name="控制">
+
+ </SettingItemBox>
+ <SettingItemBox name="设置">
+ <SettingItem name="阴影">
<n-button
size="small"
@click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 4a977edd..6bc9e27d 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -1,9 +1,9 @@
<template>
- <VChart :theme="themeColor" :option="option" autoresize />
+ <VChart :theme="themeColor" :option="option.options" autoresize />
</template>
<script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, watch, reactive, watchEffect } from 'vue';
import VChart from 'vue-echarts'
import { use, graphic } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@@ -12,6 +12,7 @@ import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
const props = defineProps({
themeSetting: {
@@ -37,9 +38,19 @@ use([
])
const chartEditStore = useChartEditStore()
+const option = reactive({
+ options: {}
+})
-const option = computed(() => {
- console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
- return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+watchEffect(()=> {
+ option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// 渐变色处理
+watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: string) => {
+ const themeColor = (chartColorsSearch as any)[newColor] || chartColorsSearch[defaultTheme]
+ props.chartConfig.option.series[0].lineStyle.color.colorStops[0].color = themeColor[0]
+ props.chartConfig.option.series[0].lineStyle.color.colorStops[1].color = themeColor[1]
+ option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>
diff --git a/src/settings/chartThemes/index.ts b/src/settings/chartThemes/index.ts
index dac2d1f7..d472bdad 100644
--- a/src/settings/chartThemes/index.ts
+++ b/src/settings/chartThemes/index.ts
@@ -25,7 +25,7 @@ export const chartColors = {
wonderland,
essos,
shine,
- roma,
+ roma
}
// 默认主题
@@ -45,7 +45,7 @@ export const chartColorsName = {
westeros: '灰粉',
essos: '橘红',
shine: '深色',
- roma: '罗马红',
+ roma: '罗马红'
}
// 主题色列表
@@ -61,9 +61,24 @@ export const chartColorsshow = {
westeros: 'linear-gradient(to right, #516b91 0%, #edafda 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%)',
+ roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
+}
+// 主题色列表
+export const chartColorsSearch = {
+ dark: ['#4992ff', '#7cffb2'],
+ customed: ['#5470c6', '#91cc75'],
+ macarons: ['#2ec7c9', '#b6a2de'],
+ walden: ['#3fb1e3', '#6be6c1'],
+ wonderland: ['#4ea397', '#22c3aa'],
+ purplePassion: ['#9b8bba', '#e098c7'],
+ vintage: ['#d87c7c', '#919e8b'],
+ chalk: ['#fc97af', '#d4a4eb'],
+ westeros: ['#516b91', '#edafda'],
+ essos: ['#893448', '#d95850'],
+ shine: ['#c12e34', '#0098d9'],
+ roma: ['#e01f54', '#5e4ea5'],
}
// 默认主题详细配置
export type GlobalThemeJsonType = typeof themeJson
-export const globalThemeJson = themeJson
\ No newline at end of file
+export const globalThemeJson = themeJson
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 911079e8..086b1a50 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -35,7 +35,6 @@ const rangeStyle = computed(() => {
const scale = {
transform: `scale(${getEditCanvas.value.scale})`
}
- console.log(scale)
// 设置背景色和图片背景
const background = getEditCanvasConfig.value.background
const backgroundImage = getEditCanvasConfig.value.backgroundImage
@@ -77,5 +76,7 @@ const rangeModelStyle = computed(() => {
top: 0;
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0);
+ background-color: greenyellow;
+ opacity: .2;
}
</style>