Pre Merge pull request !254 from Skie Chen/dev-vchart-supply-charts

README.md

@@ -1,30 +1,150 @@
-## 总览
+<p align="center">
+  <a
+      href="https://ai.goviewlink.com/saas/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+      ">
+    <img src="readme/GoViewPro.png" alt="go-view" />
+  </a>
+</p>
 
-![logo](readme/logo-t-y.png)
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>
 
-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>
 
-### 😶 纯 **前端** 分支： **`master`**
+#### 长期赞助商
 
-### 👻 携带 **后端** 请求分支: **`master-fetch`**
+<div>
+  <div align="center" style="column-gap: 20px;">
+    <a
+      href="http://www.ccflow.org/?from=goviewGitee"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
+    </a>
+    <span> &nbsp;</span>
+    <a
+      href="https://fastbee.cn/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/fb-banner.gif" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+    <br/>
+    <br/>
+    <a
+      href="http://doc.zyplayer.com/#/integrate/zyplayer-doc?utm=goview"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/zyplayer-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+    <span> &nbsp;</span>
+    <!-- <a
+      href="https://gitee.com/dandiankeji/icampus"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/dandian-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>   -->
+    <a
+      href="https://www.mingdao.com?s=utm_88&utm_source=Goview&utm_medium=banner&utm_campaign=gitee&utm_content=IT%E8%B5%8B%E8%83%BD%E4%B8%9A%E5%8A%A1"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/mdy-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
+    </a>
+    <br/>
+    <br/>
+    <a
+      href="https://www.diboot.com?from=gv/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/diboot-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
+    </a>
+    <a
+      href="https://www.xingyunzuo.cn/?from=goview"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/xingyun-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
+    </a>
+    <br/>
+    <br/>
+    <a
+      href="https://www.mtruning.club/chengDan/index.html"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/chengdan-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
+    </a>
+  </div>
+</div>
 
-### 📚 GoView **文档** 地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+#### 😶 **纯前端** 分支： **`master`**
 
-项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club)
+#### 👻 携带 **后端** 请求分支: **`master-fetch`**
 
-项目带后端-Demo 地址：[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
+#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)
 
-文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)
 
-文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
+项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)
 
-### 🤯 后端项目
+Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)
 
-后端项目 gitee 地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)
+#### 🤯 后端项目看这里!
 
-接口说明地址：[https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)
+后端地址（社区实现，仅供参考）：
 
