Merge branch 'master-fetch-dev' into master-fetch

Merge pull request !197 from 阿飞/dev1

package.json

@@ -1,8 +1,8 @@
 {
   "name": "go-view",
-  "version": "2.1.8",
+  "version": "2.2.4",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
   },
   "scripts": {
     "dev": "vite --host",
@@ -21,9 +21,10 @@
     "@types/keymaster": "^1.6.30",
     "@types/lodash": "^4.14.184",
     "animate.css": "^4.1.1",
-    "axios": "^0.27.2",
+    "axios": "^1.4.0",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.7",
     "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
@@ -32,6 +33,7 @@
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",
     "keymaster": "^1.6.2",
+    "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
     "naive-ui": "2.34.3",
     "pinia": "^2.0.13",
@@ -48,14 +50,16 @@
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",
+    "@iconify/types": "^2.0.0",
+    "@iconify/vue": "^4.1.1",
     "@types/node": "^16.11.26",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@vicons/carbon": "^0.12.0",
     "@vicons/ionicons5": "~0.11.0",
-    "@vitejs/plugin-vue": "^1.10.2",
-    "@vitejs/plugin-vue-jsx": "^1.3.9",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.31",
     "@vueuse/core": "^7.7.1",
     "commitlint": "^17.0.2",
@@ -74,7 +78,7 @@
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
     "typescript": "4.6.3",
-    "vite": "2.9.9",
+    "vite": "4.3.6",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-importer": "^0.2.5",
     "vite-plugin-mock": "^2.9.6",

src/api/axios.ts

@@ -1,6 +1,6 @@
-import axios, { AxiosResponse, AxiosRequestConfig, Axios } from 'axios'
-import { ResultEnum, ModuleTypeEnum } from "@/enums/httpEnum"
-import { PageEnum, ErrorPageNameMap } from "@/enums/pageEnum"
+import axios, { AxiosResponse, AxiosRequestConfig, Axios, AxiosError, InternalAxiosRequestConfig } from 'axios'
+import { RequestHttpHeaderEnum, ResultEnum, ModuleTypeEnum } from '@/enums/httpEnum'
+import { PageEnum, ErrorPageNameMap } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { axiosPre } from '@/settings/httpSetting'
 import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
@@ -20,11 +20,11 @@ export interface MyRequestInstance extends Axios {
 
 const axiosInstance = axios.create({
   baseURL: `${import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : ''}${axiosPre}`,
-  timeout: ResultEnum.TIMEOUT,
+  timeout: ResultEnum.TIMEOUT
 }) as unknown as MyRequestInstance
 
 axiosInstance.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
+  (config: InternalAxiosRequestConfig) => {
     // 白名单校验
     if (includes(fetchAllowList, config.url)) return config
     // 获取 token
@@ -35,13 +35,10 @@ axiosInstance.interceptors.request.use(
       return config
     }
     const userInfo = info[SystemStoreEnum.USER_INFO]
-    config.headers = {
-      ...config.headers,
-      [userInfo[SystemStoreUserInfoEnum.TOKEN_NAME] || 'token']: userInfo[SystemStoreUserInfoEnum.USER_TOKEN] || ''
-    }
+    config.headers[userInfo[SystemStoreUserInfoEnum.TOKEN_NAME] || 'token'] =  userInfo[SystemStoreUserInfoEnum.USER_TOKEN] || ''
     return config
   },
-  (err: AxiosRequestConfig) => {
+  (err: AxiosError) => {
     Promise.reject(err)
   }
 )
@@ -55,7 +52,7 @@ axiosInstance.interceptors.response.use(
     }
     const { code } = res.data as { code: number }
 
-    if (code === undefined || code === null) return Promise.resolve(res)
+    if (code === undefined || code === null) return Promise.resolve(res.data)
 
     // 成功
     if (code === ResultEnum.SUCCESS) {
@@ -74,13 +71,23 @@ axiosInstance.interceptors.response.use(
       redirectErrorPage(code)
       return Promise.resolve(res.data)
     }
-    
+
     // 提示错误
     window['$message'].error(window['$t']((res.data as any).msg))
     return Promise.resolve(res.data)
   },
-  (err: AxiosResponse) => {
-    Promise.reject(err)
+  (err: AxiosError) => {
+    const status = err.response?.status
+    switch (status) {
+      case 401:
+        routerTurnByName(PageEnum.BASE_LOGIN_NAME)
+        Promise.reject(err)
+        break
+
+      default:
+        Promise.reject(err)
+        break
+    }
   }
 )
 

src/api/http.ts

@@ -163,7 +163,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
   params = translateStr(params)
   // form 类型处理
   let formData: FormData = new FormData()
-  formData.set('default', 'defaultData')
   // 类型处理
 
   switch (requestParamsBodyType) {
@@ -172,7 +171,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/graph.json

@@ -0,0 +1,100 @@
+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": "@integer(0, 50)",
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": "@integer(0, 50)",
+        "category": 3
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": "@integer(0, 50)",
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": "@integer(0, 50)",
+        "category": 5
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": "@integer(0, 50)",
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": "@integer(0, 50)",
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": "@integer(0, 50)",
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": "@integer(0, 50)",
+        "category": 0
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "@integer(2, 4)"
+      },
+      {
+        "source": "2",
+        "target": "@integer(3, 4)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 2)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 1)"
+      },
+      {
+        "source": "4",
+        "target": "@integer(0, 3)"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }

src/api/mock/index.ts

@@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
 export const wordCloudUrl = '/mock/wordCloud'
 export const treemapUrl = '/mock/treemap'
 export const threeEarth01Url = '/mock/threeEarth01Data'
+export const sankeyUrl = '/mock/sankey'
+export const graphUrl = '/mock/graphData'
 
 const mockObject: MockMethod[] = [
   {
@@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.threeEarth01Data
   },
+  {
+    url: sankeyUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchSankey
+  },
+  {
+    url: graphUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.graphData
+  },
 ]
 
 export default mockObject

src/api/mock/sankey.json

@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": "@integer(0, 10)"
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

src/api/mock/test.mock.ts

@@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
 import mapJson from './map.json'
 import tTreemapJson from './treemap.json'
+import sankeyJson from './sankey.json'
+import graphDataJson from './graph.json'
 
 export default {
   // 单图表
@@ -219,5 +221,19 @@ export default {
         'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
       }
     ]
-  }
+  },
+  // 桑基图
+  fetchSankey: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: sankeyJson
+  },
+  // 关系图
+  graphData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: graphDataJson
+  },
 }

src/api/path/project.api.ts

@@ -89,7 +89,8 @@ export const uploadFile = async (data: object) => {
       /**
        * 文件地址
        */
-      fileName: string
+      fileName: string,
+      fileurl: string,
     }>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
     return res
   } catch {

src/components/Pages/ChartItemSetting/EchartsRendererSetting.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
+    <n-space>
+      <n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
+        <template #trigger>
+          <n-radio :value="item.value">
+            {{ item.value }}
+          </n-radio>
+        </template>
+        {{ item.desc }}
+      </n-tooltip>
+    </n-space>
+  </n-radio-group>
+</template>
+<script setup lang="ts">
+import { type EchartsRenderer } from '@/settings/chartThemes'
+
+const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
+const emits = defineEmits(['update:modelValue'])
+
+const INHERIT_VALUE = 'inherit'
+
+const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
+  emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
+}
+
+const rendererList = [
+  {
+    value: 'svg',
+    desc: '在缩放场景下具有更好的表现'
+  },
+  {
+    value: 'canvas',
+    desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
+  },
+  ...(props.includeInherit
+    ? [
+        {
+          value: INHERIT_VALUE,
+          desc: '默认继承全局配置'
+        }
+      ]
+    : [])
+]
+</script>

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -1,4 +1,34 @@
 <template>
