Merge branch 'dev'

Merge pull request !131 from Ryker/dev

README.md

@@ -1,12 +1,40 @@
-## 总览
-
+#### 总览
 <p align="center">
     <img src="readme/logo-t-y.png" alt="go-view" />
 </p>
 
 <h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>
 
-#### 😶  **纯前端** 分支： **`master`**
+#### 长期赞助商
+<div>
+  <div align="center" style="column-gap: 20px;">
+    <a
+      href="http://www.ccflow.org/?from=goviewGitee"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
+    </a>
+    <span> &nbsp;</span>
+    <a
+      href="https://www.qeasy.cloud/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/qyy-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+  </div>
+</div>
+
+#### 😶 **纯前端** 分支： **`master`**
 
 #### 👻 携带 **后端** 请求分支: **`master-fetch`**
 
@@ -16,9 +44,8 @@
 
 项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)
 
-文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
-
 Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)
+
 #### 🤯 后端项目看这里!
 
 后端项目 gitee 地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)
@@ -41,6 +68,8 @@ Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](http
 
 - 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
 
+- 入选 NaiveUI 社区精选资源推荐：[查看 NaiveUI 推荐列表](https://www.naiveui.com/zh-CN/light/docs/community)
+
 说明文档：
 ![说明文档](readme/go-view-doc.png)
 
@@ -56,6 +85,9 @@ Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](http
 高级事件编辑:
 ![高级事件编辑](readme/go-view-event.png)
 
+自定义组件颜色:
+![高级事件编辑](readme/go-view-echarts-color.png)
+
 快捷主页：
 ![快捷主页](readme/go-view-indexpage.png)
 
@@ -101,45 +133,7 @@ Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](http
 
 ## 安装
 
-本项目采用` pnpm` 进行包管理
-
-```shell
-#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
-#pnpm
-pnpm install
-
-#yarn
-yarn install
-
-# 千万不要使用 npm 会报错
-```
-
-## 启动
-
-```shell
-#pnpm
-pnpm dev
-
-#yarn
-yarn dev
-
-#Makefile
-make dev
-```
-
-## 编译
-
-```shell
-#pnpm
-pnpm run build
-
-#yarn
-yarn run build
-
-#Makefile
-make dist
-
-```
+请查看文档：[https://www.mtruning.club/](https://www.mtruning.club/)
 
 ## 代码提交
 
@@ -155,10 +149,9 @@ make dist
 - style: 不影响程序逻辑的代码修改
 - chore: 不属于以上类型的其他类型(日常事务)
 
-## 交流
+## 交流群
 
-QQ 群：1030129384
-
-![QQ群](readme/go-view-qq.png)
+QQ 群：663629294
+<img width="260px" src="readme/go-view-qq.png" alt="QQ群" style="border-radius: 20px" />
 
 ![渲染海报](readme/logo-poster.png)

package.json

@@ -1,8 +1,8 @@
 {
   "name": "go-view",
-  "version": "1.1.8",
+  "version": "1.2.2",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
   },
   "scripts": {
     "dev": "vite --host",

src/api/axios.ts

@@ -21,6 +21,7 @@ axiosInstance.interceptors.request.use(
 axiosInstance.interceptors.response.use(
   (res: AxiosResponse) => {
     const { code } = res.data as { code: number }
+    if (code === undefined || code === null) return Promise.resolve(res)
     if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
     // 重定向
     if (ErrorPageNameMap.get(code)) redirectErrorPage(code)

src/api/http.ts

@@ -172,7 +172,9 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
 
     case RequestBodyEnum.JSON:
       headers['Content-Type'] = ContentTypeEnum.JSON
-      data = translateStr(JSON.parse(targetRequestParams.Body['json']))
+      //json对象也能使用'javasctipt:'来动态拼接参数
+      data = translateStr(targetRequestParams.Body['json'])
+      if(typeof data === 'string')  data = JSON.parse(data)
       // json 赋值给 data
       break
 

src/api/mock/test.mock.ts

@@ -10,8 +10,8 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne'],
-      'source|50': [
+    dimensions: ['product', 'dataOne'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|0-900': 3
@@ -37,12 +37,13 @@ export default {
     status: 200,
     msg: '请求成功',
     data: {
-      dimensions: ['product', 'dataOne', 'dataTwo'],
-      'source|50': [
+      dimensions: ['product', 'dataOne', 'dataTwo', 'dataThree'],
+      'source|20': [
         {
           product: '@name',
           'dataOne|100-900': 3,
-          'dataTwo|100-900': 3
+          'dataTwo|100-900': 3,
+          'dataThree|100-900': 3
         }
       ]
     }

src/components/Pages/ChartGlobImage/index.ts

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

src/components/Pages/ChartGlobImage/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <img class="list-img" v-lazy="imageInfo" alt="图表图片" />
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, watch } from 'vue'
+import { fetchImages } from '@/packages'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  }
+})
+
+const imageInfo = ref('')
+
+// 获取图片
+const fetchImageUrl = async () => {
+  imageInfo.value = await fetchImages(props.chartConfig)
+}
+
+watch(
+  () => props.chartConfig.key,
+  () => fetchImageUrl(),
+  {
+    immediate: true
+  }
+)
+</script>

src/enums/editPageEnum.ts

@@ -12,7 +12,8 @@ export enum DragKeyEnum {
 // 不同页面保存操作
 export enum SavePageEnum {
   CHART = 'SaveChart',
-  JSON = 'SaveJSON'
+  JSON = 'SaveJSON',
+  CLOSE = 'close'
 }
 
 // 操作枚举

src/enums/eventEnum.ts

@@ -0,0 +1,36 @@
+// 基础事件类型(vue不加 on)
+export enum BaseEvent {
+  // 点击
+  ON_CLICK = 'click',
+  // 双击
+  ON_DBL_CLICK = 'dblclick',
+  // 移入
+  ON_MOUSE_ENTER = 'mouseenter',
+  // 移出
+  ON_MOUSE_LEAVE = 'mouseleave'
+}
+
+// vue3 生命周期事件
+export enum EventLife {
+  // 渲染之后
+  VNODE_MOUNTED = 'vnodeMounted',
+  // 渲染之前
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
+}
+
+// 内置字符串函数对象列表
+export const excludeParseEventKeyList = [
+  EventLife.VNODE_BEFORE_MOUNT,
+  EventLife.VNODE_MOUNTED,
+  BaseEvent.ON_CLICK,
+  BaseEvent.ON_DBL_CLICK,
+  BaseEvent.ON_MOUSE_ENTER,
+  BaseEvent.ON_MOUSE_LEAVE,
+  //过滤器
+  'filter'
+]
+// 内置字符串函数键值列表
+export const excludeParseEventValueList = [
+  // 请求里的函数语句
+  'javascript:'
+]

src/hooks/useChartDataFetch.hook.ts

@@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
+import { setOption } from '@/packages/public/chart'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -34,7 +35,7 @@ export const useChartDataFetch = (
   const echartsUpdateHandle = (dataset: any) => {
     if (chartFrame === ChartFrameEnum.ECHARTS) {
       if (vChartRef.value) {
-        vChartRef.value.setOption({ dataset: dataset })
+        setOption(vChartRef.value, { dataset: dataset })
       }
     }
   }

src/hooks/useLifeHandler.hook.ts

@@ -1,4 +1,5 @@
-import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { EventLife } from '@/enums/eventEnum'
 import * as echarts from 'echarts'
 
 // 所有图表组件集合对象

src/layout/components/LayoutHeader/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-header bordered class="go-header">
-    <header class="go-header-box">
+    <header class="go-header-box" :class="{ 'is-project': isProject }">
       <div class="header-item left">
         <n-space>
           <slot name="left"></slot>
@@ -23,17 +23,29 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { GoThemeSelect } from '@/components/GoThemeSelect'
 import { GoLangSelect } from '@/components/GoLangSelect'
 import { ThemeColorSelect } from '@/components/Pages/ThemeColorSelect'
+import { PageEnum } from '@/enums/pageEnum'
+
+const route = useRoute()
+
+const isProject = computed(() => {
+  return route.fullPath === PageEnum.BASE_HOME_ITEMS
+})
 </script>
 
 <style lang="scss" scoped>
-$min-width: 400px;
+$min-width: 520px;
 @include go(header) {
   &-box {
     display: grid;
-    grid-template-columns: repeat(3, 33.33%);
+    grid-template-columns: repeat(3, 33%);
+    &.is-project {
+      grid-template-columns: none;
+    }
     .header-item {
       display: flex;
       align-items: center;
@@ -49,7 +61,7 @@ $min-width: 400px;
       }
     }
     height: $--header-height;
-    padding: 0 60px;
+    padding: 0 20px 0 60px;
   }
 }
 </style>

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
+import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
 import { GoAppProvider } from '@/components/GoAppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
@@ -53,4 +53,7 @@ async function appInit() {
   window['$vue'] = app
 }
 
-void appInit()
+appInit().then(() => {
+  initFunction()
+})
+

src/packages/components/Charts/Bars/BarCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_x.png'
 }

src/packages/components/Charts/Bars/BarCrossrange/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const BarCrossrangeConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'bar_y.png'
 }

src/packages/components/Charts/Bars/CapsuleChart/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/capsule.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const CapsuleChartConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'capsule.png'
 }

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -122,23 +122,28 @@ const calcData = (data: any, type?: string) => {
 
 // 数据解析
 const calcCapsuleLengthAndLabelData = (dataset: any) => {
-  const { source } = dataset
-  if (!source.length) return
+  try {
+    const { source } = dataset
+    if (!source || !source.length) return
 
-  state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
-  const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
+    state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
+    const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
 
-  const maxValue = Math.max(...capsuleValue)
+    const maxValue = Math.max(...capsuleValue)
 
-  state.capsuleValue = capsuleValue
+    state.capsuleValue = capsuleValue
 
-  state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
+    state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
 
-  const oneFifth = maxValue / 5
+    const oneFifth = maxValue / 5
 
-  const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+    const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
 
-  state.labelData = labelData
+    state.labelData = labelData
+
+  } catch (error) {
+    console.warn(error);
+  }
 }
 
 const numberSizeHandle = (val: string | number) => {

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'
 

src/packages/components/Charts/Lines/LineCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line.png'
 }

src/packages/components/Charts/Lines/LineGradientSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient_single.png'
 }

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

src/packages/components/Charts/Lines/LineGradients/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineGradientsConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_gradient.png'
 }

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

src/packages/components/Charts/Lines/LineLinearSingle/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/line_linear_single.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const LineLinearSingleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'line_linear_single.png'
 }

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

src/packages/components/Charts/Maps/MapAmap/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map_amap.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapAmapConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapAmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'map_amap.png'
 }

src/packages/components/Charts/Maps/MapBase/index.ts

@@ -1,5 +1,4 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import image from '@/assets/images/chart/charts/map.png'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapBaseConfig: ConfigType = {
@@ -11,5 +10,5 @@ export const MapBaseConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.MAP,
     package: PackagesCategoryEnum.CHARTS,
     chartFrame: ChartFrameEnum.COMMON,
-    image
-  }
+    image: 'map.png'
+}

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -11,7 +11,7 @@ import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useChartDataFetch } from '@/hooks'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
@@ -59,13 +59,14 @@ const getGeojson = (regionId: string) => {
 }
 
 //异步时先注册空的 保证初始化不报错
-registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
 
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  if (props.chartConfig.option.mapRegion.adcode != 'china') {
-    await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
+  if (adCode !== 'china') {
+    await getGeojson(adCode)
   } else {
     await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
   }
@@ -76,7 +77,7 @@ registerMapInitAsync()
 // 手动触发渲染
 const vEchartsSetOption = () => {
   option.value = props.chartConfig.option
-  vChartRef.value?.setOption(props.chartConfig.option)
+  setOption(vChartRef.value, props.chartConfig.option)
 }
 
 // 更新数据处理
@@ -127,7 +128,7 @@ watch(
 
 //监听地图展示区域发生变化
 watch(
-  () => props.chartConfig.option.mapRegion.adcode,
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
   async newData => {
     try {
       await getGeojson(newData)

src/packages/components/Charts/Mores/Funnel/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const FunnelConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'funnel.png'
 }

src/packages/components/Charts/Mores/Heatmap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/heatmap.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const HeatmapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'heatmap.png'
 }

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { HeatmapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -68,7 +68,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.series[0].data = seriesData
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/Process/index.ts

@@ -1,5 +1,3 @@
-// 展示图片
-import image from '@/assets/images/chart/charts/process.png'
 // 公共类型声明
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 // 当前[信息模块]分类声明
@@ -21,5 +19,5 @@ export const ProcessConfig: ConfigType = {
   // 包分类
   package: PackagesCategoryEnum.CHARTS,
   // 图片
-  image: image
+  image: 'process.png'
 }

src/packages/components/Charts/Mores/Radar/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/radar.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const RadarConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'radar.png'
 }

src/packages/components/Charts/Mores/Radar/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { RadarChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -50,7 +50,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.radar.indicator = dataset.radarIndicator
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/TreeMap/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/tree_map.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TreeMapConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tree_map.png'
 }

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TreemapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -42,7 +42,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   if (dataset) {
     props.chartConfig.option.series[0].data = dataset
-    vChartRef.value?.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/WaterPolo/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/water_WaterPolo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const WaterPoloConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'water_WaterPolo.png'
 }

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

src/packages/components/Charts/Pies/PieCircle/index.ts

@@ -11,5 +11,5 @@ export const PieCircleConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie-circle.png'
 }

src/packages/components/Charts/Pies/PieCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const PieCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'pie.png'
 }

src/packages/components/Charts/Scatters/ScatterCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-multi.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-multi.png'
 }

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/charts/scatter-logarithmic-regression.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ScatterLogarithmicRegressionConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image
+  image: 'scatter-logarithmic-regression.png'
 }

