feat: supply more chart types into vchart libs

之前那样UI值不会随着预览更新更新到UI上，接口数变了，UI不变。
前端小白不懂之前为啥要那么写，简单修改一下

Signed-off-by: 初级开发人员 <qinweiw@foxmail.com>

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 .vscode
 .idea
+pnpm-lock

README.md

@@ -36,6 +36,13 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图
 
 - 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
 
+- 可视化：基于开源图表库[ECharts](https://echarts.apache.org/zh/index.html) 和 [VChart](https://www.visactor.io/vchart) 编写，具有丰富的图表类型和适配大屏的主题效果；
+
+- 入选 NaiveUI 社区精选资源推荐：[查看 NaiveUI 推荐列表](https://www.naiveui.com/zh-CN/light/docs/community)
+
+说明文档：
+![说明文档](readme/go-view-doc.png)
+
 工作台：
 ![项目截图](readme/go-view-canvas.png)
 

index.html

@@ -7,10 +7,8 @@
     <meta name="description" content="GoView 是高效、高性能的拖拽式低代码数据可视化开发平台，将页面元素封装为基础组件，无需编写代码即可完成业务需求。">
     <meta name="keywords" content="GoView，goview，低代码，可视化">
     <meta name="author" content="奔跑的面条，面条">
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" media="(min-width: 769px)">
     <link rel="icon" href="./favicon.ico" />
     <title>GoView</title>
     <link rel="stylesheet" href="./index.css" />

package.json

@@ -2,7 +2,7 @@
   "name": "go-view",
   "version": "1.1.11",
   "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=16.14"
   },
   "scripts": {
     "dev": "vite --host",
@@ -21,6 +21,8 @@
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
     "@types/lodash": "^4.14.184",
+    "@visactor/vchart": "^1.12.12",
+    "@visactor/vchart-theme": "^1.12.2",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "color": "^4.2.3",
@@ -37,11 +39,11 @@
     "keymaster": "^1.6.2",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.33.0",
-    "naive-ui": "2.34.3",
+    "naive-ui": "2.40.3",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
-    "vue": "^3.2.31",
+    "vue": "^3.5.13",
     "vue-demi": "^0.13.1",
     "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",

src/api/mock/index.ts

@@ -1,4 +1,5 @@
 import test from './test.mock'
+import vchart from './vchart.mock'
 import { MockMethod } from 'vite-plugin-mock'
 import { RequestHttpEnum } from '@/enums/httpEnum'
 
@@ -22,6 +23,8 @@ export const threeEarth01Url = '/mock/threeEarth01Data'
 export const sankeyUrl = '/mock/sankey'
 export const graphUrl = '/mock/graphData'
 
+export const vchartBarDataUrl = '/mock/vchart/barDataUrl'
+
 const mockObject: MockMethod[] = [
   {
     // 正则
@@ -115,6 +118,11 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.graphData
   },
+  {
+    url: vchartBarDataUrl,
+    method: RequestHttpEnum.GET,
+    response: () => vchart.bar
+  }
 ]
 
 export default mockObject

src/api/mock/vchart.mock.ts

@@ -0,0 +1,10 @@
+import bar from './vchart/bar.json'
+
+export default {
+  bar: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: bar
+  }
+}

src/api/mock/vchart/bar.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "year": "Africa", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "EU", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "China", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "USA", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "Africa", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "EU", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "China", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "USA", "value|100-900": 3 },
+    { "type": "Rouge", "year": "Africa", "value|100-900": 3 },
+    { "type": "Rouge", "year": "EU", "value|100-900": 3 },
+    { "type": "Rouge", "year": "China", "value|100-900": 3 },
+    { "type": "Rouge", "year": "USA", "value|100-900": 3 }
+  ]
+}

src/components/GoVChart/index.ts

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