-技术点：
+- `JAVA` [https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve) (当前使用)
+- `.NET` [https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
+- `NODE` [https://gitee.com/qwdingyu/led](https://gitee.com/qwdingyu/led)
+- `Docker 镜像` [https://gitee.com/AHEAD4/go-view-docker](https://gitee.com/AHEAD4/go-view-docker)
+- `GO-goframe` [https://gitee.com/bufanyun/go-view-server](https://gitee.com/bufanyun/go-view-server)
+- `GO-gin` [https://gitee.com/ls1990/go-view-serve](https://gitee.com/ls1990/go-view-serve)
+- `接口文档` [https://docs.apipost.cn](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3) (不是最新, 以前端代码为准)
+
+#### 整体介绍
 
 - 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰；
 
@@ -36,17 +156,39 @@ 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)
+![工作台](readme/go-view-canvas.png)
 
 请求配置：
-![项目截图](readme/go-view-fetch.png)
+![请求配置](readme/go-view-fetch.png)
 
 数据过滤：
-![项目截图](readme/go-view-filter.png)
+![数据过滤](readme/go-view-filter.png)
+
+高级事件编辑:
+![高级事件编辑](readme/go-view-event.png)
+
+自定义组件颜色:
+![高级事件编辑](readme/go-view-echarts-color.png)
+
+快捷主页：
+![快捷主页](readme/go-view-indexpage.png)
 
 主题色：
-![项目截图](readme/go-view-color.png)
+![主题色](readme/go-view-color.png)
+
+亮白主题：
+![亮白主题](readme/go-view-theme.png)
+
+最新动态: 整合字节图表框架 VChart[https://visactor.io/vchart](https://visactor.io/vchart)
+![图表框架 VChart](readme/go-view-vcharts.png)
 
 主要技术栈为：
 
@@ -59,21 +201,24 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图
 
 开发环境:
 
-| 名称 | 版本    | 名称    | 版本  |
-| ---- | ------- | ------- | ----- |
-| node | 16.16.x | npm     | 8.5.x |
-| pnpm | 7.1.x   | windows | 11    |
+| 名称 | 版本    | 名称    | 版本   |
+| ---- | ------- | ------- | ------ |
+| node | 18.20.x | npm     | 10.7.x |
+| pnpm | 8.6.7   | windows | 11     |
 
 已完成图表：
 
-| 分类   | 名称             | 名称             | 名称     |
-| ------ | ---------------- | ---------------- | -------- |
-| 图表   | 柱状图           | 横向柱状图       | 折线图   |
-| \*     | 单/多 折线面积图 | 饼图             | 水球图   |
-| \*     | 环形图           | NaiveUI 多种进度 | 🤠       |
-| 信息   | 文字             | 图片             | 😶       |
-| 列表   | 滚动排名列表     | 滚动表格         | 🤓       |
-| 小组件 | 边框-01~13       | 装饰-01~05       | 数字翻牌 |
+| 分类   | 名称             | 名称       | 名称           | 名称                     |
+| ------ | ---------------- | ---------- | -------------- | ------------------------ |
+| 图表   | 柱状图           | 横向柱状图 | 折线图         | 单/多 折线面积图(渐变色) |
+| \*     | 饼图             | 环形图     | 水球图         | 雷达图                   |
+| \*     | NaiveUI 多种进度 | 散点图     | 对数回归散点图 | 热力图                   |
+| \*     | 漏斗图           | 中国地图   | 高德地图       | 🦊                       |
+| 信息   | 文字             | 渐变文字   | 词云           | 嵌套网页                 |
+| \*     | 图片             | 视频       | 😺             | 🐯                       |
+| 列表   | 滚动排名列表     | 滚动表格   | 🐮             | 🐐                       |
+| 小组件 | 边框-01~13       | 装饰-01~05 | 数字翻牌       | 通用时间                 |
+| \*     | 数字计数         | 倒计时     | 时钟           | 🦁                       |
 
 ## 浏览器支持
 
@@ -81,52 +226,7 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图
 
 ## 安装
 
-本项目采用` pnpm` 进行包管理
-
-```shell
-#建议使用 nrm 切换到淘宝源 https://registry.npmmirror.com/
-#pnpm
-pnpm install
-
-#yarn
-yarn install
-
-#npm
-npm install
-```
-
-## 启动
-
-```shell
-#pnpm
-pnpm dev
-
-# npm
-npm run dev
-
-#yarn
-yarn dev
-
-#Makefile
-make dev
-```
-
-## 编译
-
-```shell
-#pnpm
-pnpm run build
-
-# npm
-npm run build
-
-#yarn
-yarn run build
-
-#Makefile
-make dist
-
-```
+请查看文档：[https://www.mtruning.club/](https://www.mtruning.club/)
 
 ## 代码提交
 
@@ -142,10 +242,14 @@ make dist
 - style: 不影响程序逻辑的代码修改
 - chore: 不属于以上类型的其他类型(日常事务)
 
-## 交流
+## 交流群
 
-QQ 群：1030129384
+QQ 群：687586375
 
-![QQ群](readme/go-view-qq.png)
+<img width="260px" src="readme/go-view-qq.jpg" alt="QQ群" style="border-radius: 20px" />
+
+## Pro 部分功能展示
+
+体验地址： <a href="https://ai.goviewlink.com/saas/" target="_blank">https://ai.goviewlink.com/saas/</a>
 
 ![渲染海报](readme/logo-poster.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-view",
-  "version": "1.1.11",
+  "version": "1.3.1",
   "engines": {
     "node": ">=16.14"
   },

preview.yml

@@ -0,0 +1,10 @@
+# preview.yml
+autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
+apps:
+  - port: 3000 # 应用的端口
+    run: npm i --registry=https://registry.npmmirror.com && npm run dev # 应用的启动命令
+    command: # 使用此命令启动服务，且不执行run
+    root: ./ # 应用的启动目录
+    name: GoView # 应用名称
+    description: 开源、精美、便捷的「数据可视化」低代码开发平台 # 应用描述
+    autoOpen: true # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen)

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

@@ -20,13 +20,15 @@ export default (chartProps: any) => {
   const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
   spec.axes = [{
     orient: 'bottom',
-    ...restXAxisProps
+    ...restXAxisProps,
+    // paddingInner: 0.5
   }, {
     orient: 'left',
     ...restYAxisProps
   }]
+
   delete spec.xAxis
   delete spec.yAxis
-  console.log('spec-transform', spec)
+  // 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

@@ -1,8 +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/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/index.ts

@@ -5,7 +5,7 @@ export const VChartBarCommonConfig: ConfigType = {
   key: 'VChartBarCommon',
   chartKey: 'VVChartBarCommon',
   conKey: 'VCVChartBarCommon',
-  title: 'VChart柱状图',
+  title: 'VChart并列柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.VCHART,

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

@@ -5,7 +5,7 @@ export const VChartBarStackConfig: ConfigType = {
   key: 'VChartBarStack',
   chartKey: 'VVChartBarStack',
   conKey: 'VCVChartBarStack',
-  title: 'VChart柱状图',
+  title: 'VChart堆叠柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.VCHART,

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]

src/packages/components/VChart/Lines/VChartLine/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartLineConfig } 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 { ILineOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: ILineOption & { dataset?: any } = {
+  // 图表配置
+  type: 'line',
+  dataset: data,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartLineConfig.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 = VChartLineConfig.key
+  public chartConfig = cloneDeep(VChartLineConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Lines/VChartLine/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/Lines/VChartLine/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/Lines/VChartLine/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartLineConfig: ConfigType = {
+  key: 'VChartLine',
+  chartKey: 'VVChartLine',
+  conKey: 'VCVChartLine',
+  title: 'VChart折线图',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_line.png'
+}

src/packages/components/VChart/Lines/VChartLine/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/Lines/index.ts

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

src/packages/components/VChart/Pies/VChartPie/config.ts

@@ -0,0 +1,26 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartPieConfig } 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 { IPieOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IPieOption & { dataset?: any } = {
+  // 图表配置
+  type: 'pie',
+  dataset: data,
+  categoryField: 'year',
+  valueField: 'value',
+  seriesField: 'year',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartPieConfig.category,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartPieConfig.key
+  public chartConfig = cloneDeep(VChartPieConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Pies/VChartPie/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/Pies/VChartPie/data.json

@@ -0,0 +1,14 @@
+{
+  "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 }
+  ]
+}

src/packages/components/VChart/Pies/VChartPie/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartPieConfig: ConfigType = {
+  key: 'VChartPie',
+  chartKey: 'VVChartPie',
+  conKey: 'VCVChartPie',
+  title: 'VChart饼图',
+  category: ChatCategoryEnum.PIE,
+  categoryName: ChatCategoryEnumName.PIE,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_pie.png'
+}

src/packages/components/VChart/Pies/VChartPie/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/Pies/index.ts

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

src/packages/components/VChart/Scatters/VChartScatter/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartScatterConfig } 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: 'scatter',
+  dataset: data,
+  stack: true,
+  xField: 'x',
+  yField: 'horsepower',
+  seriesField: 'cylinders',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartScatterConfig.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 = VChartScatterConfig.key
+  public chartConfig = cloneDeep(VChartScatterConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Scatters/VChartScatter/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/Scatters/VChartScatter/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartScatterConfig: ConfigType = {
+  key: 'VChartScatter',
+  chartKey: 'VVChartScatter',
+  conKey: 'VCVChartScatter',
+  title: 'VChart散点图',
+  category: ChatCategoryEnum.SCATTER,
+  categoryName: ChatCategoryEnumName.SCATTER,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_scatter.png'
+}

src/packages/components/VChart/Scatters/VChartScatter/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/Scatters/index.ts

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

src/packages/components/VChart/WordClouds/VChartWordCloud/config.ts

@@ -0,0 +1,26 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartWordCloudConfig } 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 { IWordCloudOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IWordCloudOption & { dataset?: any } = {
+  // 图表配置
+  type: 'wordCloud',
+  dataset: data,
+  nameField: 'name',
+  valueField: 'value',
+  seriesField: 'name',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartWordCloudConfig.category,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartWordCloudConfig.key
+  public chartConfig = cloneDeep(VChartWordCloudConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/WordClouds/VChartWordCloud/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/WordClouds/VChartWordCloud/data.json

@@ -0,0 +1,88 @@
+{
+  "values": [
+    {
+      "name": "数据可视化",
+      "value": 8000
+    },
+    {
+      "name": "GO VIEW",
+      "value": 6181
+    },
+    {
+      "name": "低代码",
+      "value": 4386
+    },
+    {
+      "name": "Vue3",
+      "value": 4055
+    },
+    {
+      "name": "TypeScript4",
+      "value": 2467
+    },
+    {
+      "name": "Vite2",
+      "value": 2244
+    },
+    {
+      "name": "NaiveUI",
+      "value": 1898
+    },
+    {
+      "name": "ECharts5",
+      "value": 1484
+    },
+    {
+      "name": "VChart",
+      "value": 600
+    },
+    {
+      "name": "Axios",
+      "value": 1112
+    },
+    {
+      "name": "Pinia2",
+      "value": 965
+    },
+    {
+      "name": "PlopJS",
+      "value": 847
+    },
+    {
+      "name": "sfc",
+      "value": 582
+    },
+    {
+      "name": "SCSS",
+      "value": 555
+    },
+    {
+      "name": "pnpm",
+      "value": 550
+    },
+    {
+      "name": "eslint",
+      "value": 462
+    },
+    {
+      "name": "json",
+      "value": 366
+    },
+    {
+      "name": "图表",
+      "value": 360
+    },
+    {
+      "name": "地图",
+      "value": 282
+    },
+    {
+      "name": "时钟",
+      "value": 273
+    },
+    {
+      "name": "标题",
+      "value": 265
+    }
+  ]
+}

src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartWordCloudConfig: ConfigType = {
+  key: 'VChartWordCloud',
+  chartKey: 'VVChartWordCloud',
+  conKey: 'VCVChartWordCloud',
+  title: 'VChart词云图',
+  category: ChatCategoryEnum.WORDCLOUD,
+  categoryName: ChatCategoryEnumName.WORDCLOUD,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_word_cloud.png'
+}

src/packages/components/VChart/WordClouds/VChartWordCloud/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/WordClouds/index.ts

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

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

@@ -1,13 +1,25 @@
-import { IBarChartSpec } from '@visactor/vchart'
+import { IBarChartSpec, ILineChartSpec, IAreaChartSpec, IPieChartSpec, IFunnelChartSpec, IWordCloudChartSpec } from '@visactor/vchart'
 import { ICartesianAxisCommonSpec } from '@visactor/vchart/esm/component/axis'
 
 
 export enum ChatCategoryEnum {
   BAR = 'Bars',
+  PIE = 'Pies',
+  LINE = 'Lines',
+  AREA = 'Areas',
+  FUNNEL = 'Funnels',
+  WORDCLOUD = 'WordClouds',
+  SCATTER = 'Scatters',
 }
 
 export enum ChatCategoryEnumName {
   BAR = '柱状图',
+  PIE = '饼图',
+  LINE = '折线图',
+  AREA = '面积图',
+  FUNNEL = '漏斗图',
+  WORDCLOUD = '词云图',
+  SCATTER = '散点图',
 }
 
 export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
@@ -21,6 +33,54 @@ export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
   } & ICartesianAxisCommonSpec
 }
 
+export interface ILineOption extends Omit<ILineChartSpec, 'axes'> {
+  category: ChatCategoryEnum.LINE
+  type: 'line'
+  xAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+  yAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+}
+
+export interface IAreaOption extends Omit<IAreaChartSpec, 'axes'> {
+  category: ChatCategoryEnum.AREA
+  type: 'area'
+  xAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+  yAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+}
+
+export interface IPieOption extends IPieChartSpec {
+  category: ChatCategoryEnum.PIE
+  type: 'pie'
+}
+
+export interface IFunnelOption extends IFunnelChartSpec {
+  category: ChatCategoryEnum.FUNNEL
+  type: 'funnel'
+}
+
+export interface IWordCloudOption extends IWordCloudChartSpec {
+  category: ChatCategoryEnum.WORDCLOUD
+  type: 'wordCloud'
+}
+
+export interface IScatterOption extends Omit<IAreaChartSpec, 'axes'> {
+  category: ChatCategoryEnum.SCATTER
+  type: 'scatter'
+  xAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+  yAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+}
+
 // todo
 // export type IOption = IBarOption | ILineOption ....
-export type IOption = IBarOption 
+export type IOption = IBarOption | IPieOption | ILineOption | IAreaOption | IFunnelOption | IScatterOption

src/packages/components/VChart/index.ts

@@ -1,3 +1,9 @@
 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 VChartList = [...Bars]
+export const VChartList = [...Bars, ...Pies, ...Lines, ...Areas, ...Funnels, ...WordClouds, ...Scatters]

types/shims-vue.d.ts

@@ -4,6 +4,10 @@ declare module '*.vue' {
   export default component
 }
 
+declare module 'lodash/*'
+declare module 'dom-helpers'
+declare module 'vue3-sketch-ruler';
+
 declare module 'lodash/*'
 declare module 'dom-helpers'
 declare module 'vue3-sketch-ruler';

vite.config.ts

@@ -12,6 +12,11 @@ function pathResolve(dir: string) {
 
 export default defineConfig({
   base: '/',
+  // 修改端口
+  server: {
+    port: 3020,
+    open: true,
+  },
   // 路径重定向
   resolve: {
     alias: [