src/packages/components/Decorates/Borders/Border01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border01.png'
 }

src/packages/components/Decorates/Borders/Border02/index.ts

@@ -10,5 +10,5 @@ export const Border02Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border02.png'
 }

src/packages/components/Decorates/Borders/Border03/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border03.png'
 }

src/packages/components/Decorates/Borders/Border04/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border04.png'
 }

src/packages/components/Decorates/Borders/Border05/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border05.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border05.png'
 }

src/packages/components/Decorates/Borders/Border06/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border06.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border06.png'
 }

src/packages/components/Decorates/Borders/Border07/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border07.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border07.png'
 }

src/packages/components/Decorates/Borders/Border08/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border08.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border08.png'
 }

src/packages/components/Decorates/Borders/Border09/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border09.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border09.png'
 }

src/packages/components/Decorates/Borders/Border10/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border10.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border10.png'
 }

src/packages/components/Decorates/Borders/Border11/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border11.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border11.png'
 }

src/packages/components/Decorates/Borders/Border12/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border12.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border12.png'
 }

src/packages/components/Decorates/Borders/Border13/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/border13.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'border13.png'
 }

src/packages/components/Decorates/Decorates/Decorates01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates01.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates02/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates02.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates02.png'
 }

src/packages/components/Decorates/Decorates/Decorates03/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates03.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates01.png'
 }