src/components/GoVChart/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div
+    ref="vChartRef"
+    v-on="{
+      ...Object.fromEntries(event.map((eventName: string) => [eventName, (eventData: MouseEvent) => eventHandlers(eventData, eventName)]))
+    }"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, watch, onBeforeUnmount, nextTick, toRaw, toRefs } from 'vue'
+import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart'
+import { transformHandler } from './transformProps'
+import { IOption } from '@/packages/components/VChart/index.d'
+
+// 事件说明 v1.13.0 https://www.visactor.io/vchart/api/API/event
+const event = [
+  'mousedown',
+  'mouseup',
+  'mouseupoutside',
+  'rightdown',
+  'rightup',
+  'rightupoutside',
+  'click',
+  'dblclick',
+  'mousemove',
+  'mouseover',
+  'mouseout',
+  'mouseenter',
+  'mouseleave',
+  'wheel',
+  'touchstart',
+  'touchend',
+  'touchendoutside',
+  'touchmove',
+  'touchcancel',
+  'tap',
+  'dragstart',
+  'dragend',
+  'drag',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+  'pan',
+  'panstart',
+  'panend',
+  'press',
+  'pressup',
+  'pressend',
+  'pinch',
+  'pinchstart',
+  'pinchend',
+  'swipe',
+  'dimensionHover',
+  'dimensionClick',
+  'dataZoomChange',
+  'scrollBarChange',
+  'brushStart',
+  'brushChange',
+  'brushEnd',
+  'brushClear',
+  'drill',
+  'legendItemClick',
+  'legendItemHover',
+  'legendItemUnHover',
+  'legendFilter',
+  'initialized',
+  'rendered',
+  'renderFinished',
+  'animationFinished',
+  'layoutStart',
+  'layoutEnd',
+  'afterResizef'
+]
+const emit = defineEmits([
+  'mousedown',
+  'mouseup',
+  'mouseupoutside',
+  'rightdown',
+  'rightup',
+  'rightupoutside',
+  'click',
+  'dblclick',
+  'mousemove',
+  'mouseover',
+  'mouseout',
+  'mouseenter',
+  'mouseleave',
+  'wheel',
+  'touchstart',
+  'touchend',
+  'touchendoutside',
+  'touchmove',
+  'touchcancel',
+  'tap',
+  'dragstart',
+  'dragend',
+  'drag',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'drop',
+  'pan',
+  'panstart',
+  'panend',
+  'press',
+  'pressup',
+  'pressend',
+  'pinch',
+  'pinchstart',
+  'pinchend',
+  'swipe',
+  'dimensionHover',
+  'dimensionClick',
+  'dataZoomChange',
+  'scrollBarChange',
+  'brushStart',
+  'brushChange',
+  'brushEnd',
+  'brushClear',
+  'drill',
+  'legendItemClick',
+  'legendItemHover',
+  'legendItemUnHover',
+  'legendFilter',
+  'initialized',
+  'rendered',
+  'renderFinished',
+  'animationFinished',
+  'layoutStart',
+  'layoutEnd',
+  'afterResizef'
+])
+
+const props = defineProps({
+  option: {
+    type: Object as PropType<
+      IOption & {
+        dataset: any
+      }
+    >,
+    required: true
+  },
+  initOptions: {
+    type: Object as PropType<
+      IInitOption & {
+        deepWatch?: boolean | number
+      }
+    >,
+    required: false,
+    default: () => ({})
+  }
+})
+
+const vChartRef = ref()
+let chart: IVChart
+
+// 解构 props.option，排除 dataset
+const { dataset, ...restOfOption } = toRefs(props.option)
+
+// 排除 data 监听
+watch(
+  () => ({
+    ...restOfOption
+  }),
+  () => {
+    nextTick(() => {
+      createOrUpdateChart(props.option)
+    })
+  },
+  {
+    deep: props.initOptions?.deepWatch || true,
+    immediate: true
+  }
+)
+watch(
+  () => dataset.value,
+  () => {
+    nextTick(() => {
+      createOrUpdateChart(props.option)
+    })
+  },
+  {
+    deep: false
+  }
+)
+
+// 更新
+const createOrUpdateChart = (
+  chartProps: IOption & {
+    dataset: any
+  }
+) => {
+  if (vChartRef.value && !chart) {
+    const spec = transformHandler[chartProps.category](chartProps)
+    chart = new VChart(
+      { ...spec, data: chartProps.dataset },
+      {
+        dom: vChartRef.value,
+        ...props.initOptions
+      }
+    )
+    chart.renderSync()
+    return true
+  } else if (chart) {
+    const spec = transformHandler[chartProps.category](chartProps)
+    chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined })
+    return true
+  }
+  return false
+}
+
+// 刷新
+const refresh = () => {
+  if (chart) {
+    chart.renderSync()
+  }
+}
+
+// 抛出事件
+const eventHandlers = (eventData: MouseEvent, eventName: string) => {
+  if (event.includes(eventName)) emit(eventName as any, eventData)
+}
+
+// 卸载
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.release()
+  }
+})
+
+defineExpose({
+  // 重刷新
+  refresh,
+  release: () => {
+    if (chart) {
+      chart.release()
+    }
+  }
+})
+</script>

src/components/GoVChart/transformProps/areas.ts

@@ -0,0 +1,32 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-area-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/bars.ts

@@ -0,0 +1,34 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps,
+    // paddingInner: 0.5
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-bar-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/funnels.ts

@@ -0,0 +1,28 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+const INNER_RADIUS = 0.75
+const OUTER_RADIUS = 0.68
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // label
+  spec.label = {
+    visible: true,
+  }
+
+  // console.log('spec-funnel-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/index.ts

@@ -0,0 +1,20 @@
+import { ChatCategoryEnum, IOption } from "@/packages/components/VChart/index.d";
+import bars from './bars'
+import pies from './pies'
+import lines from './lines'
+import areas from './areas'
+import funnels from "./funnels";
+import wordClouds from "./wordClouds";
+import scatters from "./scatters";
+export const transformHandler: {
+  [key: string]: (args: IOption) => any
+} = {
+  [ChatCategoryEnum.BAR]: bars,
+  [ChatCategoryEnum.PIE]: pies,
+  [ChatCategoryEnum.LINE]: lines,
+  [ChatCategoryEnum.AREA]: areas,
+  [ChatCategoryEnum.FUNNEL]: funnels,
+  [ChatCategoryEnum.WORDCLOUD]: wordClouds,
+  [ChatCategoryEnum.SCATTER]: scatters,
+  // todo: more charts handler
+}

src/components/GoVChart/transformProps/lines.ts

@@ -0,0 +1,32 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-line-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/pies.ts