+  <collapse-item name="渲染器">
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>全局</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="themeSetting.renderer" />
+    </setting-item-box>
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>当前</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>仅当前组件采用指定渲染器渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="optionData.renderer" includeInherit />
+    </setting-item-box>
+  </collapse-item>
   <collapse-item v-if="title" name="标题">
     <template #header>
       <n-switch v-model:value="title.show" size="small"></n-switch>
@@ -227,9 +257,36 @@
       <n-switch v-model:value="legend.show" size="small"></n-switch>
     </template>
     <setting-item-box name="图例文字">
-      <setting-item>
+      <setting-item name="颜色">
         <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
       </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例位置">
+      <setting-item name="x轴">
+        <n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" />
+      </setting-item>
+      <setting-item name="y轴">
+        <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例信息">
+      <setting-item name="方向">
+        <n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" />
+      </setting-item>
+      <setting-item name="形状">
+        <n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例大小">
+      <setting-item name="宽">
+        <n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="高">
+        <n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number>
+      </setting-item>
     </setting-item-box>
   </collapse-item>
 
@@ -279,10 +336,15 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, watch } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
+import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import EchartsRendererSetting from './EchartsRendererSetting.vue'
+
+const { HelpOutlineIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -296,6 +358,12 @@ const props = defineProps({
   }
 })
 
+const chartEditStore = useChartEditStore()
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
 const title = computed(() => {
   return props.optionData.title
 })
@@ -319,4 +387,18 @@ const grid = computed(() => {
 const visualMap = computed(() => {
   return props.optionData.visualMap
 })
+
+// 监听legend color颜色改变type = scroll的颜色
+watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
+  if (legend.value && newVal) {
+     if (!legend.value.pageTextStyle) {
+      legend.value.pageTextStyle = { color: newVal }
+    } else {
+      legend.value.pageTextStyle.color = newVal
+    }
+  }
+}, {
+  immediate: true,
+  deep: true,
+})
 </script>

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -69,6 +69,22 @@
       </setting-item>
     </setting-item-box>
 
+    <!--  预设滤镜  -->
+    <div v-if="presetImageList.length" class="preset-filter">
+      <n-image
+        class="preset-img"
+        width="46"
+        preview-disabled
+        object-fit="scale-down"
+        v-for="(item, index) in presetImageList"
+        :key="index"
+        :class="{ 'active-preset': item.hueRotate === chartStyles.hueRotate }"
+        :style="{ filter: `hue-rotate(${item.hueRotate}deg)` }"
+        :src="item.src"
+        @click="() => (chartStyles.hueRotate = item.hueRotate)"
+      ></n-image>
+    </div>
+
     <!-- 混合模式 -->
     <setting-item-box v-if="!isCanvas" :alone="true">
       <template #name>
@@ -149,10 +165,12 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { ref, PropType } from 'vue'
 import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