src/packages/components/Decorates/Decorates/Decorates04/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates04.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates04.png'
 }

src/packages/components/Decorates/Decorates/Decorates05/index.ts

@@ -10,5 +10,5 @@ export const Decorates05Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'decorates05.png'
 }

src/packages/components/Decorates/Decorates/Decorates06/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/decorates06.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const Decorates06Config: ConfigType = {
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'decorates06.png'
 }

src/packages/components/Decorates/Mores/Clock/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/clock.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ClockConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'clock.png'
 }

src/packages/components/Decorates/Mores/CountDown/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/countdown.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'countdown.png'
 }

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/flipper-number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'flipper-number.png'
 }

src/packages/components/Decorates/Mores/Number/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'number.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/time.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  image
+  image: 'time.png'
 }

src/packages/components/Decorates/Mores/TimeCommon/index.vue

@@ -26,7 +26,7 @@ let yearMonthDay = ref('2021-2-3')
 let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let boxShadow = ref('none')
-
+let timer: any = null
 const { w, h } = toRefs(props.chartConfig.attr)
 
 let {
@@ -60,7 +60,7 @@ watch(
   }
 )
 onMounted(() => {
-  const timer = setInterval(() => {
+  timer = setInterval(() => {
     var datetime = new Date()
     var year = datetime.getFullYear()
     var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -81,7 +81,7 @@ onMounted(() => {
   }, 500)
 })
 onUnmounted(() => {
-  clearInterval()
+  clearInterval(timer)
 })
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Decorates/Three/ThreeEarth01/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/decorates/threeEarth01.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ThreeEarth01Config: ConfigType = {
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image
+  image: 'threeEarth01.png'
 }

src/packages/components/Decorates/Three/ThreeEarth01/index.vue

@@ -66,7 +66,7 @@ watch(
 // DOM 渲染之后进行初始化
 onMounted(() => {
   try {
-    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') > -1) {
+    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
       window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示！')
       chartEditStore.removeComponentList(undefined, false)
       return

src/packages/components/Informations/Mores/Carousel/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
+
+// 示例图片资源
+const modules = import.meta.globEager("./images/*");
+const dataset = [logo]
+for (var item in modules) {
+  dataset.push(modules[item].default)
+}
+
+export const option = {
+  // 图片资源列表
+  dataset: dataset,
+  // 自动播放
+  autoplay: true,
+  // 自动播放的间隔（ms）
+  interval: 5000,
+  // 每页显示的图片数量
+  slidesPerview: 1,
+  // 轮播方向
+  direction: "horizontal",
+  // 拖曳切换
+  draggable: true,
+  // 居中显示
+  centeredSlides: false,
+  // 过渡效果
+  effect: "slide",
+  // 是否显示指示点
+  showDots: true,
+  // 指示器样式
+  dotType: "dot",
+  // 指示器位置
+  dotPlacement: "bottom",
+  // 显示箭头
+  showArrow: false,
+  // 图片样式
+  fit: "contain",
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CarouselConfig.key
+  public chartConfig = cloneDeep(CarouselConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Mores/Carousel/config.vue

@@ -0,0 +1,176 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item v-for="item, index in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
+          <n-button ghost @click="optionData.dataset.splice(index, 1)">
+            -
+          </n-button>
+        </n-input-group>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.dataset.push('')">
+          +
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="播放器">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </setting-item>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <setting-item name="间隔时间">
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item name="轮播方向">
+        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+      </setting-item>
+      <setting-item name="过渡效果">
+        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+      </setting-item>
+      <setting-item name="每页数量">
+        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="图片样式">
+        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="指示器">
+      <setting-item name="样式">
+        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 字典
+const dotTypes = [
+  {
+    label: "点",
+    value: "dot"
+  },
+  {
+    label: "线",
+    value: "line"
+  }
+]
+const directions = [
+  {
+    label: "水平方向",
+    value: "horizontal"
+  },
+  {
+    label: "垂直方向",
+    value: "vertical"
+  }
+]
+const effects = [
+  {
+    label: "slide",
+    value: "slide"
+  },
+  {
+    label: "fade",
+    value: "fade"
+  },
+  {
+    label: "card",
+    value: "card"
+  },
+  {
+    label: "custom",
+    value: "custom"
+  }
+]
+const dotPlacements = [
+  {
+    label: "上边",
+    value: "top"
+  },
+  {
+    label: "下边",
+    value: "bottom"
+  },
+  {
+    label: "左边",
+    value: "left"
+  },
+  {
+    label: "右边",
+    value: "right"
+  }
+]
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  },
+]
+</script>

src/packages/components/Informations/Mores/Carousel/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CarouselConfig: ConfigType = {
+  key: 'Carousel',
+  chartKey: 'VCarousel',
+  conKey: 'VCCarousel',
+  title: '轮播图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'photo.png'
+}

src/packages/components/Informations/Mores/Carousel/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
+      :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
+      :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
+      <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
+        :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
+    </n-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

src/packages/components/Informations/Mores/Iframe/config.ts

@@ -14,7 +14,7 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = IframeConfig.key
-  public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(IframeConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Informations/Mores/Iframe/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/iframe.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const IframeConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'iframe.png'
 }

src/packages/components/Informations/Mores/Image/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/photo.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const ImageConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'photo.png'
 }

src/packages/components/Informations/Mores/ImageCarousel/config.ts

@@ -0,0 +1,44 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ImageCarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/assets/logo.png'
+
+export const option = {
+  // 图片资源列表
+  dataset: [
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
+  ],
+  // 自动播放
+  autoplay: true,
+  // 自动播放的间隔（豪秒）
+  interval: 5000,
+  // 每页显示的图片数量
+  slidesPerview: 1,
+  // 轮播方向
+  direction: "horizontal",
+  // 拖曳切换
+  draggable: true,
+  // 居中显示
+  centeredSlides: false,
+  // 过渡效果
+  effect: "slide",
+  // 是否显示指示点
+  showDots: true,
+  // 指示器样式
+  dotType: "dot",
+  // 指示器位置
+  dotPlacement: "bottom",
+  // 显示箭头
+  showArrow: false,
+  // 图片样式
+  fit: "contain",
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ImageCarouselConfig.key
+  public chartConfig = cloneDeep(ImageCarouselConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Mores/ImageCarousel/config.vue

@@ -0,0 +1,168 @@
+<template>
+  <collapse-item name="路径" :expanded="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
+          <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
+        </n-input-group>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
+      </setting-item>
+  </collapse-item>
+  <collapse-item name="轮播属性" :expanded="true">
+    <setting-item-box name="播放器">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </setting-item>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <setting-item name="间隔时间">
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder="">
+          <template #suffix> 毫秒 </template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="轮播方向">
+        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+      </setting-item>
+      <setting-item name="过渡效果">
+        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+      </setting-item>
+      <setting-item name="每页数量">
+        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="图片样式">
+        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="指示器">
+      <setting-item name="样式">
+        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 字典
+const dotTypes = [
+  {
+    label: '点',
+    value: 'dot'
+  },
+  {
+    label: '线',
+    value: 'line'
+  }
+]
+const directions = [
+  {
+    label: '水平方向',
+    value: 'horizontal'
+  },
+  {
+    label: '垂直方向',
+    value: 'vertical'
+  }
+]
+const effects = [
+  {
+    label: 'slide',
+    value: 'slide'
+  },
+  {
+    label: 'fade',
+    value: 'fade'
+  },
+  {
+    label: 'card',
+    value: 'card'
+  },
+  {
+    label: 'custom',
+    value: 'custom'
+  }
+]
+const dotPlacements = [
+  {
+    label: '上边',
+    value: 'top'
+  },
+  {
+    label: '下边',
+    value: 'bottom'
+  },
+  {
+    label: '左边',
+    value: 'left'
+  },
+  {
+    label: '右边',
+    value: 'right'
+  }
+]
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+</script>

src/packages/components/Informations/Mores/ImageCarousel/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const ImageCarouselConfig: ConfigType = {
+  key: 'ImageCarousel',
+  chartKey: 'VImageCarousel',
+  conKey: 'VCImageCarousel',
+  title: '轮播图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'photo_carousel.png'
+}

src/packages/components/Informations/Mores/ImageCarousel/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <n-carousel
+      :autoplay="autoplay"
+      :interval="interval"
+      :centered-slides="centeredSlides"
+      :direction="direction"
+      :dot-placement="dotPlacement"
+      :dot-type="dotType"
+      :draggable="draggable"
+      :effect="effect"
+      :slides-per-view="slidesPerview"
+      :show-arrow="showArrow"
+      :show-dots="showDots"
+    >
+      <n-image
+        v-for="(url, index) in option.dataset"
+        preview-disabled
+        :key="index"
+        :object-fit="fit"
+        :src="url"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
+    </n-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  autoplay,
+  interval,
+  slidesPerview,
+  direction,
+  draggable,
+  centeredSlides,
+  effect,
+  dotType,
+  dotPlacement,
+  showArrow,
+  showDots,
+  fit
+} = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

src/packages/components/Informations/Mores/Video/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/video.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const VideoConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'video.png'
 }

src/packages/components/Informations/Mores/WordCloud/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/words_cloud.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const WordCloudConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'words_cloud.png'
 }

src/packages/components/Informations/Mores/WordCloud/index.vue

@@ -16,7 +16,7 @@ import 'echarts-wordcloud'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
@@ -49,7 +49,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   try {
     dataset && (props.chartConfig.option.series[0].data = dataset)
-    vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+    vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option)
   } catch (error) {
     console.log(error)
   }

src/packages/components/Informations/Mores/index.ts

@@ -1,6 +1,8 @@
 import { ImageConfig } from './Image/index'
+import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
+import { CarouselConfig } from './Carousel/index'
 
-export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig]
+export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -15,7 +15,6 @@ export const FontWeightObject = {
 }
 
 export const option = {
-  
   dataset: '让数字化看得见',
   fontSize: 32,
   fontColor: '#ffffff',
@@ -39,4 +38,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
   public chartConfig = cloneDeep(TextBarrageConfig)
   public option = cloneDeep(option)
+  public preview = { overFlowHidden: true } 
 }

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_barrage.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_barrage.png'
 }

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -10,5 +9,5 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
-  image
+  image: 'text_static.png'
 }

src/packages/components/Informations/Texts/TextGradient/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/informations/text_gradient.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TextGradientConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.NAIVE_UI,
-  image
+  image: 'text_gradient.png'
 }

src/packages/components/Tables/Tables/TableList/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/tables_list.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TableListConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TABLE,
   package: PackagesCategoryEnum.TABLES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'tables_list.png'
 }