@@ -0,0 +1,139 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+const INNER_RADIUS = 0.75
+const OUTER_RADIUS = 0.68
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  spec.innerRadius = INNER_RADIUS
+  spec.outerRadius = OUTER_RADIUS
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // extensionMark
+  spec.extensionMark = [
+    {
+      name: 'arc_inner_shadow',
+      type: 'arc',
+      dataId: 'id0',
+      style: {
+        interactive: false,
+        startAngle: (datum: Datum) => {
+          console.log('startAngle', datum)
+          return datum['__VCHART_ARC_START_ANGLE'];
+        },
+        endAngle: (datum: Datum) => {
+          return datum['__VCHART_ARC_END_ANGLE'];
+        },
+        innerRadius: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * spec.innerRadius - 30;
+        },
+        outerRadius: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * spec.innerRadius;
+        },
+        fillOpacity: 0.3,
+        fill: (datum: Datum, context: any) => {
+          console.log('context', context.seriesColor(datum[spec.seriesField]))
+          return context.seriesColor(datum[spec.seriesField]);
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    },
+    {
+      name: 'arc_inner',
+      type: 'symbol',
+      // dataId: 'id0',
+      style: {
+        interactive: false,
+        size: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * 2 * spec.innerRadius - 100;
+        },
+        fillOpacity: 0,
+        lineWidth: 1,
+        strokeOpacity: 0.5,
+        stroke: {
+          gradient: 'conical',
+          startAngle: 0,
+          endAngle: Math.PI * 2,
+          stops: [
+            {
+              offset: 0,
+              color: '#FFF',
+              opacity: 0
+            },
+            {
+              offset: 1,
+              color: '#FFF',
+              opacity: 1
+            }
+          ]
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    },
+    {
+      name: 'arc_outer',
+      type: 'symbol',
+      // dataId: 'id0',
+      style: {
+        interactive: false,
+        size: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * 2 * spec.outerRadius + 50;
+        },
+        fillOpacity: 0,
+        lineWidth: 1,
+        strokeOpacity: 0.5,
+        stroke: {
+          gradient: 'conical',
+          startAngle: 0,
+          endAngle: Math.PI * 2,
+          stops: [
+            {
+              offset: 0,
+              color: '#FFF',
+              opacity: 0
+            },
+            {
+              offset: 1,
+              color: '#FFF',
+              opacity: 1
+            }
+          ]
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    }
+  ]
+
+  // console.log('spec-pie-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/scatters.ts

@@ -0,0 +1,35 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps,
+    label: {
+      formatMethod: (value: string) => Number(value).toFixed(2)
+    }
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-scatter-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/wordClouds.ts

@@ -0,0 +1,21 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+
+  // console.log('spec-word-cloud-transform', spec)
+  return spec
+}

src/components/Pages/VChartItemSetting/Axis.vue

@@ -0,0 +1,71 @@
+<template>
+  <collapse-item v-model:name="axis.name">
+    <template #header>
+      <n-switch v-model:value="axis.visible" size="small"></n-switch>
+    </template>
+    <setting-item-box name="轴标签">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="axis.label.visible" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name="角度">
+        <n-input-number v-model:value="axis.label.style.angle" :min="0" :max="360" size="small" />
+      </setting-item>
+      <FontStyle :style="axis.label.style"></FontStyle>
+    </setting-item-box>
+    <setting-item-box name="轴标题">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="axis.title.visible" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name="标题内容">
+        <n-input v-model:value="axis.title.style.text" size="small"></n-input>
+      </setting-item>
+      <FontStyle :style="axis.title.style"></FontStyle>
+    </setting-item-box>
+    <setting-item-box name="轴线">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="axis.domainLine.visible" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name=""> </setting-item>
+      <setting-item name="粗细">
+        <n-input-number v-model:value="axis.domainLine.style.lineWidth" :min="0" size="small" />
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="axis.domainLine.style.stroke" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="网格线">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="axis.grid.visible" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <setting-item name=""> </setting-item>
+      <setting-item name="粗细">
+        <n-input-number v-model:value="axis.grid.style.lineWidth" :min="0" size="small" />
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="axis.grid.style.stroke" size="small" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import FontStyle from './common/FontStyle.vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  axis: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/Legends.vue

@@ -0,0 +1,38 @@
+<template>
+  <!-- todo 补充常用配置项 -->
+  <div v-if="optionData.legends">
+    <div v-for="(legendItem, index) in optionData.legends" :key="index">
+      <collapse-item name="图例">
+        <template #header>
+          <n-switch v-model:value="legendItem.visible" size="small"></n-switch>
+        </template>
+        <setting-item-box name="布局">
+          <setting-item name="位置">
+            <n-select v-model:value="legendItem.orient" size="small" :options="legendsConfig.orient" />
+          </setting-item>
+          <setting-item name="对齐方式">
+            <n-select v-model:value="legendItem.position" size="small" :options="legendsConfig.position" />
+          </setting-item>
+        </setting-item-box>
+        <setting-item-box name="项配置">
+          <FontStyle :style="legendItem.item.label.style"></FontStyle>
+        </setting-item-box>
+      </collapse-item>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
+import FontStyle from './common/FontStyle.vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/Tooltip.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- todo 补充常用配置项 -->
+  <div v-if="optionData.tooltip">
+    <collapse-item name="提示框">
+      <template #header>
+        <n-switch v-model:value="optionData.tooltip.visible" size="small"></n-switch>
+      </template>
+      <setting-item-box name="框">
+        <setting-item name="填充">
+          <n-color-picker v-model:value="optionData.tooltip.style.panel.backgroundColor" size="small" />
+        </setting-item>
+        <setting-item name="瞄边">
+          <n-color-picker v-model:value="optionData.tooltip.style.panel.border.color" size="small" />
+        </setting-item>
+        <setting-item name="粗细">
+          <n-input-number v-model:value="optionData.tooltip.style.panel.border.width" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="圆角">
+          <n-input-number v-model:value="optionData.tooltip.style.panel.border.radius" :min="0" size="small" />
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="标题">
+        <FontStyle :style="optionData.tooltip.style.titleLabel"></FontStyle>
+      </setting-item-box>
+      <setting-item-box name="名称">
+        <FontStyle :style="optionData.tooltip.style.keyLabel"></FontStyle>
+      </setting-item-box>
+      <setting-item-box name="值">
+        <FontStyle :style="optionData.tooltip.style.valueLabel"></FontStyle>
+      </setting-item-box>
+    </collapse-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import FontStyle from './common/FontStyle.vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/VChartGlobalSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- 图例 -->
+  <Legends :optionData="optionData"></Legends>
+  <Tooltip :optionData="optionData"></Tooltip>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import Legends from './Legends.vue'
+import Tooltip from './Tooltip.vue'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/common/FontStyle.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- todo 补充常用配置项 -->
+  <!-- <div v-if="style"> -->
+  <!-- <setting-item-box v-if="style" name=""> -->
+  <setting-item name="颜色">
+    <n-color-picker v-model:value="style.fill" size="small" />
+  </setting-item>
+  <setting-item name="大小">
+    <n-input-number v-model:value="style.fontSize" :min="1" size="small" />
+  </setting-item>
+  <setting-item name="字体">
+    <n-select v-model:value="style.fontFamily" :options="fontStyleConfig.fontFamily" size="small" />
+  </setting-item>
+  <setting-item name="字重">
+    <n-select v-model:value="style.fontSize" :options="fontStyleConfig.fontWeight" size="small" />
+  </setting-item>
+  <!-- </setting-item-box> -->
+  <!-- </div> -->
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { fontStyleConfig } from '@/packages/chartConfiguration/vcharts/index'
+import { FontType } from '@/settings/vchartThemes/index'
+import { SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  style: {
+    type: Object as PropType<FontType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/index.ts

@@ -0,0 +1,4 @@
+import VChartGlobalSetting from './VChartGlobalSetting.vue'
+import Axis from './Axis.vue'
+
+export { VChartGlobalSetting, Axis }

src/hooks/index.ts

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

src/hooks/useChartDataFetch.hook.ts

@@ -7,6 +7,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
 import { setOption } from '@/packages/public/chart'
+import { isNil } from 'lodash'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -35,7 +36,7 @@ export const useChartDataFetch = (
   const echartsUpdateHandle = (dataset: any) => {
     if (chartFrame === ChartFrameEnum.ECHARTS) {
       if (vChartRef.value) {
-        setOption(vChartRef.value, { dataset: dataset })
+        setOption(vChartRef.value, { dataset: dataset }, false)
       }
     }
   }
@@ -101,14 +102,12 @@ export const useChartDataFetch = (
         )
 
         // 定时时间
-        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+        const time = targetInterval && !isNil(targetInterval.value) ? targetInterval.value : globalRequestInterval.value
         // 单位
-        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+        const unit = targetInterval && !isNil(targetInterval.value) ? targetUnit.value : globalUnit.value
         // 开启轮询
         if (time) {
           fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
-        } else {
-          fetchFn()
         }
       }
       // eslint-disable-next-line no-empty

src/hooks/useVCharts.hook.ts

@@ -0,0 +1,164 @@
+import { watch } from 'vue'
+import { VChart, type ITheme } from '@visactor/vchart'
+
+import light from '@visactor/vchart-theme/public/light.json'
+import dark from '@visactor/vchart-theme/public/dark.json'
+import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'
+import vScreenClean from '@visactor/vchart-theme/public/vScreenClean.json'
+import vScreenOutskirts from '@visactor/vchart-theme/public/vScreenOutskirts.json'
+import vScreenBlueOrange from '@visactor/vchart-theme/public/vScreenBlueOrange.json'
+import vScreenFinanceYellow from '@visactor/vchart-theme/public/vScreenFinanceYellow.json'
+import vScreenWenLvCyan from '@visactor/vchart-theme/public/vScreenWenLvCyan.json'
+import vScreenElectricGreen from '@visactor/vchart-theme/public/vScreenElectricGreen.json'
+import vScreenECommercePurple from '@visactor/vchart-theme/public/vScreenECommercePurple.json'
+import vScreenRedBlue from '@visactor/vchart-theme/public/vScreenRedBlue.json'
+import vScreenPartyRed from '@visactor/vchart-theme/public/vScreenPartyRed.json'
+// 行业色板
+import veODesignLightFinance from '@visactor/vchart-theme/public/veODesignLightFinance.json'
+import veODesignDarkFinance from '@visactor/vchart-theme/public/veODesignDarkFinance.json'
+
+import veODesignLightGovernment from '@visactor/vchart-theme/public/veODesignLightGovernment.json'
+import veODesignDarkGovernment from '@visactor/vchart-theme/public/veODesignDarkGovernment.json'
+
+import veODesignLightConsumer from '@visactor/vchart-theme/public/veODesignLightConsumer.json'
+import veODesignDarkConsumer from '@visactor/vchart-theme/public/veODesignDarkConsumer.json'
+
+import veODesignLightAutomobile from '@visactor/vchart-theme/public/veODesignLightAutomobile.json'
+import veODesignDarkAutomobile from '@visactor/vchart-theme/public/veODesignDarkAutomobile.json'
+
+import veODesignLightCulturalTourism from '@visactor/vchart-theme/public/veODesignLightCulturalTourism.json'
+import veODesignDarkCulturalTourism from '@visactor/vchart-theme/public/veODesignDarkCulturalTourism.json'
+
+import veODesignLightMedical from '@visactor/vchart-theme/public/veODesignLightMedical.json'
+import veODesignDarkMedical from '@visactor/vchart-theme/public/veODesignDarkMedical.json'
+
+import veODesignLightNewEnergy from '@visactor/vchart-theme/public/veODesignLightNewEnergy.json'
+import veODesignDarkNewEnergy from '@visactor/vchart-theme/public/veODesignDarkNewEnergy.json'
+
+const themeMap = {
+  // 明亮
+  light: light,
+  // 暗黑
+  dark: dark,
+  // 火山蓝
+  vScreenVolcanoBlue: vScreenVolcanoBlue,
+  // 党建红
+  vScreenPartyRed: vScreenPartyRed,
+  // 清新蜡笔
+  vScreenClean: vScreenClean,
+  // 郊外
+  vScreenOutskirts: vScreenOutskirts,
+  // 汽车蓝橙
+  vScreenBlueOrange: vScreenBlueOrange,
+  // 金融黄
+  vScreenFinanceYellow: vScreenFinanceYellow,
+  // 文旅青
+  vScreenWenLvCyan: vScreenWenLvCyan,
+  // 电力绿
+  vScreenElectricGreen: vScreenElectricGreen,
+  // 电商紫
+  vScreenECommercePurple: vScreenECommercePurple,
+  // 红蓝
+  vScreenRedBlue: vScreenRedBlue,
+  // 金融行业色板
+  veODesignLightFinance: veODesignLightFinance,
+  veODesignDarkFinance: veODesignDarkFinance,
+  // 政府行业色板
+  veODesignLightGovernment: veODesignLightGovernment,
+  veODesignDarkGovernment: veODesignDarkGovernment,
+  // 消费行业色板
+  veODesignLightConsumer: veODesignLightConsumer,
+  veODesignDarkConsumer: veODesignDarkConsumer,
+  // 汽车行业色板
+  veODesignLightAutomobile: veODesignLightAutomobile,
+  veODesignDarkAutomobile: veODesignDarkAutomobile,
+  // 文旅行业色板
+  veODesignLightCulturalTourism: veODesignLightCulturalTourism,
+  veODesignDarkCulturalTourism: veODesignDarkCulturalTourism,
+  // 医疗行业色板
+  veODesignLightMedical: veODesignLightMedical,
+  veODesignDarkMedical: veODesignDarkMedical,
+  // 新能源行业色板
+  veODesignLightNewEnergy: veODesignLightNewEnergy,
+  veODesignDarkNewEnergy: veODesignDarkNewEnergy
+}
+
+export const useVCharts = () => {
+  const getThemeMap = () => {
+    return themeMap
+  }
+
+  // 注册主题（支持自定义主题）
+  const registerTheme = (themeName: keyof typeof themeMap, theme: any) => {
+    VChart.ThemeManager.registerTheme(themeName, (themeMap[themeName] as any) || theme)
+  }
+
+  // 设置当前主题
+  const setCurrentTheme = (themeName = 'vScreenVolcanoBlue') => {
+    VChart.ThemeManager.setCurrentTheme(themeName)
+  }
+
+  // 判断主题是否存在
+  const themeExist = (name: string): boolean => {
+    return VChart.ThemeManager.themeExist(name)
+  }
+
+  // 获取主题
+  const getTheme = (name: string): ITheme => {
+    return VChart.ThemeManager.getTheme(name)
+  }
+
+  // 获取当前主题
+  const getCurrentTheme = (): ITheme => {
+    return VChart.ThemeManager.getCurrentTheme()
+  }
+
+  // 设置主题
+  const setTheme = (name: keyof typeof themeMap): boolean => {
+    if (themeExist(name)) {
+      setCurrentTheme(name)
+      return true
+    } else {
+      // 先注册
+      const theme = themeMap[name]
+      if (theme) {
+        registerTheme(name, theme)
+        setCurrentTheme(name)
+        return true
+      } else {
+        // 注册默认主题
+        registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue)
+      }
+    }
+    return false
+  }
+
+  return {
+    getThemeMap,
+    registerTheme,
+    setCurrentTheme,
+    themeExist,
+    getTheme,
+    setTheme,
+    getCurrentTheme
+  }
+}
+
+// 主题初始化
+export const useInitVChartsTheme = (chartEditStore: any) => {
+  const vCharts = useVCharts()
+
+  const initVChartsThemeIns = watch(
+    () => chartEditStore.getEditCanvasConfig.vChartThemeName,
+    (newTheme: string) => {
+      vCharts.setTheme(newTheme as any)
+    },
+    {
+      immediate: true
+    }
+  )
+
+  return {
+    initVChartsThemeIns
+  }
+}

src/layout/components/LayoutHeader/index.vue

@@ -38,18 +38,16 @@ const isProject = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-$min-width: 520px;
 @include go(header) {
   &-box {
-    display: grid;
-    grid-template-columns: repeat(3, 33%);
+    display: flex;
+    justify-content: space-between;
     &.is-project {
       grid-template-columns: none;
     }
     .header-item {
       display: flex;
       align-items: center;
-      min-width: $min-width;
       &.left {
         justify-content: start;
       }

src/packages/chartConfiguration/echarts/label.ts

@@ -3,5 +3,11 @@ export const labelConfig = {
     { label: '外侧', value: 'outside' },
     { label: '内部', value: 'inside' },
     { label: '中心', value: 'center' }
+  ],
+  fontWeight: [
+    { label: '正常', value: 'normal' },
+    { label: '普通加粗', value: 'bold' },
+    { label: '加粗', value: 'bolder' },
+    { label: '细体', value: 'lighter' }
   ]
 }

src/packages/chartConfiguration/vcharts/index.ts

@@ -0,0 +1 @@
+export * from './legends'

src/packages/chartConfiguration/vcharts/legends.ts

@@ -0,0 +1,99 @@
+export const legendsConfig = {
+  // 位置
+  orient: [
+    {
+      label: '顶部',
+      value: 'top'
+    },
+    {
+      label: '底部',
+      value: 'bottom'
+    },
+    {
+      label: '左侧',
+      value: 'left'
+    },
+    {
+      label: '右侧',
+      value: 'right'
+    }
+  ],
+  // 对齐方式
+  position: [
+    {
+      label: '起始',
+      value: 'start'
+    },
+    {
+      label: '居中',
+      value: 'middle'
+    },
+    {
+      label: '末尾',
+      value: 'end'
+    }
+  ],
+  // 每一项的图例位置
+  align: [
+    {
+      label: '居左',
+      value: 'left'
+    },
+    {
+      label: '居右',
+      value: 'right'
+    }
+  ]
+}
+
+export const fontStyleConfig = {
+  // 字重
+  fontWeight: [
+    {
+      label: '100',
+      value: 100
+    },
+    {
+      label: '200',
+      value: 200
+    },
+    {
+      label: '300',
+      value: 300
+    },
+    {
+      label: '400',
+      value: 400
+    },
+    {
+      label: '500',
+      value: 500
+    },
+    {
+      label: '600',
+      value: 600
+    },
+    {
+      label: '正常',
+      value: "normal"
+    },
+    {
+      label: '加粗',
+      value: "bold"
+    }
+  ],
+  fontFamily: [
+    {
+      label: '宋体',
+      value: 'SimSun'
+    },
+    {
+      label: '黑体',
+      value: 'SimHei'
+    },
+    {
+      label: '楷体',
+      value: '楷体'
+    }
+  ]
+}

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

@@ -28,7 +28,7 @@ export const option = {
       type: 'shadow'
     }
   },
-xAxis: {
+  xAxis: {
     show: true,
     type: 'category'
   },

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

@@ -1,8 +1,14 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
     :update-options="{
       replaceMerge: replaceMergeArr
-    }" autoresize></v-chart>
+    }"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -85,5 +91,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -4,7 +4,6 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
     }"
@@ -23,7 +22,6 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes, seriesItem } 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 isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
@@ -79,5 +77,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -33,7 +33,6 @@ export const lineSeriesItem = {
   },
   symbolSize: 5, //设定实心点的大小
   itemStyle: {
-    color: '#FFE47A',
     borderWidth: 1
   },
   lineStyle: {

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

@@ -4,7 +4,9 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
     autoresize
   ></v-chart>
 </template>
@@ -88,5 +90,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -4,7 +4,6 @@
     :init-options="initOptions"
     :theme="themeColor"
     :option="option"
-    :manual-update="isPreview()"
     :update-options="{
       replaceMerge: replaceMergeArr
     }"
