feat: 新增自定义颜色弹窗

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,
   ChevronUpOutline as ChevronUpOutlineIcon,
@@ -101,6 +103,8 @@ import {
 } from '@vicons/carbon'
 
 const ionicons5 = {
+  // 新增
+  AddIcon,
   // 帮助（问号）
   HelpOutlineIcon,
   // 添加
@@ -206,6 +210,8 @@ const ionicons5 = {
   ArrowBackIcon,
   // 前进
   ArrowForwardIcon,
+  // 向下
+  ArrowDownIcon,
   // 狗爪
   PawIcon,
   // 搜索（放大镜）

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,

src/settings/chartThemes/index.ts

@@ -31,6 +31,9 @@ export const chartColors = {
 // 默认主题
 export const defaultTheme = 'dark'
 
+// 默认展示的选择器颜色列表
+export const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
+
 // 主题色列表
 export type ChartColorsNameType = keyof typeof chartColorsName
 export const chartColorsName = {
@@ -48,21 +51,6 @@ export const chartColorsName = {
   roma: '罗马红'
 }
 
-// 主题色列表
-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%)'
-}
 // 渐变主题色列表（主色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)'],

src/styles/common/mixins/mixins.scss

@@ -17,7 +17,7 @@
 }
 
 @mixin deep() {
-  :deep(*) {
+  :deep() {
     @content;
   }
 }

src/utils/style.ts

@@ -86,6 +86,16 @@ export function darken(color: string, concentration: number) {
   return Color(color).darken(concentration).toString()
 }
 
+/**
+ * hsl 转成16进制
+ * @param hsl
+ * @returns
+ */
+export function hslToHex(hslString: string): string {
+  const color = Color(hslString);
+  return color.hex()
+}
+
 /**
  * * 修改主题色
  * @param themeName 主题名称

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="go-chart-theme-color">
+    <n-card class="card-box" size="small" hoverable embedded @click="createColorHandle">
+      <n-text class="go-flex-items-center">
+        <span>自定义颜色</span>
+        <n-icon size="16">
+          <add-icon></add-icon>
+        </n-icon>
+      </n-text>
+    </n-card>
+
     <n-card
       v-for="(value, key) in chartColors"
       :key="key"
@@ -19,25 +28,36 @@
           :style="{ backgroundColor: colorItem }"
         ></span>
       </div>
-      <div class="theme-bottom" :style="{ backgroundImage: chartColorsshow[key] }"></div>
+      <div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(value) }"></div>
     </n-card>
+    <!-- 自定义颜色 modal -->
+    <create-color v-model:modelShow="createColorModelShow"></create-color>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, chartColorsName, chartColorsshow, ChartColorsNameType } from '@/settings/chartThemes/index'
+import { chartColors, chartColorsName, ChartColorsNameType } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import cloneDeep from 'lodash/cloneDeep'
+import { loadAsyncComponent } from '@/utils'
 import { icon } from '@/plugins'
 
-const { SquareIcon } = icon.ionicons5
+const CreateColor = loadAsyncComponent(() => import('../CreateColor/index.vue'))
+
+const { SquareIcon, AddIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
 // 全局颜色
 const designStore = useDesignStore()
+const createColorModelShow = ref(false)
+
+// 创建颜色
+const createColorHandle = () => {
+  createColorModelShow.value = true
+}
 
 // 颜色
 const themeColor = computed(() => {
@@ -49,6 +69,11 @@ const selectName = computed(() => {
   return chartEditStore.getEditCanvasConfig.chartThemeColor
 })
 
+// 底色
+const colorBackgroundImage = (item: { color: string[] }) => {
+  return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
+}
+
 // 获取用来展示的色号
 const fetchShowColors = (colors: Array<string>) => {
   return cloneDeep(colors).splice(0, 6)
@@ -62,9 +87,9 @@ const selectTheme = (theme: ChartColorsNameType) => {
 
 <style lang="scss" scoped>
 $radius: 10px;
+$itemRadius: 6px;
 
-@include go(chart-theme-color) {
+@include go('chart-theme-color') {
-  padding-top: 20px;
   .card-box {
     cursor: pointer;
     margin-top: 15px;
@@ -72,12 +97,13 @@ $radius: 10px;
     @include fetch-bg-color('background-color4-shallow');
     border-radius: $radius;
     overflow: hidden;
+
     &.selected {
-      border: 1px solid v-bind('themeColor');
+      border: 2px solid v-bind('themeColor');
       border-bottom: 1px solid rgba(0, 0, 0, 0);
     }
     &:first-child {
-      margin-top: 0;
+      margin-top: 5px;
     }
     .go-flex-items-center {
       justify-content: space-between;
@@ -87,7 +113,7 @@ $radius: 10px;
       display: inline-block;
       width: 20px;
       height: 20px;
-      border-radius: $radius;
+      border-radius: $itemRadius;
     }
     .theme-bottom {
       position: absolute;
@@ -95,7 +121,6 @@ $radius: 10px;
       bottom: 0px;
       width: 100%;
       height: 3px;
-      background-image: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%);
     }
   }
 }

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <n-modal class="go-chart-create-color" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 720px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <div class="create-content">
+        <div class="create-color-setting-box">
+          <create-color-render
+            v-if="selectColorId"
+            :selectColor="selectColor.selectInfo"
+            @updateColor="updateColorHandle"
+          ></create-color-render>
+          <!-- 无数据 -->
+          <div v-else class="no-data go-flex-center">
+            <img :src="noData" alt="暂无数据" />
+            <n-text :depth="3">暂未选择自定义颜色</n-text>
+          </div>
+        </div>
+        <div class="color-list-box">
+          <n-timeline class="pond-item-timeline" style="width: 20px">
+            <n-timeline-item type="info"> </n-timeline-item>
+            <n-timeline-item type="success"></n-timeline-item>
+          </n-timeline>
+          <div class="color-list">
+            <n-space>
+              <!-- 新增 -->
+              <n-button
+                class="create-btn"
+                :class="{ 'is-full': !!!selectColorId }"
+                type="primary"
+                :ghost="!!!selectColorId"
+                :secondary="!!selectColorId"
+                @click="createColor"
+              >
+                <span> 创建 </span>
+                <template #icon>
+                  <n-icon>
+                    <duplicate-outline-icon></duplicate-outline-icon>
+                  </n-icon>
+                </template>
+              </n-button>
+              <n-badge v-if="selectColorId" :show="updateColor !== undefined" dot>
+                <n-button class="create-btn" type="info" secondary @click="saveHandle">
+                  <span> 应用数据 </span>
+                  <template #icon>
+                    <n-icon>
+                      <arrow-down-icon></arrow-down-icon>
+                    </n-icon>
+                  </template>
+                </n-button>
+              </n-badge>
+            </n-space>
+            <n-divider style="margin: 10px 0"></n-divider>
+            <n-text v-if="!selectColorId" class="not-data-text" :depth="3">
+              暂无自定义颜色，
+              <n-a @click="createColor">立即创建</n-a>
+            </n-text>
+            <!-- 列表 -->
+            <div class="color-card-box" v-for="(item, index) in colorList" :key="item.id">
+              <n-card
+                class="color-card"
+                :class="{ selected: item.id === selectColorId }"
+                size="small"
+                hoverable
+                embedded
+                @click="selectHandle(item)"
+              >
+                <div class="go-flex-items-center">
+                  <n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis>
+                  <span
+                    class="theme-color-item"
+                    v-for="colorItem in item.color"
+                    :key="colorItem"
+                    :style="{ backgroundColor: colorItem }"
+                  ></span>
+                </div>
+                <div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(item) }"></div>
+              </n-card>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-button text :disabled="item.id === selectColorId" @click="deleteHandle(index)">
+                    <n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3">
+                      <trash-icon></trash-icon>
+                    </n-icon>
+                  </n-button>
+                </template>
+                删除自定义颜色
+              </n-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="end">
+          <n-button @click="closeHandle">操作完成</n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, reactive } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateColorRender } from '../CreateColorRender/index'
+import noData from '@/assets/images/canvas/noData.png'
+import { getUUID, goDialog } from '@/utils'
+import { icon } from '@/plugins'
+import { UvIndex } from '@vicons/carbon'
+
+const props = defineProps({
+  modelShow: Boolean
+})
+const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
+const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5
+
+type ColorType = {
+  id: string
+  name: string
+  color: string[]
+}
+
+// 默认颜色组
+const defaultColor: ColorType = {
+  id: getUUID(),
+  name: '未命名',
+  color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf']
+}
+const modelShowRef = ref(false)
+// 颜色列表
+let colorList = reactive<Array<ColorType>>([])
+// 子组件更新过的数据
+const updateColor = ref<ColorType | undefined>(undefined)
+// 所选颜色
+const selectColor = reactive<{
+  selectInfo: ColorType | undefined
+}>({
+  selectInfo: colorList[0]
+})
+
+watch(
+  () => props.modelShow,
+  newValue => {
+    modelShowRef.value = newValue
+  }
+)
+
+const selectColorId = computed(() => selectColor?.selectInfo?.id)
+
+// 选择
+const selectHandle = (item: ColorType) => {
+  if (item.id === selectColorId.value) return
+  if (updateColor.value !== undefined) {
+    goDialog({
+      message: '当前有变动未保存，是否直接放弃修改？',
+      onPositiveCallback: () => {
+        updateColor.value = undefined
+        selectColor.selectInfo = item
+      }
+    })
+  } else {
+    selectColor.selectInfo = item
+  }
+}
+
+// 创建
+const createColor = () => {
+  const positiveHandle = () => {
+    const newData = { ...cloneDeep(defaultColor), id: getUUID() }
+    selectColor.selectInfo = newData
+    colorList.push(newData)
+    selectHandle(newData)
+  }
+  if (updateColor.value !== undefined) {
+    goDialog({
+      message: '当前有变动未保存，是否直接放弃修改？',
+      onPositiveCallback: () => {
+        updateColor.value = undefined
+        positiveHandle()
+      }
+    })
+  } else {
+    positiveHandle()
+  }
+}
+
+// 删除
+const deleteHandle = (index: number) => {
+  colorList.splice(index, 1)
+}
+
+// 存储更新数据的值
+const updateColorHandle = (newColor: ColorType) => {
+  updateColor.value = newColor
+}
+
+// 保存数据
+const saveHandle = () => {
+  if (!updateColor.value) return
+  const index = colorList.findIndex(item => item.id === updateColor.value?.id)
+  if (index !== -1) {
+    colorList.splice(index, 1, cloneDeep(updateColor.value))
+    window.$message.success('颜色应用成功！')
+    updateColor.value = undefined
+  } else {
+    window.$message.error('颜色应用失败！')
+  }
+}
+
+// 取消
+const closeHandle = () => {
+  colorList.splice(0, colorList.length)
+  selectColor.selectInfo = undefined
+  emit('update:modelShow', false)
+}
+
+// 底色
+const colorBackgroundImage = (item: ColorType) => {
+  return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
+}
+</script>
+
+<style scoped lang="scss">
+$height: 600px;
+$listWidth: 280px;
+$color-radius: 8px;
+$color-item-radius: 4px;
+
+@include go('chart-create-color') {
+  .create-content {
+    display: flex;
+    /* 左侧 */
+    .create-color-setting-box {
+      flex: 1;
+      .no-data {
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        img {
+          width: 200px;
+        }
+      }
+    }
+    /* 列表 */
+    .color-list-box {
+      display: flex;
+      padding-top: 10px;
+      margin-right: 5px;
+      .pond-item-timeline > .n-timeline-item {
+        &:first-child {
+          height: $height;
+        }
+      }
+      .color-list {
+        width: $listWidth;
+        position: relative;
+        padding-right: 8px;
+        .create-btn {
+          width: 133px;
+          &.is-full {
+            width: 280px;
+          }
+        }
+        .not-data-text {
+          display: block;
+          text-align: center;
+        }
+        .color-card-box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 15px;
+          &:first-child {
+            margin-top: 0;
+          }
+          .color-card {
+            overflow: hidden;
+            cursor: pointer;
+            border-radius: $color-radius;
+            border: 2px solid rgba(0, 0, 0, 0);
+            border-bottom: 1px solid rgba(0, 0, 0, 0);
+            @include fetch-bg-color('background-color4-shallow');
+
+            @include deep() {
+              & > .n-card__content {
+                padding: 7px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+              }
+            }
+            &.selected {
+              border: 2px solid var(--n-color-target);
+              border-bottom: 1px solid rgba(0, 0, 0, 0);
+            }
+            .go-flex-items-center {
+              justify-content: space-between;
+              margin-top: -4px;
+            }
+            .theme-color-item {
+              display: inline-block;
+              width: 16px;
+              height: 16px;
+              border-radius: $color-item-radius;
+            }
+            .theme-bottom {
+              position: absolute;
+              left: 0;
+              bottom: 0px;
+              width: 100%;
+              height: 3px;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  @include deep() {
+    & > .n-card__content {
+      padding-right: 0;
+    }
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.ts

@@ -0,0 +1,3 @@
+import CreateColorRender from './index.vue'
+
+export { CreateColorRender }

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="create-color-setting" v-if="editColor">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true">
+      <n-space justify="space-between">
+        <!-- 名称 -->
+        <n-input-group>
+          <n-input-group-label>名称:</n-input-group-label>
+          <n-input class="create-color-name" v-model:value="editColor.name" @change="titleChangeHandle"/>
+        </n-input-group>
+        <n-tag type="warning">底部图表仅展示 7 条数据</n-tag>
+      </n-space>
+      <!-- 颜色 -->
+      <n-scrollbar style="max-height: 132px">
+        <div class="color-list-box go-mt-3" :x-gap="12" :y-gap="12" :cols="4">
+          <div class="color-list-item" v-for="(item, index) in editColor.color" :key="index">
+            <div class="go-flex-items-center" :class="{ select: index === targetColor.index }">
+              <n-color-picker
+                style="width: 95px"
+                v-model:value="editColor.color[index]"
+                :show-preview="true"
+                :modes="['hex']"
+                @complete="completeHandle($event, index)"
+              />
+              <div v-show="index > 5">
+                <n-tooltip trigger="hover">
+                  <template #trigger>
+                    <n-icon class="go-ml-1 go-cursor-pointer" size="16" :depth="3" @click="deleteColor(index)">
+                      <trash-icon></trash-icon>
+                    </n-icon>
+                  </template>
+                  删除颜色
+                </n-tooltip>
+              </div>
+            </div>
+          </div>
+          <div>
+            <n-button type="primary" secondary @click="addColor">
+              <div class="go-flex-items-center">
+                <span class="go-mr-4">添加</span>
+                <n-icon size="16">
+                  <add-icon></add-icon>
+                </n-icon>
+              </div>
+            </n-button>
+          </div>
+        </div>
+      </n-scrollbar>
+    </n-card>
+
+    <!-- 扩展色 -->
+    <n-card class="go-mt-3" :bordered="false" role="dialog" size="small" aria-modal="true">
+      <n-text>扩展色：</n-text>
+      <n-divider style="margin: 10px 0"></n-divider>
+      <n-space :size="[4, 0]" justify="center">
+        <div
+          class="color-computed-item"
+          v-for="(item, index) in expandColorList"
+          :key="index"
+          @click="selectExpandColor(item)"
+        >
+          <div class="n-color-picker-checkboard"></div>
+          <div :style="getRenderBackgroundColor(item)"></div>
+        </div>
+      </n-space>
+    </n-card>
+
+    <!-- 展示图表 -->
+    <create-color-render-chart :color="cloneDeep(editColor.color).splice(0, 7)"></create-color-render-chart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch, computed, reactive, nextTick } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { darken, lighten, fade, hslToHex, loadAsyncComponent } from '@/utils'
+import { icon } from '@/plugins'
+
+type ColorType = {
+  id: string
+  name: string
+  color: string[]
+}
+
+const props = defineProps({
+  selectColor: Object as PropType<ColorType>
+})
+
+const emit = defineEmits(['updateColor'])
+
+const { AddIcon, TrashIcon } = icon.ionicons5
+const CreateColorRenderChart = loadAsyncComponent(() => import('../CreateColorRenderChart/index.vue'))
+
+// 拷贝的一份数据
+const editColor = ref<ColorType | undefined>()
+// 目标颜色
+const targetColor = reactive<{
+  index: number
+  color?: string
+}>({
+  // -1 表示无选中元素
+  index: -1,
+  color: ''
+})
+
+// 监听值
+watch(
+  () => props.selectColor?.id,
+  () => {
+    editColor.value = cloneDeep(props.selectColor)
+    targetColor.index = 0
+    targetColor.color = editColor.value?.color[0]
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 扩展色
+const expandColorList = computed(() => {
+  return computedColorList(targetColor.color)
+})
+
+// 计算背景色
+const computedColorList = (color?: string) => {
+  if (!color) return []
+  const num: number = 20
+  const comDarkenArr: string[] = []
+  const comLightenArr: string[] = []
+  const comDarkenFadeArr: string[] = []
+
+  for (let i = 0; i < num; i++) {
+    comLightenArr.unshift(lighten(color, (2 / 100) * i))
+    comDarkenArr.push(darken(color, (3.5 / 100) * i))
+  }
+
+  // 透明
+  comDarkenArr.forEach((item, i) => {
+    comDarkenFadeArr.unshift(fade(item, (2.4 / 100) * i))
+  })
+
+  return [...comDarkenFadeArr, ...comLightenArr, ...comDarkenArr]
+}
+
+// 渲染背景色
+const getRenderBackgroundColor = (color?: string) => {
+  return {
+    backgroundColor: color
+  }
+}
+
+// 顶部选择颜色
+const completeHandle = (color?: string, index?: number) => {
+  color && (targetColor.color = color)
+  index && (targetColor.index = index)
+  nextTick(() => {
+    emit('updateColor', editColor.value)
+  })
+}
+
+// 选择扩展色
+const selectExpandColor = (color: string) => {
+  const hexColor = hslToHex(color)
+  editColor.value && (editColor.value.color[targetColor.index] = hexColor)
+  nextTick(() => {
+    emit('updateColor', editColor.value)
+  })
+}
+
+// 新增颜色
+const addColor = () => {
+  const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31'
+  editColor.value?.color.push(lastData)
+}
+
+// 删除颜色
+const deleteColor = (index: number) => {
+  editColor.value?.color.splice(index, 1)
+  if (index === targetColor.index) {
+    completeHandle(editColor.value?.color[index - 1], index - 1)
+  }
+}
+
+// 修改名称
+const titleChangeHandle = () => {
+  nextTick(() => {
+    emit('updateColor', editColor.value)
+  })
+}
+
+</script>
+
+<style scoped lang="scss">
+.create-color-setting {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding-right: 10px;
+  .create-color-name {
+    width: 200px;
+  }
+  .color-list-box {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+    .color-list-item {
+      width: calc(100% / 4);
+      .select {
+        .n-color-picker {
+          border: 2px solid v-bind('targetColor.color');
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+  .color-computed-item {
+    & div {
+      position: absolute;
+      display: inline-block;
+      height: 22px;
+      width: 22px;
+    }
+    position: relative;
+    display: inline-block;
+    height: 22px;
+    width: 22px;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}
+</style>

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 = [60, 51, 200, 334, 366, 456, 223]
+
+  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
+  )
+}

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.ts

@@ -0,0 +1,3 @@
+import CreateColorRenderChart from './index.vue'
+
+export { CreateColorRenderChart }

src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-space>
+    <n-card v-if="barOption" class="go-mt-3" :bordered="false" role="dialog" size="small" aria-modal="true">
+      <n-tabs type="segment" size="small" animated>
+        <n-tab-pane name="柱状图" tab="柱状图">
+          <v-chart
+            ref="vChartRefBar"
+            :theme="{ color }"
+            :option="barOption"
+            :manual-update="true"
+            autoresize
+            :style="chartStyle"
+          ></v-chart>
+        </n-tab-pane>
+        <n-tab-pane name="折线图" tab="折线图">
+          <v-chart
+            ref="vChartRefLine"
+            :theme="{ color }"
+            :option="lineOption"
+            :manual-update="true"
+            autoresize
+            :style="chartStyle"
+          ></v-chart>
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart, LineChart } from 'echarts/charts'
+import { use } from 'echarts/core'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { option as barOptions } from './barOptions'
+import { option as lineOptions } from './lineOptions'
+
+const props = defineProps({
+  color: {
+    type: Array as PropType<string[]>,
+    required: true
+  }
+})
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const barOption = ref()
+const lineOption = ref()
+
+const chartStyle = {
+  width: '528px',
+  height: '200px'
+}
+
+watch(
+  () => props.color,
+  (newData: string[]) => {
+    barOption.value = barOptions(newData)
+    lineOption.value = lineOptions(newData)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped></style>

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
+  )
+}

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -128,6 +128,7 @@
 <script setup lang="ts">
 import { ref, nextTick, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
+import { swatchesColors } from '@/settings/chartThemes/index'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -162,9 +163,6 @@ const selectColorOptions = [
   }
 ]
 
-// 默认展示颜色列表
-const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
-
 const globalTabList = [
   {
     key: 'ChartTheme',