src/packages/components/Tables/Tables/TableScrollBoard/config.vue

@@ -40,6 +40,15 @@
       <SettingItem name="列宽度">
         <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
       </SettingItem>
+      <SettingItem name="轮播方式">
+        <n-select
+          v-model:value="optionData.carousel"
+          :options="[
+            { label: '单条轮播', value: 'single' },
+            { label: '整页轮播', value: 'page' },
+          ]"
+        />
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">

src/packages/components/Tables/Tables/TableScrollBoard/index.ts

@@ -1,4 +1,3 @@
-import image from '@/assets/images/chart/tables/table_scrollboard.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
@@ -11,5 +10,5 @@ export const TableScrollBoardConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.TABLE,
   package: PackagesCategoryEnum.TABLES,
   chartFrame: ChartFrameEnum.COMMON,
-  image
+  image: 'table_scrollboard.png'
 }

src/packages/index.d.ts

@@ -1,3 +1,4 @@
+import { BaseEvent, EventLife } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -22,7 +23,7 @@ export type ConfigType = {
   categoryName: string
   package: string
   chartFrame?: ChartFrameEnum
-  image: string | (() => Promise<typeof import('*.png')>)
+  image: string
 }
 
 // 数据请求
@@ -90,26 +91,6 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
-// 基础事件类型(vue不加 on)
-export enum BaseEvent {
-  // 点击
-  ON_CLICK = 'click',
-  // 双击
-  ON_DBL_CLICK = 'dblclick',
-  // 移入
-  ON_MOUSE_ENTER = 'mouseenter',
-  // 移出
-  ON_MOUSE_LEAVE = 'mouseleave',
-}
-
-// vue3 生命周期事件
-export enum EventLife { 
-  // 渲染之后
-  VNODE_MOUNTED = 'vnodeMounted',
-  // 渲染之前
-  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
-}
-
 // 组件实例类
 export interface PublicConfigType {
   id: string
@@ -133,6 +114,10 @@ export interface PublicConfigType {
     // 动画
     animations: string[]
   }
+  preview?: {
+    // 预览超出隐藏
+    overFlowHidden?: boolean
+  }
   filter?: string
   status: StatusType
   events: {

src/packages/index.ts

@@ -2,15 +2,11 @@ import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
-import {
-  PackagesCategoryEnum,
-  PackagesType,
-  ConfigType,
-  FetchComFlagType
-} from '@/packages/index.d'
+import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
 
-const configModules = import.meta.globEager("./components/**/config.vue")
-const indexModules = import.meta.globEager("./components/**/index.vue")
+const configModules = import.meta.globEager('./components/**/config.vue')
+const indexModules = import.meta.globEager('./components/**/index.vue')
+const imagesModules = import.meta.globEager('../assets/images/chart/**')
 
 // * 所有图表
 export let packagesList: PackagesType = {
@@ -24,7 +20,7 @@ export let packagesList: PackagesType = {
  * * 获取目标组件配置信息
  * @param targetData
  */
- export const createComponent = async (targetData: ConfigType) => {
+export const createComponent = async (targetData: ConfigType) => {
   const { category, key } = targetData
   const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
   return new chart.default()
@@ -36,10 +32,10 @@ export let packagesList: PackagesType = {
  * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
  */
 const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  const module = flag === FetchComFlagType.VIEW ? indexModules: configModules
+  const module = flag === FetchComFlagType.VIEW ? indexModules : configModules
   for (const key in module) {
     const urlSplit = key.split('/')
-    if(urlSplit[urlSplit.length -2 ] === chartName) {
+    if (urlSplit[urlSplit.length - 2] === chartName) {
       return module[key]
     }
   }
@@ -49,7 +45,7 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * * 获取展示组件
  * @param {ConfigType} dropData 配置项
  */
- export const fetchChartComponent = (dropData: ConfigType) => {
+export const fetchChartComponent = (dropData: ConfigType) => {
   const { key } = dropData
   return fetchComponent(key, FetchComFlagType.VIEW)?.default
 }
@@ -58,7 +54,28 @@ const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
  * * 获取配置组件
  * @param {ConfigType} dropData 配置项
  */
- export const fetchConfigComponent = (dropData: ConfigType) => {
+export const fetchConfigComponent = (dropData: ConfigType) => {
   const { key } = dropData
   return fetchComponent(key, FetchComFlagType.CONFIG)?.default
-}
+}
+
+/**
+ * * 获取图片内容
+ * @param {ConfigType} targetData 配置项
+ */
+export const fetchImages = async (targetData?: ConfigType) => {
+  if (!targetData) return ''
+  // 新数据动态处理
+  const { image, package: targetDataPackage } = targetData
+  // 兼容旧数据
+  if (image.includes('@') || image.includes('base64')) return image
+
+  const imageName = image.substring(image.lastIndexOf('/') + 1)
+  for (const key in imagesModules) {
+    const urlSplit = key.split('/')
+    if (urlSplit[urlSplit.length - 1] === imageName) {
+      return imagesModules[key]?.default
+    }
+  }
+  return ''
+}