@@ -79,5 +78,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
   </v-chart>
 </template>
 
@@ -82,5 +82,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -80,5 +80,7 @@ watch(
     option.value = props.chartConfig.option
   }
 )
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
   </v-chart>
 </template>
 
@@ -79,5 +79,7 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 </script>

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

@@ -81,8 +81,8 @@
       </SettingItem>
     </SettingItemBox>
 
-    <SettingItemBox name="悬浮 （预览可见）">
-      <SettingItem name="禁用">
+    <SettingItemBox name="鼠标悬停聚焦">
+      <SettingItem name="禁用（预览可见）">
         <n-space>
           <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
         </n-space>

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

@@ -49,16 +49,12 @@ const {
   dataset
 } = toRefs(props.chartConfig.option)
 
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
-
 // 手动更新
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     try {
-      option.dataset = toNumber(newData, 2)
+      dataset.value = toNumber(newData, 2)
     } catch (error) {
       console.log(error)
     }
@@ -69,6 +65,6 @@ watch(
 )
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
-  option.dataset = toNumber(newData, 2)
+  dataset.value = toNumber(newData, 2)
 })
 </script>

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

@@ -52,7 +52,11 @@ const option = {
         show: false,
         position: 'center',
         formatter: '{b}',
-        fontSize:12
+        fontWeight: 'normal',
+        fontSize: 14,
+        color: '#454E54',
+        textBorderColor: '#ffffff',
+        textBorderWidth: 1
       },
       emphasis: {
         label: {

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

@@ -18,6 +18,20 @@
         <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="图形">
+      <setting-item name="内圈范围">
+        <n-input v-model:value="optionData.series[0].radius[0]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="外圈范围">
+        <n-input v-model:value="optionData.series[0].radius[1]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="X轴中心">
+        <n-input v-model:value="optionData.series[0].center[0]" size="small"></n-input>
+      </setting-item>
+      <setting-item name="Y轴中心">
+        <n-input v-model:value="optionData.series[0].center[1]" size="small"></n-input>
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="标签">
       <SettingItem>
         <n-space>
@@ -38,28 +52,67 @@
         <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
       </setting-item>
     </SettingItemBox>
+    <setting-item-box name="字体">
+      <setting-item name="大小">
+        <n-input-number v-model:value="optionData.series[0].label.fontSize" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色" v-if="optionData.series[0].label.color">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.series[0].label.color"></n-color-picker>
+      </setting-item>
+      <SettingItem name="文字加粗" v-if="optionData.series[0].label.fontWeight">
+        <n-select
+          v-model:value="optionData.series[0].label.fontWeight"
+          size="small"
+          :options="labelConfig.fontWeight"
+        />
+      </SettingItem>
+      <setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
+        <n-input-number
+          v-model:value="optionData.series[0].label.textBorderWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="文字边框色" v-if="optionData.series[0].label.textBorderColor">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.series[0].label.textBorderColor"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
     <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 name="圆角大小">
+        <n-input-number
+          v-model:value="optionData.series[0].itemStyle.borderRadius"
+          size="small"
+          :min="0"
+        ></n-input-number>
       </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 name="线条宽度">
+        <n-input-number
+          v-model:value="optionData.series[0].itemStyle.borderWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="鼠标聚焦">
+      <setting-item name="文字大小">
+        <n-input-number
+          v-model:value="optionData.series[0].emphasis.label.fontSize"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <SettingItem name="文字加粗" v-if="optionData.series[0].emphasis.label.fontWeight">
+        <n-select
+          v-model:value="optionData.series[0].emphasis.label.fontWeight"
+          size="small"
+          :options="labelConfig.fontWeight"
+        />
+      </SettingItem>
+    </setting-item-box>
   </CollapseItem>
 </template>
 

src/packages/components/Decorates/FlowChart/FlowChartLine/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChartLineConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  endWidth: 15,
+  lineWidth: 2, //线条粗细
+  lineNum: 2, //向下数量
+  lineNumUp: 2, //向上数量
+  backgroundCol: '#303a4c', //线条背景
+  animateCol: '#3788ea' //流动动画背景
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlowChartLineConfig.key
+  public chartConfig = cloneDeep(FlowChartLineConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/config.vue

@@ -0,0 +1,37 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="折线数量">
+      <SettingItem name="向下增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
+      </SettingItem>
+      <SettingItem name="向上增加">
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="折线样式">
+      <SettingItem name="折线粗细">
+        <n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
+      </SettingItem>
+      <SettingItem name="背景条颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="流动颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChartLineConfig: ConfigType = {
+    key: 'FlowChartLine',
+    chartKey: 'VFlowChartLine',
+    conKey: 'VCFlowChartLine',
+    title: '流程线',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-zhexian.png'
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg :width="w" :height="h">
+    <polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      :points="getStartPoint(-1, '')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="animateCol"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
+const getStartPoint = (num: number, direction: string) => {
+  const lineLength = w.value / 2
+  const lineColLength =
+    h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
+  if (num === -1 && direction === '') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
+  } else if (num !== -1 && direction === 'down') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 + num * lineColLength}`
+  } else if (num !== -1 && direction === 'up') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 - num * lineColLength}`
+  }
+}
+</script>
+
+<style scoped>
+.g-dashed-line {
+  stroke-dasharray: 20 130;
+  stroke-dashoffset: 0;
+  animation: move 3s infinite linear;
+}
+@keyframes move {
+  0% {
+    stroke-dashoffset: 20;
+  }
+  100% {
+    stroke-dashoffset: -130;
+  }
+}
+</style>

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

@@ -0,0 +1,3 @@
+import { FlowChartLineConfig } from './FlowChartLine/index'
+
+export default [FlowChartLineConfig]

src/packages/components/Decorates/Mores/CirclePoint/config.ts

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CirclePointConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  outCircle: 15,
+  inCircle: 5,
+  outCircleColor: '#3f5261',
+  inCircleColor: '#fff',
+  outCircleWidth: 2
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CirclePointConfig.key
+  public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 }
+  public chartConfig = cloneDeep(CirclePointConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/CirclePoint/config.vue

@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="外圆环半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="内部圆形半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.inCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外圆环粗细">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircleWidth"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="外圆环颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outCircleColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内部圆形颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inCircleColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+
+  </CollapseItem>
+
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const CirclePointConfig: ConfigType = {
+    key: 'CirclePoint',
+    chartKey: 'VCirclePoint',
+    conKey: 'VCCirclePoint',
+    title: '圆点光环',
+    category: ChatCategoryEnum.MORE,
+    categoryName: ChatCategoryEnumName.MORE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'flow-circle.png'
+}

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

@@ -0,0 +1,28 @@
+<template>
+  <svg :width="w" :height="h">
+    <defs>
+      <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+      </filter>
+    </defs>
+    <circle :cx="w / 2 " :cy="h / 2" :r="inCircle" :fill="inCircleColor" filter="url(#blurFilter)"/>
+    <!-- 外部圆环 -->
+    <circle :cx="w / 2 " :cy="h / 2" :r="outCircle" fill="none" :stroke="outCircleColor"  :stroke-width="outCircleWidth"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+const { outCircle,inCircle,outCircleColor,inCircleColor,outCircleWidth} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -6,6 +6,7 @@ import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
+import { CirclePointConfig } from './CirclePoint/index'
 
 export default [
   NumberConfig,
@@ -15,5 +16,6 @@ export default [
   ClockConfig,
   FullScreenConfig,
   PipelineHConfig,
-  PipelineVConfig
+  PipelineVConfig,
+  CirclePointConfig
 ]

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

@@ -1,6 +1,7 @@
 export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
+  FlowChart = 'FlowChart',
   THREE = 'Three',
   MORE = 'Mores'
 }
@@ -8,6 +9,7 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
+  FlowChart = '流程',
   THREE = '三维',
   MORE = '更多'
-}
+}