+import logoImg from '@/assets/logo.png'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 const props = defineProps({
   isGroup: {
@@ -175,10 +193,48 @@ const { HelpOutlineIcon } = icon.ionicons5
 const sliderFormatTooltip = (v: string) => {
   return `${(parseFloat(v) * 100).toFixed(0)}%`
 }
+
 // 角度格式化
 const degFormatTooltip = (v: string) => {
   return `${v}deg`
 }
+
+// 预设滤镜
+interface presetImageData {
+  index: number
+  src: string
+  hueRotate: number
+}
+
+const presetImageList = ref([] as presetImageData[])
+for (let i = 1; i <= 12; i++) {
+  presetImageList.value.push({
+    index: i,
+    src: logoImg,
+    hueRotate: i * 30
+  })
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// 预设滤镜
+.preset-filter {
+  margin: 20px 0 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .preset-img {
+    margin-bottom: 10px;
+    padding: 2px;
+    border-radius: 6px;
+    transition: 0.2s all;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0 0 0 2px #66a9c9;
+    }
+  }
+  .active-preset {
+    box-shadow: 0 0 0 2px #66a9c9;
+  }
+}
+</style>

src/components/Pages/Flipper/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="go-Flipper" :class="[flipType, { go: isFlipping }]">
+  <div class="go-flipper" :class="[flipType, { go: isFlipping }]">
     <div class="digital front" :data-front="frontTextFromData"></div>
     <div class="digital back" :data-back="backTextFromData"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, PropType, watch } from 'vue'
-import { FlipType }  from './index'
+import { ref, PropType, watch, nextTick } from 'vue'
+import { FlipType } from './index'
 
 const props = defineProps({
   flipType: {
@@ -43,6 +43,10 @@ const props = defineProps({
   backColor: {
     type: String,
     default: '#000000'
+  },
+  borderWidth: {
+    type: Number,
+    default: 2
   }
 })
 
@@ -50,19 +54,27 @@ const isFlipping = ref(false)
 const frontTextFromData = ref(props.count || 0)
 const backTextFromData = ref(props.count || 0)
 
+let timeoutID: any = 0
+
 // 翻牌
-const flip = (front: string | number, back: string | number) => {
+const flip = async (front: string | number, back: string | number) => {
   // 如果处于翻转中，则不执行
-  if (isFlipping.value) return
+  if (isFlipping.value) {
+    isFlipping.value = false // 立即结束此次动画
+    clearTimeout(timeoutID) // 清除上一个计时器任务
+    await nextTick()
+    await flip(front, back) // 开始最后一次翻牌任务
+    return
+  }
+
   // 设置翻盘前后数据
   backTextFromData.value = back
   frontTextFromData.value = front
-
   // 设置翻转状态为true
   isFlipping.value = true
 
   // 翻牌结束的行为
-  setTimeout(() => {
+  timeoutID = setTimeout(() => {
     isFlipping.value = false // 设置翻转状态为false
     frontTextFromData.value = back
   }, props.duration)
@@ -86,6 +98,7 @@ $radius: v-bind('`${props.radius}px`');
 $width: v-bind('`${props.width}px`');
 $height: v-bind('`${props.height}px`');
 $perspective: v-bind('`${props.height * 2}px`');
+$borderWidth: v-bind('`${props.borderWidth * 2}px`');
 $speed: v-bind('`${props.duration / 1000}s`');
 $shadowColor: #000000;
 $lineColor: #4a9ef8;
@@ -125,13 +138,12 @@ $lineColor: #4a9ef8;
 }
 // #endregion
 
-.go-Flipper {
+.go-flipper {
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   line-height: $height;
-  border: solid 1px $backColor;
   border-radius: $radius;
   background: $frontColor;
   font-size: $width;
@@ -139,6 +151,17 @@ $lineColor: #4a9ef8;
   box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
   text-align: center;
   // font-family: 'Helvetica Neue';
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 $borderWidth 0 $frontColor; // 内测阴影部分
+    border-radius: $radius;
+  }
 
   .digital:before,
   .digital:after {
@@ -186,11 +209,13 @@ $lineColor: #4a9ef8;
   &.down.go .front:before {
     transform-origin: 50% 100%;
     animation: frontFlipDown $speed ease-in-out both;
-    box-shadow: 0 -2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    box-shadow: 0 -2px $borderWidth 0 $frontColor;
     backface-visibility: hidden;
   }
   &.down.go .back:after {
     animation: backFlipDown $speed ease-in-out both;
+    box-shadow: 0 2px $borderWidth 0 $frontColor;
+    backface-visibility: hidden;
   }
   /*向上翻*/
   &.up .front:after {
@@ -208,11 +233,13 @@ $lineColor: #4a9ef8;
   &.up.go .front:after {
     transform-origin: 50% 0;
     animation: frontFlipUp $speed ease-in-out both;
-    box-shadow: 0 2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    box-shadow: 0 2px $borderWidth 0 $frontColor;
     backface-visibility: hidden;
   }
   &.up.go .back:before {
     animation: backFlipUp $speed ease-in-out both;
+    box-shadow: 0 -2px $borderWidth 0 $frontColor;
+    backface-visibility: hidden;
   }
 }
 </style>

src/components/Pages/ThemeColorSelect/index.vue

@@ -36,7 +36,7 @@
       </div>
       <div class="model-footer">
         中国色列表来自于：
-        <n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
+        <n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
       </div>
     </div>
   </n-modal>
@@ -157,6 +157,7 @@ $height: 85vh;
     }
   }
   .model-footer {
+    z-index: 1;
     text-align: end;
   }
 }

src/enums/editPageEnum.ts

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

src/enums/eventEnum.ts

@@ -7,15 +7,38 @@ export enum BaseEvent {
   // 移入
   ON_MOUSE_ENTER = 'mouseenter',
   // 移出
-  ON_MOUSE_LEAVE = 'mouseleave',
+  ON_MOUSE_LEAVE = 'mouseleave'
+}
+
+// 组件交互回调事件
+export enum InteractEvents {
+  INTERACT_ON = 'interactOn',
+  INTERACT_COMPONENT_ID = 'interactComponentId',
+  INTERACT_FN = 'interactFn'
+}
+
+// 全局组件交互回调事件触发的类型（当然可以自定义名称）
+export enum InteractEventOn {
+  CLICK = 'click',
+  CHANGE = 'change'
+}
+
+// 确定交互组件触发类型 key名称
+export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
+
+// 交互式组件的触发配置
+export type InteractActionsType = {
+  interactType: InteractEventOn
+  interactName: string
+  componentEmitEvents: { [T: string]: { value: any; label: string }[] }
 }
 
 // vue3 生命周期事件
-export enum EventLife { 
+export enum EventLife {
   // 渲染之后
   VNODE_MOUNTED = 'vnodeMounted',
   // 渲染之前
-  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
 }
 
 // 内置字符串函数对象列表
@@ -28,4 +51,9 @@ export const excludeParseEventKeyList = [
   BaseEvent.ON_MOUSE_LEAVE,
   //过滤器
   'filter'
-]
+]
+// 内置字符串函数键值列表
+export const excludeParseEventValueList = [
+  // 请求里的函数语句
+  'javascript:'
+]

src/enums/storageEnum.ts

@@ -10,5 +10,7 @@ export enum StorageEnum {
   // 工作台布局配置
   GO_CHART_LAYOUT_STORE = 'GO_CHART_LAYOUT',
   // 工作台需要保存的数据
-  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST'
+  GO_CHART_STORAGE_LIST = 'GO_CHART_STORAGE_LIST',
+  // 用户存储的图片媒体
+  GO_USER_MEDIA_PHOTOS = 'GO_USER_MEDIA_PHOTOS'
 }

src/hooks/index.ts

@@ -5,4 +5,5 @@ export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useSystemInit.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
-export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useChartInteract.hook'

src/hooks/useCanvasInitOptions.hook.ts

@@ -0,0 +1,26 @@
+import { inject, type Ref } from 'vue'
+import { EchartsRenderer } from '@/settings/chartThemes'
+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+use([CanvasRenderer, SVGRenderer])
+
+type InitOptions = {
+  renderer: EchartsRenderer
+  devicePixelRatio?: number
+}
+
+// 获取需要给当前echarts组件设置什么初始值
+export function useCanvasInitOptions(option: any, themeSetting: any) {
+  const renderer = option.renderer || themeSetting.renderer
+  const initOptions: InitOptions = { renderer }
+  const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
+
+  if (renderer === 'canvas') {
+    initOptions.devicePixelRatio = Math.ceil(
+      Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
+    )
+  }
+  return initOptions
+}

src/hooks/useChartDataFetch.hook.ts

@@ -1,112 +1,128 @@
-import { ref, toRefs, toRaw } from 'vue'
-import type VChart from 'vue-echarts'
-import { customizeHttp } from '@/api/http'
-import { useChartDataPondFetch } from '@/hooks/'
-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
-
-/**
- * setdata 数据监听与更改
- * @param targetComponent
- * @param useChartEditStore 若直接引会报错，只能动态传递
- * @param updateCallback 自定义更新函数
- */
-export const useChartDataFetch = (
-  targetComponent: CreateComponentType,
-  useChartEditStore: ChartEditStoreType,
-  updateCallback?: (...args: any) => any
-) => {
-  const vChartRef = ref<typeof VChart | null>(null)
-  let fetchInterval: any = 0
-
-  // 数据池
-  const { addGlobalDataInterface } = useChartDataPondFetch()
-
-  // 组件类型
-  const { chartFrame } = targetComponent.chartConfig
-
-  // eCharts 组件配合 vChart 库更新方式
-  const echartsUpdateHandle = (dataset: any) => {
-    if (chartFrame === ChartFrameEnum.ECHARTS) {
-      if (vChartRef.value) {
-        setOption(vChartRef.value, { dataset: dataset })
-      }
-    }
-  }
-
-  const requestIntervalFn = () => {
-    const chartEditStore = useChartEditStore()
-
-    // 全局数据
-    const {
-      requestOriginUrl,
-      requestIntervalUnit: globalUnit,
-      requestInterval: globalRequestInterval
-    } = toRefs(chartEditStore.getRequestGlobalConfig)
-
-    // 目标组件
-    const {
-      requestDataType,
-      requestUrl,
-      requestIntervalUnit: targetUnit,
-      requestInterval: targetInterval
-    } = toRefs(targetComponent.request)
-
-    // 非请求类型
-    if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
-
-    try {
-      // 处理地址
-      // @ts-ignore
-      if (requestUrl?.value) {
-        // requestOriginUrl 允许为空
-        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
-        if (!completePath) return
-
-        clearInterval(fetchInterval)
-
-        const fetchFn = async () => {
-          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
-          if (res) {
-            try {
-              const filter = targetComponent.filter
-              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
-              // 更新回调函数
-              if (updateCallback) {
-                updateCallback(newFunctionHandle(res?.data, res, filter))
-              }
-            } catch (error) {
-              console.error(error)
-            }
-          }
-        }
-
-        // 立即调用
-        fetchFn()
-        // 定时时间
-        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
-        // 单位
-        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
-        // 开启轮询
-        if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
-      }
-      // eslint-disable-next-line no-empty
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  if (isPreview()) {
-    // 判断是否是数据池类型
-    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
-      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
-      : requestIntervalFn()
-  }
-  return { vChartRef }
-}
+import { ref, toRefs, toRaw, watch } from 'vue'
+import type VChart from 'vue-echarts'
+import { customizeHttp } from '@/api/http'
+import { useChartDataPondFetch } from '@/hooks/'
+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
+
+/**
+ * setdata 数据监听与更改
+ * @param targetComponent
+ * @param useChartEditStore 若直接引会报错，只能动态传递
+ * @param updateCallback 自定义更新函数
+ */
+export const useChartDataFetch = (
+  targetComponent: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  updateCallback?: (...args: any) => any
+) => {
+  const vChartRef = ref<typeof VChart | null>(null)
+  let fetchInterval: any = 0
+
+  // 数据池
+  const { addGlobalDataInterface } = useChartDataPondFetch()
+
+  // 组件类型
+  const { chartFrame } = targetComponent.chartConfig
+
+  // eCharts 组件配合 vChart 库更新方式
+  const echartsUpdateHandle = (dataset: any) => {
+    if (chartFrame === ChartFrameEnum.ECHARTS) {
+      if (vChartRef.value) {
+        setOption(vChartRef.value, { dataset: dataset })
+      }
+    }
+  }
+
+  const requestIntervalFn = () => {
+    const chartEditStore = useChartEditStore()
+
+    // 全局数据
+    const {
+      requestOriginUrl,
+      requestIntervalUnit: globalUnit,
+      requestInterval: globalRequestInterval
+    } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+    // 目标组件
+    const {
+      requestDataType,
+      requestUrl,
+      requestIntervalUnit: targetUnit,
+      requestInterval: targetInterval
+    } = toRefs(targetComponent.request)
+
+    // 非请求类型
+    if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
+
+    try {
+      // 处理地址
+      // @ts-ignore
+      if (requestUrl?.value) {
+        // requestOriginUrl 允许为空
+        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
+        if (!completePath) return
+
+        clearInterval(fetchInterval)
+
+        const fetchFn = async () => {
+          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
+          if (res) {
+            try {
+              const filter = targetComponent.filter
+              const { data } = res
+              echartsUpdateHandle(newFunctionHandle(data, res, filter))
+              // 更新回调函数
+              if (updateCallback) {
+                updateCallback(newFunctionHandle(data, res, filter))
+              }
+            } catch (error) {
+              console.error(error)
+            }
+          }
+        }
+
+        // 普通初始化与组件交互处理监听
+        watch(
+          () => targetComponent.request.requestParams,
+          () => {
+            fetchFn()
+          },
+          {
+            immediate: true,
+            deep: true
+          }
+        )
+
+        // 定时时间
+        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+        // 单位
+        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+        // 开启轮询
+        if (time) {
+          fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+        } else {
+          fetchFn()
+        }
+      }
+      // eslint-disable-next-line no-empty
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  if (isPreview()) {
+    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
+      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
+      : requestIntervalFn()
+  } else {
+    requestIntervalFn()
+  }
+  return { vChartRef }
+}

src/hooks/useChartDataPondFetch.hook.ts

@@ -1,4 +1,4 @@
-import { toRaw } from 'vue'
+import { toRaw, watch, computed, ComputedRef } from 'vue'
 import { customizeHttp } from '@/api/http'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -20,7 +20,7 @@ const mittDataPondMap = new Map<string, DataPondMapType[]>()
 // 创建单个数据项轮询接口
 const newPondItemInterval = (
   requestGlobalConfig: RequestGlobalConfigType,
-  requestDataPondItem: RequestDataPondItemType,
+  requestDataPondItem: ComputedRef<RequestDataPondItemType>,
   dataPondMapItem?: DataPondMapType[]
 ) => {
   if (!dataPondMapItem) return
@@ -31,8 +31,7 @@ const newPondItemInterval = (
   // 请求
   const fetchFn = async () => {
     try {
-      const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
-
+      const res = await customizeHttp(toRaw(requestDataPondItem.value.dataPondRequestConfig), toRaw(requestGlobalConfig))
       if (res) {
         try {
           // 遍历更新回调函数
@@ -49,19 +48,32 @@ const newPondItemInterval = (
     }
   }
 
+  watch(
+    () => requestDataPondItem.value.dataPondRequestConfig.requestParams.Params,
+    () => {
+      fetchFn()
+    },
+    {
+      immediate: false,
+      deep: true
+    }
+  )
+
+
   // 立即调用
   fetchFn()
 
-  const targetInterval = requestDataPondItem.dataPondRequestConfig.requestInterval
-  const targetUnit = requestDataPondItem.dataPondRequestConfig.requestIntervalUnit
+
+  const targetInterval = requestDataPondItem.value.dataPondRequestConfig.requestInterval
+  const targetUnit = requestDataPondItem.value.dataPondRequestConfig.requestIntervalUnit
 
   const globalRequestInterval = requestGlobalConfig.requestInterval
   const globalUnit = requestGlobalConfig.requestIntervalUnit
 
   // 定时时间
-  const time = targetInterval  ? targetInterval : globalRequestInterval
+  const time = targetInterval ? targetInterval : globalRequestInterval
   // 单位
-  const unit = targetInterval  ? targetUnit : globalUnit
+  const unit = targetInterval ? targetUnit : globalUnit
   // 开启轮询
   if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
 }
@@ -96,13 +108,16 @@ export const useChartDataPondFetch = () => {
   }
 
   // 初始化数据池
-  const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
-    const { requestDataPond } = requestGlobalConfig
+  const initDataPond = (useChartEditStore: ChartEditStoreType) => {
+    const { requestGlobalConfig } = useChartEditStore()
+    const chartEditStore = useChartEditStore()
     // 根据 mapId 查找对应的数据池配置
     for (let pondKey of mittDataPondMap.keys()) {
-      const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
+      const requestDataPondItem = computed(() => {
+        return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
+      }) as ComputedRef<RequestDataPondItemType>
       if (requestDataPondItem) {
-        newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
+        newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
       }
     }
   }

src/hooks/useChartInteract.hook.ts

@@ -0,0 +1,59 @@
+import { toRefs } from 'vue'
+import { isPreview } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
+) => {
+  if (!isPreview()) return
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+
+    const globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem =>
+      cItem.dataPondId === item.interactComponentId
+    )
+    if (globalConfigPindAprndex !== -1) {
+      const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams)
+
+      Object.keys(item.interactFn).forEach(key => {
+        if (key in Params.value) {
+          Params.value[key] = param[item.interactFn[key]]
+        }
+        if (key in Header.value) {
+          Header.value[key] = param[item.interactFn[key]]
+        }
+      })
+    } else {
+      const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+      if (index === -1) return
+      const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+
+      Object.keys(item.interactFn).forEach(key => {
+        if (key in Params.value) {
+          Params.value[key] = param[item.interactFn[key]]
+        }
+        if (key in Header.value) {
+          Header.value[key] = param[item.interactFn[key]]
+        }
+      })
+    }
+  })
+}
+// 联动事件触发的 type 变更时，清除当前绑定内容
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+}

src/hooks/useLifeHandler.hook.ts

@@ -48,10 +48,10 @@ export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponen
   try {
     return new Function(`
       return (
-        async function(mouseEvent){
+        async function(components,mouseEvent){
           ${fnStr}
         }
-      )`)()
+      )`)().bind(undefined,components)
   } catch (error) {
     console.error(error)
   }

src/hooks/usePreviewScale.hook.ts

@@ -1,218 +1,218 @@
-import throttle from 'lodash/throttle'
-
-// 拆出来是为了更好的分离单独复用
-
-// * 屏幕缩放适配（两边留白）
-export const usePreviewFitScale = (
-  width: number,
-  height: number,
-  scaleDom: HTMLElement | null,
-  callback?: (scale: {
-    width: number;
-    height: number;
-  }) => void
-) => {
-  // * 画布尺寸（px）
-  const baseWidth = width
-  const baseHeight = height
-
-  // * 默认缩放值
-  const scale = {
-    width: 1,
-    height: 1,
-  }
-
-  // * 需保持的比例
-  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
-  const calcRate = () => {
-    // 当前屏幕宽高比
-    const currentRate = parseFloat(
-      (window.innerWidth / window.innerHeight).toFixed(5)
-    )
-    if (scaleDom) {
-      if (currentRate > baseProportion) {
-        // 表示更宽
-        scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
-        scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
-        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
-      } else {
-        // 表示更高
-        scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
-        scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
-        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
-      }
-      if (callback) callback(scale)
-    }
-  }
-
-  const resize = throttle(() => {
-    calcRate()
-  }, 200)
-
-  // * 改变窗口大小重新绘制
-  const windowResize = () => {
-    window.addEventListener('resize', resize)
-  }
-
-  // * 改变窗口大小重新绘制
-  const unWindowResize = () => {
-    window.removeEventListener('resize', resize)
-  }
-
-  return {
-    calcRate,
-    windowResize,
-    unWindowResize,
-  }
-}
-
-// *  X轴撑满，Y轴滚动条
-export const usePreviewScrollYScale = (
-  width: number,
-  height: number,
-  scaleDom: HTMLElement | null,
-  callback?: (scale: {
-    width: number;
-    height: number;
-  }) => void
-) => {
-  // * 画布尺寸（px）
-  const baseWidth = width
-  const baseHeight = height
-
-  // * 默认缩放值
-  const scale = {
-    width: 1,
-    height: 1,
-  }
-
-  // * 需保持的比例
-  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
-  const calcRate = () => {
-    if (scaleDom) {
-      scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
-      scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
-      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
-      if (callback) callback(scale)
-    }
-  }
-
-  const resize = throttle(() => {
-    calcRate()
-  }, 200)
-
-  // * 改变窗口大小重新绘制
-  const windowResize = () => {
-    window.addEventListener('resize', resize)
-  }
-
-  // * 改变窗口大小重新绘制
-  const unWindowResize = () => {
-    window.removeEventListener('resize', resize)
-  }
-
-  return {
-    calcRate,
-    windowResize,
-    unWindowResize,
-  }
-}
-
-// *  Y轴撑满，X轴滚动条
-export const usePreviewScrollXScale = (
-  width: number,
-  height: number,
-  scaleDom: HTMLElement | null,
-  callback?: (scale: {
-    width: number;
-    height: number;
-  }) => void
-) => {
-  // * 画布尺寸（px）
-  const baseWidth = width
-  const baseHeight = height
-
-  // * 默认缩放值
-  const scale = {
-    height: 1,
-    width: 1,
-  }
-
-  // * 需保持的比例
-  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
-  const calcRate = () => {
-    if (scaleDom) {
-      scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
-      scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
-      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
-      if (callback) callback(scale)
-    }
-  }
-
-  const resize = throttle(() => {
-    calcRate()
-  }, 200)
-
-  // * 改变窗口大小重新绘制
-  const windowResize = () => {
-    window.addEventListener('resize', resize)
-  }
-
-  // * 改变窗口大小重新绘制
-  const unWindowResize = () => {
-    window.removeEventListener('resize', resize)
-  }
-
-  return {
-    calcRate,
-    windowResize,
-    unWindowResize,
-  }
-}
-
-// * 变形内容，宽高铺满
-export const usePreviewFullScale = (
-  width: number,
-  height: number,
-  scaleDom: HTMLElement | null,
-  callback?: (scale: {
-    width: number;
-    height: number;
-  }) => void
-) => {
-
-  // * 默认缩放值
-  const scale = {
-    width: 1,
-    height: 1,
-  }
-
-  const calcRate = () => {
-    if (scaleDom) {
-      scale.width = parseFloat((window.innerWidth / width).toFixed(5))
-      scale.height = parseFloat((window.innerHeight / height).toFixed(5))
-      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
-      if (callback) callback(scale)
-    }
-  }
-
-  const resize = throttle(() => {
-    calcRate()
-  }, 200)
-
-  // * 改变窗口大小重新绘制
-  const windowResize = () => {
-    window.addEventListener('resize', resize)
-  }
-
-  // * 改变窗口大小重新绘制
-  const unWindowResize = () => {
-    window.removeEventListener('resize', resize)
-  }
-
-  return {
-    calcRate,
-    windowResize,
-    unWindowResize,
-  }
+import throttle from 'lodash/throttle'
+
+// 拆出来是为了更好的分离单独复用
+
+// * 屏幕缩放适配（两边留白）
+export const usePreviewFitScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+  // * 画布尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    width: 1,
+    height: 1,
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    // 当前屏幕宽高比
+    const currentRate = parseFloat(
+      (window.innerWidth / window.innerHeight).toFixed(5)
+    )
+    if (scaleDom) {
+      if (currentRate > baseProportion) {
+        // 表示更宽
+        scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
+        scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      } else {
+        // 表示更高
+        scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
+        scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      }
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 卸载监听
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
+
+// *  X轴撑满，Y轴滚动条
+export const usePreviewScrollYScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+  // * 画布尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    width: 1,
+    height: 1,
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
+      scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 卸载监听
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
+
+// *  Y轴撑满，X轴滚动条
+export const usePreviewScrollXScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+  // * 画布尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    height: 1,
+    width: 1,
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
+      scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 卸载监听
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
+
+// * 变形内容，宽高铺满
+export const usePreviewFullScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+
+  // * 默认缩放值
+  const scale = {
+    width: 1,
+    height: 1,
+  }
+
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.width = parseFloat((window.innerWidth / width).toFixed(5))
+      scale.height = parseFloat((window.innerHeight / height).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 卸载监听
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
 }

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/layout/components/LayoutMain/index.vue

@@ -1,13 +1,9 @@
 <template>
   <router-view>
     <template #default="{ Component, route }">
-      <component
-        v-if="route.noKeepAlive"
-        :is="Component"
-        :key="route.fullPath"
-      ></component>
+      <component v-if="route.meta.noKeepAlive" :is="Component"></component>
       <keep-alive v-else>
-        <component :is="Component" :key="route.fullPath"></component>
+        <component :is="Component"></component>
       </keep-alive>
     </template>
   </router-view>

src/layout/components/LayoutTransitionMain/index.vue

@@ -1,14 +1,14 @@
-<template>
-  <router-view #default="{ Component, route }">
-    <transition name="fade" mode="out-in" appear>
-      <component
-        v-if="route.noKeepAlive"
-        :is="Component"
-        :key="route.fullPath"
-      ></component>
-      <keep-alive v-else>
-        <component :is="Component" :key="route.fullPath"></component>
-      </keep-alive>
-    </transition>
-  </router-view>
-</template>
+<template>
+  <router-view #default="{ Component, route }">
+    <transition name="fade" mode="out-in" appear>
+      <component
+        v-if="route.meta.noKeepAlive"
+        :is="Component"
+        :key="route.fullPath"
+      ></component>
+      <keep-alive v-else>
+        <component :is="Component" :key="route.fullPath"></component>
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>

src/packages/chartConfiguration/echarts/index.ts

@@ -1,3 +1,4 @@
 export * from './axis'
 export * from './line'
-export * from './label'
+export * from './label'
+export * from './legend'

src/packages/chartConfiguration/echarts/legend.ts

@@ -0,0 +1,70 @@
+export const legendConfig = {
+  // X轴位置
+  lengendX: [
+    {
+      label: '靠左',
+      value: 'left'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠右',
+      value: 'right'
+    }
+  ],
+  // y轴位置
+  lengendY: [
+    {
+      label: '靠上',
+      value: 'top'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠下',
+      value: 'bottom'
+    }
+  ],
+  // 排列方向
+  orient: [
+    {
+      label: '水平',
+      value: 'horizontal'
+    },
+    {
+      label: '垂直',
+      value: 'vertical'
+    }
+  ],
+  // 形状
+  shape: [
+    {
+      label: '圆形',
+      value: 'circle'
+    },
+    {
+      label: '方形',
+      value: 'rect'
+    },
+    {
+      label: '圆角方形',
+      value: 'roundRect'
+    },
+    {
+      label: '三角形',
+      value: 'triangle'
+    },
+    {
+      label: '钢笔形',
+      value: 'pin'
+    },
+    {
+      label: '箭头形',
+      value: 'arrow'
+    }
+  ]
+}

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

@@ -1,19 +1,14 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
-    }"
-    autoresize
-  ></v-chart>
+    }" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -25,6 +20,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -41,6 +37,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()
@@ -57,11 +55,23 @@ watch(
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions = Array.isArray(oldData?.dimensions)&&oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1; 
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1;
+        const dimensionsGap = newDimensions - oldDimensions;
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if(!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length ) {
+              props.chartConfig.option.series=[]
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })

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

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -24,6 +26,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -40,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()
@@ -57,7 +62,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr

src/packages/components/Charts/Bars/BarLine/config.ts

@@ -0,0 +1,75 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+  type: 'bar',
+  barWidth: 15,
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  itemStyle: {
+    color: null,
+    borderRadius: 2
+  }
+}
+
+export const lineSeriesItem = {
+  type: 'line',
+  symbol: 'circle',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: '#FFE47A',
+    borderWidth: 1
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      show: true,
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: null
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = BarLineConfig.key
+  public chartConfig = cloneDeep(BarLineConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Bars/BarLine/config.vue

@@ -0,0 +1,93 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
+    :expanded="true"
+  >
+    <SettingItemBox name="图形" v-if="item.type == 'bar'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="线条" v-if="item.type == 'line'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点" v-if="item.type == 'line'">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="tip颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/Bars/BarLine/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "1月",
+      "data1": 104,
+      "data2": 30
+    },
+    {
+      "product": "2月",
+      "data1": 56,
+      "data2": 56
+    },
+    {
+      "product": "3月",
+      "data1": 136,
+      "data2": 36
+    },
+    {
+      "product": "4月",
+      "data1": 86,
+      "data2": 6
+    },
+    {
+      "product": "5月",
+      "data1": 98,
+      "data2": 10
+    },
+    {
+      "product": "6月",
+      "data1": 86,
+      "data2": 70
+    },
+    {
+      "product": "7月",
+      "data1": 77,
+      "data2": 57
+    }
+  ]
+}

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

@@ -0,0 +1,16 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+  key: 'BarLine',
+  chartKey: 'VBarLine',
+  conKey: 'VCBarLine',
+  title: '柱状图 & 折线图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_line.png'
+}

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

@@ -0,0 +1,73 @@
+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, PropType, nextTick } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(barSeriesItem, lineSeriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

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

@@ -1,5 +1,6 @@
-import { BarCommonConfig } from './BarCommon/index'
-import { BarCrossrangeConfig } from './BarCrossrange/index'
-import { CapsuleChartConfig } from './CapsuleChart/index'
-
-export default [BarCommonConfig, BarCrossrangeConfig, CapsuleChartConfig]
+import { BarCommonConfig } from './BarCommon/index'
+import { BarCrossrangeConfig } from './BarCrossrange/index'
+import { CapsuleChartConfig } from './CapsuleChart/index'
+import { BarLineConfig } from './BarLine/index'
+
+export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]

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

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -15,6 +16,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

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

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

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

@@ -33,6 +33,10 @@ export const option = {
         width: 3,
         color: {
           type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
           colorStops: [
             {
               offset: 0,

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

@@ -1,11 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const chartEditStore = useChartEditStore()

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

@@ -16,7 +16,8 @@ export enum ThemeEnum {
   MACARON = 'macaron',
   BLUE = 'blue',
   DARKBLUE = 'darkblue',
-  WINE = 'wine'
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
 }
 
 export enum LangEnum {

src/packages/components/Charts/Maps/MapAmap/config.vue

@@ -134,6 +134,10 @@ const themeOptions = [
   {
     value: ThemeEnum.WINE,
     label: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    label: '卫星'
   }
 ]
 

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

@@ -8,7 +8,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum } from './config'
+import { MarkerEnum, ThemeEnum } from './config'
 import { isArray } from '@/utils'
 
 const props = defineProps({
@@ -51,7 +51,6 @@ const initMap = (newData: any) => {
         resizeEnable: true,
         zoom: amapZindex.value, // 地图显示的缩放级别
         center: [amapLon.value, amapLat.value],
-        mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式
         lang: lang.value,
         features: features.value,
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
@@ -60,6 +59,14 @@ const initMap = (newData: any) => {
         willReadFrequently: true
       })
       dataHandle(props.chartConfig.option.dataset)
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
+      }
     })
     .catch(e => {})
 }

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

@@ -84,7 +84,10 @@ export const option = {
         shadowColor: '#E1FFFF',
         shadowBlur: 10
       },
-      data: []
+      data: [],
+      encode: {
+        value: 2
+      }
     },
     {
       name: '区域',

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

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
@@ -7,6 +7,7 @@
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
 import config, { includes } from './config'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   MapChart,
   DatasetComponent,
@@ -59,13 +62,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)
   }
@@ -127,7 +131,7 @@ watch(
 
 //监听地图展示区域发生变化
 watch(
-  () => props.chartConfig.option.mapRegion.adcode,
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
   async newData => {
     try {
       await getGeojson(newData)

src/packages/components/Charts/Mores/Dial/config.ts

@@ -0,0 +1,91 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { DialConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+const option = {
+  backgroundColor: '#0E1327',
+  dataset:70,
+  series: [{
+      type: "gauge",
+      data: [{
+          value: 70,
+          itemStyle: { // 指针样式
+              color: '#2AF4FF'
+          }
+      }],
+      min: 0, //最小刻度
+      max: 100, //最大刻度
+      splitNumber: 10, //刻度数量
+      center: ['50%', '55%'],
+      radius: '80%',
+      axisLine: {
+        lineStyle: {
+        color: [
+            [0, 'rgba(0,212,230,0.5)'],
+            [1, 'rgba(28,128,245,0)']
+          ],
+          width: 170
+        }
+      },
+      axisLabel: { // 文字样式
+        color: '#eee', 
+        fontSize: 14,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      detail: {
+        show: false,
+      },
+      pointer: {
+        length: '80%',
+        width: 4
+      },
+      animationDuration: 2000,
+    },
+    {
+      name: '外部刻度',
+      type: 'gauge',
+      center: ['50%', '55%'],
+      radius: '90%',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 25,
+          color: [ // 表盘外部颜色
+            [0, '#1369E380'],
+            [1, '#1369E380']
+          ],
+        }
+      }, 
+      axisLabel: {
+        show:false,
+      },
+      axisTick: {
+        splitNumber: 5,
+        lineStyle: { //刻度颜色
+          color: '#42E5FB',
+          width: 2,
+        },
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          color: '#42E5FB',
+        }
+      },
+    },
+  ]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DialConfig.key
+  public chartConfig = cloneDeep(DialConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Dial/config.vue

@@ -0,0 +1,84 @@
+<template>
+    <!-- 遍历 seriesList -->
+    <CollapseItem :name="`圆环`" :expanded="true">
+      <SettingItemBox name="数据">
+        <SettingItem name="数值">
+          <n-input-number v-model:value="config.dataset" :min="dialConfig.min" :max="dialConfig.max" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- Echarts 全局设置 -->
+      <!-- 表盘刻度字体 -->
+      <SettingItemBox name="字体">
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.axisLabel.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="字体大小">
+          <n-input-number
+            v-model:value="dialConfig.axisLabel.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="字体大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 表盘 -->
+      <SettingItemBox name="表盘外部">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisLine.lineStyle.color[1][1]"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <!-- 指针 -->
+      <SettingItemBox name="指针">
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="dialConfig.data[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+        <SettingItem name="宽度">
+          <n-input-number v-model:value="dialConfig.pointer.width" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="刻度">
+        <SettingItem name="最小值">
+          <n-input-number v-model:value="dialConfig.min" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="最大值">
+          <n-input-number v-model:value="dialConfig.max" :min="0" :step="1" size="small" placeholder="数值">
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色" >
+          <n-color-picker size="small" :modes="['hex']" v-model:value="config.series[1].axisTick.lineStyle.color" @update:value="updateClick"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+  
+    </CollapseItem>
+  </template>
+  
+  <script setup lang="ts">
+  import { PropType, computed } from 'vue'
+  import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+  import { GlobalThemeJsonType } from '@/settings/chartThemes'
+  
+  const props = defineProps({
+    optionData: {
+      type: Object as PropType<GlobalThemeJsonType>,
+      required: true
+    }
+  })
+  
+  const config = computed(() => {
+    return props.optionData
+  })
+  
+  const dialConfig = computed(() => {
+    return props.optionData.series[0]
+  })
+  
+  const updateClick = (val: any) => {
+    props.optionData.series[1].splitLine.lineStyle.color=val
+  }
+  </script>
+  

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const DialConfig: ConfigType = {
+  key: 'Dial',
+  chartKey: 'VDial',
+  conKey: 'VCDial',
+  title: '表盘',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image:'dial.png'
+}

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

@@ -0,0 +1,69 @@
+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  let config = props.chartConfig.option
+  config.series[0].data[0].value = newData
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  // @ts-ignore
+  option.value.series[0].data[0].value = resData
+})
+</script>

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { FunnelChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

src/packages/components/Charts/Mores/Graph/config.ts

@@ -0,0 +1,71 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GraphConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+// 关系图布局
+export const GraphLayout = [
+  { label: '无', value: 'none' },
+  { label: '环形', value: 'circular' }
+]
+
+// 标签开关
+export const LabelSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+// 标签位置
+export const LabelPosition = [
+  { label: '左侧', value: 'left' },
+  { label: '右侧', value: 'right' },
+  { label: '顶部', value: 'top' },
+  { label: '底部', value: 'bottom' },
+  { label: '内部', value: 'inside' },
+]
+
+export const option = {
+    dataset: { ...dataJson },
+    tooltip: {},
+    legend:{
+      show:true,
+      textStyle:{
+        color:"#eee",
+        fontSize: 14 ,
+      },
+      data: dataJson.categories.map(function (a) {
+          return a.name;
+      })
+    },
+    series: [
+      {
+        type: 'graph',
+        layout: 'none', // none circular环形布局
+        data: dataJson.nodes,
+        links: dataJson.links,
+        categories: dataJson.categories,
+        label: { // 标签
+          show: 1,
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        lineStyle: {
+          color: 'source', // 线条颜色
+          curveness: 0.2 // 线条卷曲程度
+        }
+      }
+    ]
+  };
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GraphConfig.key
+  public chartConfig = cloneDeep(GraphConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Graph/config.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <CollapseItem name="关系图" :expanded="true">
+      <SettingItemBox name="样式">
+        <setting-item name="布局">
+          <n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="标签">
+        <setting-item name="展示">
+          <n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="线条">
+        <SettingItem name="弧线">
+        <!-- 需要输入两位的小数才会变化 -->
+          <n-input-number
+          v-model:value="optionData.series[0].lineStyle.curveness"
+          :min="0"
+          :step="0.01"
+          placeholder="弯曲程度"
+          size="small"
+        ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="图例">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.legend.textStyle.color"
+        ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="文本">
+          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const graphConfig = computed<typeof option.series[0]>(() => {
+  return props.optionData.series[0]
+})
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GraphConfig: ConfigType = {
+  key: 'Graph',
+  chartKey: 'VGraph',
+  conKey: 'VCGraph',
+  title: '关系图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'graph.png'
+}

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

@@ -0,0 +1,80 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset.nodes) {
+    props.chartConfig.option.series[0].data = dataset.nodes
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series[0].links = dataset.links
+  }
+  if (dataset.categories) {
+    props.chartConfig.option.series[0].categories = dataset.categories
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -38,6 +39,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

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

@@ -3,7 +3,7 @@
     :type="type"
     :height="h"
     :processing="processing"
-    :percentage="option.dataset"
+    :percentage="dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :rail-color="railColor"
@@ -15,7 +15,7 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{ option.dataset }} {{ unit }}
+      {{ dataset }} {{ unit }}
     </n-text>
   </n-progress>
 </template>

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const vChartRef = ref<typeof VChart>()

src/packages/components/Charts/Mores/Sankey/config.ts

@@ -0,0 +1,43 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { SankeyConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 图表方向
+export const orientList = [
+  { label: '水平', value: 'horizontal' },
+  { label: '垂直', value: 'vertical' }
+]
+
+// 标签展示
+export const toolTipSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+export const option = {
+  dataset: { ...dataJson },
+  tooltip: {
+    show: 1,
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  series: {
+    type: 'sankey',
+    layout: 'none',
+    orient:'horizontal',
+    data: dataJson.label,
+    links: dataJson.links,
+    levels: dataJson.levels
+  }
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SankeyConfig.key
+  public chartConfig = cloneDeep(SankeyConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Sankey/config.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <CollapseItem name="桑基图" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="方向">
+          <n-select
+            v-model:value="sankeyConfig.orient"
+            size="small"
+            :options="orientList"
+            placeholder="选择方向"
+          />
+        </SettingItem>
+        <SettingItem name="提示标签">
+          <n-select
+            v-model:value="optionData.tooltip.show"
+            size="small"
+            :options="toolTipSwitch"
+            placeholder="是否开启"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, orientList, toolTipSwitch } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const sankeyConfig = computed<typeof option.series>(() => {
+  return props.optionData.series
+})
+
+</script>

src/packages/components/Charts/Mores/Sankey/data.json

@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": 5
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": 3
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": 8
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": 3
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": 1
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": 2
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const SankeyConfig: ConfigType = {
+  key: 'Sankey',
+  chartKey: 'VSankey',
+  conKey: 'VCSankey',
+  title: '桑基图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'sankey.png'
+}

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

@@ -0,0 +1,78 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataHandle = (dataset: typeof dataJson) => {
+  if (dataset.label) {
+    props.chartConfig.option.series.data = dataset.label
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series.links = dataset.links
+  }
+  if (dataset.levels) {
+    props.chartConfig.option.series.levels = dataset.levels
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataHandle(newData)
+})
+</script>

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, TreemapChart])
 
 const vChartRef = ref<typeof VChart>()

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent])
 
 const chartEditStore = useChartEditStore()

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

@@ -4,5 +4,8 @@ import { FunnelConfig } from './Funnel/index'
 import { HeatmapConfig } from './Heatmap/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
+import { DialConfig } from './Dial/index'
+import { SankeyConfig } from './Sankey/index'
+import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]

src/packages/components/Charts/Pies/PieCircle/config.vue

@@ -7,6 +7,22 @@
         </n-input-number>
       </SettingItem>
     </SettingItemBox>
+    <!-- 中心标题 -->
+    <SettingItemBox v-if="config.title" name="标题">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="config.title.textStyle.fontSize"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="字体大小"
+        >
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
     <!-- Echarts 全局设置 -->
     <SettingItemBox name="进度条">
       <SettingItem name="颜色">
@@ -31,24 +47,8 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <!-- 中心标题 -->
-    <SettingItemBox v-if="config.title" name="标题">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="字体大小">
-        <n-input-number
-          v-model:value="config.title.textStyle.fontSize"
-          :min="0"
-          :step="1"
-          size="small"
-          placeholder="字体大小"
-        >
-        </n-input-number>
-      </SettingItem>
-    </SettingItemBox>
     <!-- 其他样式 -->
-    <SettingItemBox name="轨道样式">
+    <SettingItemBox name="轨道">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
       </SettingItem>
@@ -69,6 +69,18 @@
           v-model:value="item.data[1].itemStyle.shadowColor"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem name="轨道宽度">
+        <n-select
+          v-model:value="item.radius[0]"
+          size="small"
+          :options="[
+            { label: '窄', value: '75%' },
+            { label: '中', value: '60%' },
+            { label: '宽', value: '45%' },
+            { label: '更宽', value: '30%' }
+          ]"
+        />
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>

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

@@ -1,10 +1,11 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
@@ -29,6 +30,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({
@@ -38,7 +41,7 @@ const option = reactive({
 const dataHandle = (newData: any) => {
   const d = parseFloat(`${newData}`) * 100
   let config = props.chartConfig.option
-  config.title.text = d.toFixed(2) + '%'
+  config.title.text = `${+d.toFixed(2)}%`
   config.series[0].data[0].value[0] = d
   config.series[0].data[1].value[0] = 100 - d
   option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -65,7 +68,7 @@ watch(
 useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
   let d = parseFloat(`${resData}`) * 100
   // @ts-ignore
-  option.value.title.text = d.toFixed(2) + '%'
+  option.value.title.text = `${+d.toFixed(2)}%`
   // @ts-ignore
   option.value.series[0].data[0].value[0] = d
   // @ts-ignore

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

@@ -18,7 +18,14 @@ export const PieTypeObject = {
   [PieTypeEnum.ROSE]: 'rose'
 }
 
+// 其它配置
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false,
+}
+
 const option = {
+  ...otherConfig,
   type: 'ring',
   tooltip: {
     show: true,

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -1,88 +1,99 @@
-<template>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem name="饼图配置" :expanded="true">
-    <SettingItemBox name="类型">
-      <SettingItem>
-        <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="标签">
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.series[0].label.show" size="small"></n-switch>
-          <n-text>展示标签</n-text>
-        </n-space>
-      </SettingItem>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
-          <n-text>引导线</n-text>
-        </n-space>
-      </setting-item>
-      <SettingItem name="位置">
-        <n-select v-model:value="optionData.series[0].label.position" size="small" :options="labelConfig.position" />
-      </SettingItem>
-      <setting-item name="展示类型">
-        <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
-      </setting-item>
-    </SettingItemBox>
-    <setting-item-box name="圆角">
-      <setting-item>
-        <n-space>
-          <n-input-number
-            v-model:value="optionData.series[0].itemStyle.borderRadius"
-            size="small"
-            :min="0"
-          ></n-input-number>
-          <n-text>圆角大小</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-input-number
-            v-model:value="optionData.series[0].itemStyle.borderWidth"
-            size="small"
-            :min="0"
-          ></n-input-number>
-          <n-text>线条宽度</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType, watch } from 'vue'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { PieTypeObject, PieTypeEnum } from './config'
-import { labelConfig } from '@/packages/chartConfiguration/echarts'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true
-  }
-})
-const fontWeightOptions = [
-  {
-    label: PieTypeEnum.NORMAL,
-    value: PieTypeObject[PieTypeEnum.NORMAL]
-  },
-  {
-    label: PieTypeEnum.RING,
-    value: PieTypeObject[PieTypeEnum.RING]
-  },
-  {
-    label: PieTypeEnum.ROSE,
-    value: PieTypeObject[PieTypeEnum.ROSE]
-  }
-]
-
-const labelFormatterOptions = [
-  { label: '数据名', value: '{b}' },
-  { label: '百分比', value: '{d}' },
-  { label: '列名:百分比', value: '{b}:{d}%' }
-]
-</script>
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="饼图配置" :expanded="true">
+    <SettingItemBox name="类型">
+      <SettingItem>
+        <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.series[0].label.show" size="small"></n-switch>
+          <n-text>展示标签</n-text>
+        </n-space>
+      </SettingItem>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
+          <n-text>引导线</n-text>
+        </n-space>
+      </setting-item>
+      <SettingItem name="位置">
+        <n-select v-model:value="optionData.series[0].label.position" size="small" :options="labelConfig.position" />
+      </SettingItem>
+      <setting-item name="展示类型">
+        <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
+      </setting-item>
+    </SettingItemBox>
+    <setting-item-box name="圆角">
+      <setting-item>
+        <n-space>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderRadius"
+            size="small"
+            :min="0"
+          ></n-input-number>
+          <n-text>圆角大小</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderWidth"
+            size="small"
+            :min="0"
+          ></n-input-number>
+          <n-text>线条宽度</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { PieTypeObject, PieTypeEnum } from './config'
+import { labelConfig } from '@/packages/chartConfiguration/echarts'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+const fontWeightOptions = [
+  {
+    label: PieTypeEnum.NORMAL,
+    value: PieTypeObject[PieTypeEnum.NORMAL]
+  },
+  {
+    label: PieTypeEnum.RING,
+    value: PieTypeObject[PieTypeEnum.RING]
+  },
+  {
+    label: PieTypeEnum.ROSE,
+    value: PieTypeObject[PieTypeEnum.ROSE]
+  }
+]
+
+const labelFormatterOptions = [
+  { label: '数据名', value: '{b}' },
+  { label: '百分比', value: '{d}' },
+  { label: '列名:百分比', value: '{b}:{d}%' }
+]
+</script>

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

@@ -1,61 +1,146 @@
-<template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-</template>
-
-<script setup lang="ts">
-import { computed, PropType, reactive, watch } from 'vue'
-import VChart from 'vue-echarts'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { PieChart } from 'echarts/charts'
-import { mergeTheme } from '@/packages/public/chart'
-import config, { includes } from './config'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true
-  }
-})
-
-use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
-
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-watch(
-  () => props.chartConfig.option.type,
-  newData => {
-    try {
-      if (newData === 'nomal') {
-        props.chartConfig.option.series[0].radius = '70%'
-        props.chartConfig.option.series[0].roseType = false
-      } else if (newData === 'ring') {
-        props.chartConfig.option.series[0].radius = ['40%', '65%']
-        props.chartConfig.option.series[0].roseType = false
-      } else {
-        props.chartConfig.option.series[0].radius = '70%'
-        props.chartConfig.option.series[0].roseType = true
-      }
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  { deep: false, immediate: true }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
-</script>
+<template>
+  <v-chart
+    ref="vChartRef"
+    autoresize
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, onMounted, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import dataJson from './data.json'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
+
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'highlight',
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, 1000)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.type,
+  newData => {
+    try {
+      if (newData === 'nomal') {
+        props.chartConfig.option.series[0].radius = '70%'
+        props.chartConfig.option.series[0].roseType = false
+      } else if (newData === 'ring') {
+        props.chartConfig.option.series[0].radius = ['40%', '65%']
+        props.chartConfig.option.series[0].roseType = false
+      } else {
+        props.chartConfig.option.series[0].radius = '70%'
+        props.chartConfig.option.series[0].roseType = true
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  { deep: false, immediate: true }
+)
+
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  addPieInterval(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+</script>

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

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { ScatterChart, EffectScatterChart } from 'echarts/charts'
@@ -46,6 +48,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

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

@@ -1,6 +1,7 @@
 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import ecStat from 'echarts-stat'
 import { use, registerTransform } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -47,6 +49,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

src/packages/components/Charts/index.d.ts

@@ -14,5 +14,6 @@ export enum ChatCategoryEnumName {
   LINE = '折线图',
   SCATTER = '散点图',
   MAP = '地图',
+  COMBINATION = '组合图',
   MORE = '更多'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border01Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border01.png'
 }

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

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

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border03Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border03.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border04Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border04.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border05Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border05.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border06Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border06.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border07Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border07.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border08Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border08.png'
 }

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

@@ -1,4 +1,4 @@
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border09Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border09.png'
 }