src/packages/components/Decorates/index.ts

@@ -1,6 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
+import FlowChart from './FlowChart'
 import Three from './Three'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores]
+export const DecorateList = [...Borders, ...Decorates,...FlowChart, ...Three, ...Mores]

src/packages/components/Icons/Default/Icon/config.vue

@@ -8,8 +8,8 @@
         <n-input-number v-model:value="optionData.size" size="small" :min="0" placeholder="尺寸"></n-input-number>
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="旋转">
-      <setting-item name="旋转">
+    <setting-item-box name="快捷旋转">
+      <setting-item name="也可使用通用的【变换】来旋转">
         <n-select v-model:value="optionData.rotate" size="small" :options="rotateMode"></n-select>
       </setting-item>
     </setting-item-box>
@@ -35,15 +35,15 @@ const rotateMode = [
     label: '0°'
   },
   {
-    value: 1,
+    value: 90,
     label: '90°'
   },
   {
-    value: 2,
+    value: 180,
     label: '180°'
   },
   {
-    value: 3,
+    value: 270,
     label: '270°'
   }
 ]

src/packages/components/Informations/Inputs/InputsInput/index.ts

@@ -10,5 +10,5 @@ export const InputsInputConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.INPUTS,
     package: PackagesCategoryEnum.INFORMATIONS,
     chartFrame: ChartFrameEnum.STATIC,
-    image: 'inputs_select.png'
+    image: 'inputs_input.png'
 }

src/packages/components/Tables/Tables/TablesBasic/index.vue

@@ -36,6 +36,8 @@
 import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
@@ -83,6 +85,13 @@ watch(
     deep: true
   }
 )
+
+// setdata 数据监听与更改
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+
+
 </script>
 
 <style lang="scss" scoped>

src/packages/components/VChart/Areas/VChartArea/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartAreaConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IAreaOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IAreaOption & { dataset?: any } = {
+  // 图表配置
+  type: 'area',
+  dataset: data,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartAreaConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartAreaConfig.key
+  public chartConfig = cloneDeep(VChartAreaConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Areas/VChartArea/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Areas/VChartArea/data.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "country": "China", "value": 3054 },
+    { "type": "Nail polish", "country": "USA", "value": 12814 },
+    { "type": "Eyebrow pencil", "country": "China", "value": 5067 },
+    { "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
+    { "type": "Rouge", "country": "China", "value": 7004 },
+    { "type": "Rouge", "country": "USA", "value": 11624 },
+    { "type": "Lipstick", "country": "China", "value": 9054 },
+    { "type": "Lipstick", "country": "USA", "value": 8814 },
+    { "type": "Eyeshadows", "country": "China", "value": 12043 },
+    { "type": "Eyeshadows", "country": "USA", "value": 12998 },
+    { "type": "Eyeliner", "country": "China", "value": 15067 },
+    { "type": "Eyeliner", "country": "USA", "value": 12321 }
+  ]
+}

src/packages/components/VChart/Areas/VChartArea/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartAreaConfig: ConfigType = {
+  key: 'VChartArea',
+  chartKey: 'VVChartArea',
+  conKey: 'VCVChartArea',
+  title: 'VChart面积图',
+  category: ChatCategoryEnum.AREA,
+  categoryName: ChatCategoryEnumName.AREA,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_area.png'
+}

src/packages/components/VChart/Areas/VChartArea/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Areas/VChartPercentArea/config.ts

@@ -0,0 +1,48 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartPercentAreaConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IAreaOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IAreaOption & { dataset?: any } = {
+  // 图表配置
+  type: 'area',
+  dataset: data,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  stack: true,
+  percent: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartPercentAreaConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartPercentAreaConfig.key
+  public chartConfig = cloneDeep(VChartPercentAreaConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Areas/VChartPercentArea/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Areas/VChartPercentArea/data.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "country": "China", "value": 3054 },
+    { "type": "Nail polish", "country": "USA", "value": 12814 },
+    { "type": "Eyebrow pencil", "country": "China", "value": 5067 },
+    { "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
+    { "type": "Rouge", "country": "China", "value": 7004 },
+    { "type": "Rouge", "country": "USA", "value": 11624 },
+    { "type": "Lipstick", "country": "China", "value": 9054 },
+    { "type": "Lipstick", "country": "USA", "value": 8814 },
+    { "type": "Eyeshadows", "country": "China", "value": 12043 },
+    { "type": "Eyeshadows", "country": "USA", "value": 12998 },
+    { "type": "Eyeliner", "country": "China", "value": 15067 },
+    { "type": "Eyeliner", "country": "USA", "value": 12321 }
+  ]
+}

src/packages/components/VChart/Areas/VChartPercentArea/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartPercentAreaConfig: ConfigType = {
+  key: 'VChartPercentArea',
+  chartKey: 'VVChartPercentArea',
+  conKey: 'VCVChartPercentArea',
+  title: 'VChart百分比面积图',
+  category: ChatCategoryEnum.AREA,
+  categoryName: ChatCategoryEnumName.AREA,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_percent_area.png'
+}

src/packages/components/VChart/Areas/VChartPercentArea/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Areas/index.ts

@@ -0,0 +1,4 @@
+import { VChartAreaConfig } from './VChartArea/index'
+import { VChartPercentAreaConfig } from './VChartPercentArea/index'
+
+export default [VChartAreaConfig, VChartPercentAreaConfig]

src/packages/components/VChart/Bars/VChartBarCommon/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarCommonConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  stack: true,
+  xField: ['year', 'type'],
+  yField: ['value'],
+  seriesField: 'type',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarCommonConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarCommonConfig.key
+  public chartConfig = cloneDeep(VChartBarCommonConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Bars/VChartBarCommon/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarCommon/data.json

@@ -0,0 +1,25 @@
+{
+  "values": [
+    { "type": "Autocracies", "year": "1930", "value": 129 },
+    { "type": "Autocracies", "year": "1940", "value": 133 },
+    { "type": "Autocracies", "year": "1950", "value": 130 },
+    { "type": "Autocracies", "year": "1960", "value": 126 },
+    { "type": "Autocracies", "year": "1970", "value": 117 },
+    { "type": "Autocracies", "year": "1980", "value": 114 },
+    { "type": "Autocracies", "year": "1990", "value": 111 },
+    { "type": "Autocracies", "year": "2000", "value": 89 },
+    { "type": "Autocracies", "year": "2010", "value": 80 },
+    { "type": "Autocracies", "year": "2018", "value": 80 },
+
+    { "type": "Democracies", "year": "1930", "value": 22 },
+    { "type": "Democracies", "year": "1940", "value": 13 },
+    { "type": "Democracies", "year": "1950", "value": 25 },
+    { "type": "Democracies", "year": "1960", "value": 29 },
+    { "type": "Democracies", "year": "1970", "value": 38 },
+    { "type": "Democracies", "year": "1980", "value": 41 },
+    { "type": "Democracies", "year": "1990", "value": 57 },
+    { "type": "Democracies", "year": "2000", "value": 87 },
+    { "type": "Democracies", "year": "2010", "value": 98 },
+    { "type": "Democracies", "year": "2018", "value": 99 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarCommon/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarCommonConfig: ConfigType = {
+  key: 'VChartBarCommon',
+  chartKey: 'VVChartBarCommon',
+  conKey: 'VCVChartBarCommon',
+  title: 'VChart并列柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_x.png'
+}

src/packages/components/VChart/Bars/VChartBarCommon/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Bars/VChartBarStack/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarStackConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  xField: ['type'],
+  yField: ['value'],
+  seriesField: 'year',
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarStackConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarStackConfig.key
+  public chartConfig = cloneDeep(VChartBarStackConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Bars/VChartBarStack/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarStack/data.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "year": "Africa", "value": 590 },
+    { "type": "Nail polish", "year": "EU", "value": 450 },
+    { "type": "Nail polish", "year": "China", "value": 474 },
+    { "type": "Nail polish", "year": "USA", "value": 459 },
+    { "type": "Eyebrow pencil", "year": "Africa", "value": 746 },
+    { "type": "Eyebrow pencil", "year": "EU", "value": 176 },
+    { "type": "Eyebrow pencil", "year": "China", "value": 210 },
+    { "type": "Eyebrow pencil", "year": "USA", "value": 775 },
+    { "type": "Rouge", "year": "Africa", "value": 896 },
+    { "type": "Rouge", "year": "EU", "value": 784 },
+    { "type": "Rouge", "year": "China", "value": 866 },
+    { "type": "Rouge", "year": "USA", "value": 899 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarStack/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarStackConfig: ConfigType = {
+  key: 'VChartBarStack',
+  chartKey: 'VVChartBarStack',
+  conKey: 'VCVChartBarStack',
+  title: 'VChart堆叠柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_x_stack.png'
+}

src/packages/components/VChart/Bars/VChartBarStack/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

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

@@ -0,0 +1,4 @@
+import { VChartBarCommonConfig } from './VChartBarCommon/index'
+import { VChartBarStackConfig } from './VChartBarStack/index'
+
+export default [VChartBarCommonConfig, VChartBarStackConfig]

src/packages/components/VChart/Funnels/VChartFunnel/config.ts

@@ -0,0 +1,25 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartFunnelConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import { IFunnelOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IFunnelOption & { dataset?: any } = {
+  // 图表配置
+  type: 'funnel',
+  dataset: data,
+  categoryField: 'name',
+  valueField: 'value',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartFunnelConfig.category,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartFunnelConfig.key
+  public chartConfig = cloneDeep(VChartFunnelConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Funnels/VChartFunnel/config.vue

@@ -0,0 +1,17 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Funnels/VChartFunnel/data.json

@@ -0,0 +1,24 @@
+{
+  "values": [
+    {
+      "value": 100,
+      "name": "Step1"
+    },
+    {
+      "value": 80,
+      "name": "Step2"
+    },
+    {
+      "value": 60,
+      "name": "Step3"
+    },
+    {
+      "value": 40,
+      "name": "Step4"
+    },
+    {
+      "value": 20,
+      "name": "Step5"
+    }
+  ]
+}

src/packages/components/VChart/Funnels/VChartFunnel/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartFunnelConfig: ConfigType = {
+  key: 'VChartFunnel',
+  chartKey: 'VVChartFunnel',
+  conKey: 'VCVChartFunnel',
+  title: 'VChart漏斗图',
+  category: ChatCategoryEnum.FUNNEL,
+  categoryName: ChatCategoryEnumName.FUNNEL,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_funnel.png'
+}

src/packages/components/VChart/Funnels/VChartFunnel/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Funnels/index.ts

@@ -0,0 +1,3 @@
+import { VChartFunnelConfig } from './VChartFunnel/index'
+
+export default [VChartFunnelConfig]