diff --git a/README.md b/README.md
index 5f7547612cc7685c95a6018eb2af7fa51623b935..03beed30f83df48004bbbab2a4d1b88dc0371124 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,150 @@
-## 总览
-
-![logo](readme/logo-t-y.png)
-
-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
-
-### 😶 纯 **前端** 分支： **`master`**
-
-### 👻 携带 **后端** 请求分支: **`master-fetch`**
-
-### 📚 GoView **文档** 地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
-
-项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club)
-
-项目带后端-Demo 地址：[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
-
-文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
-
-文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
-
-### 🤯 后端项目
-
-后端项目 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)
-
-技术点：
+<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>
+
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>
+
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>
+
+#### 长期赞助商
+
+<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>
+
+#### 😶 **纯前端** 分支： **`master`**
+
+#### 👻 携带 **后端** 请求分支: **`master-fetch`**
+
+#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)
+
+项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)
+
+项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)
+
+Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)
+
+#### 🤯 后端项目看这里!
+
+后端地址（社区实现，仅供参考）：
+
+- `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 群：687586375
+
+<img width="260px" src="readme/go-view-qq.jpg" alt="QQ群" style="border-radius: 20px" />
 
-QQ 群：1030129384
+## Pro 部分功能展示
 
-![QQ群](readme/go-view-qq.png)
+体验地址： <a href="https://ai.goviewlink.com/saas/" target="_blank">https://ai.goviewlink.com/saas/</a>
 
 ![渲染海报](readme/logo-poster.png)
diff --git a/package.json b/package.json
index 39f2542fc0cae80858207e03da12c80f186b57b2..da4ab62b6caa908518b9810c1fbb27d6897f25d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "go-view",
-  "version": "1.1.11",
+  "version": "1.3.1",
   "engines": {
     "node": ">=16.14"
   },
diff --git a/preview.yml b/preview.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1a26db2c8f937ddb004c9524f03bc6f2360616e6
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/readme/GoViewPro.png b/readme/GoViewPro.png
new file mode 100644
index 0000000000000000000000000000000000000000..d09bde9554847198ead36b043a2c0d4e4647ab2c
Binary files /dev/null and b/readme/GoViewPro.png differ
diff --git a/readme/go-view-doc.png b/readme/go-view-doc.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e5187c581f82a44ebb78476801ded40821da208
Binary files /dev/null and b/readme/go-view-doc.png differ
diff --git a/readme/go-view-echarts-color.png b/readme/go-view-echarts-color.png
new file mode 100644
index 0000000000000000000000000000000000000000..73eb21252fde533b7e87a3ff9ae4e6ec98e0c618
Binary files /dev/null and b/readme/go-view-echarts-color.png differ
diff --git a/readme/go-view-event.png b/readme/go-view-event.png
new file mode 100644
index 0000000000000000000000000000000000000000..da773e99ad4875b791794cc6d588a3022ffe4ded
Binary files /dev/null and b/readme/go-view-event.png differ
diff --git a/readme/go-view-indexpage.png b/readme/go-view-indexpage.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba0dc202c6b83a453f416e85e1b2e0fb1cbf8667
Binary files /dev/null and b/readme/go-view-indexpage.png differ
diff --git a/readme/go-view-qq.jpg b/readme/go-view-qq.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..019d0334cba05eda5bf92a07e75c348a7b1ab38a
Binary files /dev/null and b/readme/go-view-qq.jpg differ
diff --git a/readme/go-view-qq.png b/readme/go-view-qq.png
deleted file mode 100644
index daeed71275dda09baed1f3c51c5d367ecd6963f4..0000000000000000000000000000000000000000
Binary files a/readme/go-view-qq.png and /dev/null differ
diff --git a/readme/go-view-theme.png b/readme/go-view-theme.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f21f1a46ee02e28c9683e998c291fb299c6159e
Binary files /dev/null and b/readme/go-view-theme.png differ
diff --git a/readme/go-view-vcharts.png b/readme/go-view-vcharts.png
new file mode 100644
index 0000000000000000000000000000000000000000..e732778c090e2c378e43caca3c9dcae5d035f08b
Binary files /dev/null and b/readme/go-view-vcharts.png differ
diff --git a/readme/logo-poster.png b/readme/logo-poster.png
index 1a6a32b499264450df2e0877133deb1b9dca79d5..a779ef130fa611e29e4979fcfbb73e76dea0dea3 100644
Binary files a/readme/logo-poster.png and b/readme/logo-poster.png differ
diff --git a/readme/sponsors/ccflow-banner.png b/readme/sponsors/ccflow-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..6849c7c637f1f04d273d3932d351d736012fd702
Binary files /dev/null and b/readme/sponsors/ccflow-banner.png differ
diff --git a/readme/sponsors/chengdan-banner.png b/readme/sponsors/chengdan-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..2710bd2de77015989959dfbcef59bb13da0d7af8
Binary files /dev/null and b/readme/sponsors/chengdan-banner.png differ
diff --git a/readme/sponsors/dandian-banner.png b/readme/sponsors/dandian-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..77b8a4a6c0052e61d3998c8750fbf456949d6782
Binary files /dev/null and b/readme/sponsors/dandian-banner.png differ
diff --git a/readme/sponsors/diboot-banner.png b/readme/sponsors/diboot-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e83f45c3e326a9586bd20b5008b6707ddaba6cb
Binary files /dev/null and b/readme/sponsors/diboot-banner.png differ
diff --git a/readme/sponsors/fb-banner.gif b/readme/sponsors/fb-banner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..811bbc37be21bd7a1a64bc481fef32413a6d521e
Binary files /dev/null and b/readme/sponsors/fb-banner.gif differ
diff --git a/readme/sponsors/mdy-banner.png b/readme/sponsors/mdy-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..70c452074d786f399e1558c1fef67db167f5b4a3
Binary files /dev/null and b/readme/sponsors/mdy-banner.png differ
diff --git a/readme/sponsors/qyy-banner.png b/readme/sponsors/qyy-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2d376577a4e144c0c10d673e4cd84735809f81e
Binary files /dev/null and b/readme/sponsors/qyy-banner.png differ
diff --git a/readme/sponsors/shaguo-banner.png b/readme/sponsors/shaguo-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..08465235d2e8bb7f19b567474e4699c36d4fd310
Binary files /dev/null and b/readme/sponsors/shaguo-banner.png differ
diff --git a/readme/sponsors/xingyun-banner.png b/readme/sponsors/xingyun-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..f446a7d97035626f4a8b02a0d64b2afba8a946f1
Binary files /dev/null and b/readme/sponsors/xingyun-banner.png differ
diff --git a/readme/sponsors/yuncheng-banner.png b/readme/sponsors/yuncheng-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..7da1cf6fadb2771d245294167d5ee53535bd48f5
Binary files /dev/null and b/readme/sponsors/yuncheng-banner.png differ
diff --git a/readme/sponsors/zyplayer-banner.png b/readme/sponsors/zyplayer-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfc0ff8cfd979924caf838a430dd8f4bb68261a4
Binary files /dev/null and b/readme/sponsors/zyplayer-banner.png differ
diff --git a/src/assets/images/chart/vchart/vchart_area.png b/src/assets/images/chart/vchart/vchart_area.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1c5b1374e710c32cc9073112c5d827ded0152ce
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_area.png differ
diff --git a/src/assets/images/chart/vchart/vchart_funnel.png b/src/assets/images/chart/vchart/vchart_funnel.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdb2dfeb1d991c7fb752ee9ec7c4494f9124e1e8
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_funnel.png differ
diff --git a/src/assets/images/chart/vchart/vchart_line.png b/src/assets/images/chart/vchart/vchart_line.png
new file mode 100644
index 0000000000000000000000000000000000000000..980f81f5db6f0ff3687c0b4a3daf265fb7e35fa3
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_line.png differ
diff --git a/src/assets/images/chart/vchart/vchart_percent_area.png b/src/assets/images/chart/vchart/vchart_percent_area.png
new file mode 100644
index 0000000000000000000000000000000000000000..af7ccbedcffee74c1c3e09ed1db7bdaaa262e51b
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_percent_area.png differ
diff --git a/src/assets/images/chart/vchart/vchart_pie.png b/src/assets/images/chart/vchart/vchart_pie.png
new file mode 100644
index 0000000000000000000000000000000000000000..130ccdc8ff710929fdb269e5bab5e4a75645e1a4
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_pie.png differ
diff --git a/src/assets/images/chart/vchart/vchart_scatter.png b/src/assets/images/chart/vchart/vchart_scatter.png
new file mode 100644
index 0000000000000000000000000000000000000000..f96060adfaa4fc39220158884b43f1df2f55127a
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_scatter.png differ
diff --git a/src/assets/images/chart/vchart/vchart_word_cloud.png b/src/assets/images/chart/vchart/vchart_word_cloud.png
new file mode 100644
index 0000000000000000000000000000000000000000..63a117dea073e7fe8e560d863a718fd18fdbb31e
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_word_cloud.png differ
diff --git a/src/assets/images/project/moke-20211219181327.png b/src/assets/images/project/moke-20211219181327.png
index 7be19aa31540c4255c818bbcc62eaaca881b9c51..023a7e5533baf26c9e383b9571e1b0bebb689187 100644
Binary files a/src/assets/images/project/moke-20211219181327.png and b/src/assets/images/project/moke-20211219181327.png differ
diff --git a/src/components/GoVChart/transformProps/areas.ts b/src/components/GoVChart/transformProps/areas.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2489598e473de1214c845a4b8a6ac6439039c65d
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/bars.ts b/src/components/GoVChart/transformProps/bars.ts
index 92bdb22c1e962ae9d788f8fe7041ce7f3178c0e9..4c1ef91a918c9063ed61953e9de0d52cf8f24dba 100644
--- a/src/components/GoVChart/transformProps/bars.ts
+++ b/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
 }
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/funnels.ts b/src/components/GoVChart/transformProps/funnels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86846502c2043329d8e979b1518c61a11d443ca3
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/index.ts b/src/components/GoVChart/transformProps/index.ts
index 63ec6a97291a757a618cac896e7134f9dca64480..50f4f2944825d00a244b398a149acb5ff0058fb4 100644
--- a/src/components/GoVChart/transformProps/index.ts
+++ b/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
 }
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/lines.ts b/src/components/GoVChart/transformProps/lines.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5faa9e7b05f29138712691c3f632cfdfdff36a6b
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/pies.ts b/src/components/GoVChart/transformProps/pies.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6bb19c3598bbd8e79290ac4b956b64a700027b6
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/scatters.ts b/src/components/GoVChart/transformProps/scatters.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a74f8d678c567d4a1c92dd2881ce26665bd4f218
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/GoVChart/transformProps/wordClouds.ts b/src/components/GoVChart/transformProps/wordClouds.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4b57777a3e8e60101f83f9d79d59a15e545d29c
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/packages/components/VChart/Areas/VChartArea/config.ts b/src/packages/components/VChart/Areas/VChartArea/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78bf1ee4138b66b305e230fc3079df8bb3124a3a
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Areas/VChartArea/config.vue b/src/packages/components/VChart/Areas/VChartArea/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f15a51a74731ce9491b42a912873bbaa7d6f385
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Areas/VChartArea/data.json b/src/packages/components/VChart/Areas/VChartArea/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..9ba2b574da42037e38b10034ed0847d0ba14a91d
--- /dev/null
+++ b/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 }
+  ]
+}
diff --git a/src/packages/components/VChart/Areas/VChartArea/index.ts b/src/packages/components/VChart/Areas/VChartArea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60894264f03850fa18a741a109a89a0e356c2da3
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Areas/VChartArea/index.vue b/src/packages/components/VChart/Areas/VChartArea/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Areas/VChartPercentArea/config.ts b/src/packages/components/VChart/Areas/VChartPercentArea/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2e46b783d95f4edf944079c186ebef04ae9fdb6
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Areas/VChartPercentArea/config.vue b/src/packages/components/VChart/Areas/VChartPercentArea/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f15a51a74731ce9491b42a912873bbaa7d6f385
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Areas/VChartPercentArea/data.json b/src/packages/components/VChart/Areas/VChartPercentArea/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..9ba2b574da42037e38b10034ed0847d0ba14a91d
--- /dev/null
+++ b/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 }
+  ]
+}
diff --git a/src/packages/components/VChart/Areas/VChartPercentArea/index.ts b/src/packages/components/VChart/Areas/VChartPercentArea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..743e9aa4341d43e7bd75b93911f9e33e1c9dd938
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Areas/VChartPercentArea/index.vue b/src/packages/components/VChart/Areas/VChartPercentArea/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Areas/index.ts b/src/packages/components/VChart/Areas/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7125be100fa5011efaa8bce62b47e634f5360b4d
--- /dev/null
+++ b/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]
diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/index.ts b/src/packages/components/VChart/Bars/VChartBarCommon/index.ts
index 8e8a153307070e3c643adfe94941498b76304ead..968350b98d2c454944814cf31e16330248d5dcbe 100644
--- a/src/packages/components/VChart/Bars/VChartBarCommon/index.ts
+++ b/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,
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/index.ts b/src/packages/components/VChart/Bars/VChartBarStack/index.ts
index 860c0d023091cab84e00fbfed9a102ebc3e1d7f2..a584dac22e5ecefd829622c976866a364e436546 100644
--- a/src/packages/components/VChart/Bars/VChartBarStack/index.ts
+++ b/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,
diff --git a/src/packages/components/VChart/Funnels/VChartFunnel/config.ts b/src/packages/components/VChart/Funnels/VChartFunnel/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0ec081ad07550a310edad6d6e52162cd2fb94de
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Funnels/VChartFunnel/config.vue b/src/packages/components/VChart/Funnels/VChartFunnel/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48a2470fbd595ab9c4ea277b596768983ebfbab2
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Funnels/VChartFunnel/data.json b/src/packages/components/VChart/Funnels/VChartFunnel/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..8b605d5e74e8fda0c3597f3f90ff1f5ac60f553f
--- /dev/null
+++ b/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"
+    }
+  ]
+}
diff --git a/src/packages/components/VChart/Funnels/VChartFunnel/index.ts b/src/packages/components/VChart/Funnels/VChartFunnel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c8bdd1d9415dd3102e0b7c209407d0e94c1c68e
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Funnels/VChartFunnel/index.vue b/src/packages/components/VChart/Funnels/VChartFunnel/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Funnels/index.ts b/src/packages/components/VChart/Funnels/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3da01d4bd588ec0657d67bc0a4145ce0a1598e88
--- /dev/null
+++ b/src/packages/components/VChart/Funnels/index.ts
@@ -0,0 +1,3 @@
+import { VChartFunnelConfig } from './VChartFunnel/index'
+
+export default [VChartFunnelConfig]
diff --git a/src/packages/components/VChart/Lines/VChartLine/config.ts b/src/packages/components/VChart/Lines/VChartLine/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12ce684f518b843167db1e25e6d0cfb8667f5c0b
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Lines/VChartLine/config.vue b/src/packages/components/VChart/Lines/VChartLine/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f15a51a74731ce9491b42a912873bbaa7d6f385
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Lines/VChartLine/data.json b/src/packages/components/VChart/Lines/VChartLine/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..9ba2b574da42037e38b10034ed0847d0ba14a91d
--- /dev/null
+++ b/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 }
+  ]
+}
diff --git a/src/packages/components/VChart/Lines/VChartLine/index.ts b/src/packages/components/VChart/Lines/VChartLine/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95cb94cb7142ccb338debb11f118a61f038c836c
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Lines/VChartLine/index.vue b/src/packages/components/VChart/Lines/VChartLine/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Lines/index.ts b/src/packages/components/VChart/Lines/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99b4ae8f136f497c63086bb0dd14cd373101f012
--- /dev/null
+++ b/src/packages/components/VChart/Lines/index.ts
@@ -0,0 +1,3 @@
+import { VChartLineConfig } from './VChartLine/index'
+
+export default [VChartLineConfig]
diff --git a/src/packages/components/VChart/Pies/VChartPie/config.ts b/src/packages/components/VChart/Pies/VChartPie/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..423796cc413d9fb5cf9e7692cd49a1056a7331b9
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Pies/VChartPie/config.vue b/src/packages/components/VChart/Pies/VChartPie/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48a2470fbd595ab9c4ea277b596768983ebfbab2
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Pies/VChartPie/data.json b/src/packages/components/VChart/Pies/VChartPie/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..d71a1e6bc828edb7e11d783a857685c9067a7c46
--- /dev/null
+++ b/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 }
+  ]
+}
diff --git a/src/packages/components/VChart/Pies/VChartPie/index.ts b/src/packages/components/VChart/Pies/VChartPie/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..532e61544133d4e3f964529a22e8f8a3d2f1ed39
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Pies/VChartPie/index.vue b/src/packages/components/VChart/Pies/VChartPie/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Pies/index.ts b/src/packages/components/VChart/Pies/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc58b8812b92308f6c03b3760c79d93be584f2e8
--- /dev/null
+++ b/src/packages/components/VChart/Pies/index.ts
@@ -0,0 +1,3 @@
+import { VChartPieConfig } from './VChartPie/index'
+
+export default [VChartPieConfig]
diff --git a/src/packages/components/VChart/Scatters/VChartScatter/config.ts b/src/packages/components/VChart/Scatters/VChartScatter/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d1216e8e0113739345e1c5167a10b7dc307d593
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Scatters/VChartScatter/config.vue b/src/packages/components/VChart/Scatters/VChartScatter/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f15a51a74731ce9491b42a912873bbaa7d6f385
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Scatters/VChartScatter/data.json b/src/packages/components/VChart/Scatters/VChartScatter/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..fbb1862dabda4d741580d334c3a0475c2f27c5c4
--- /dev/null
+++ b/src/packages/components/VChart/Scatters/VChartScatter/data.json
@@ -0,0 +1,2846 @@
+{
+  "values": [
+    {
+      "name": "chevrolet chevelle malibu",
+      "milesPerGallon": 18,
+      "cylinders": 8,
+      "horsepower": 130,
+      "x": 8.369035799207357
+    },
+    {
+      "name": "buick skylark 320",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 165,
+      "x": 7.650029728786544
+    },
+    {
+      "name": "plymouth satellite",
+      "milesPerGallon": 18,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.968503221959899
+    },
+    {
+      "name": "amc rebel sst",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.8561560094781955
+    },
+    {
+      "name": "ford torino",
+      "milesPerGallon": 17,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.864427335458599
+    },
+    {
+      "name": "ford galaxie 500",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 198,
+      "x": 7.795269144672034
+    },
+    {
+      "name": "chevrolet impala",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 220,
+      "x": 8.093918960889592
+    },
+    {
+      "name": "plymouth fury iii",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 215,
+      "x": 8.096790572779447
+    },
+    {
+      "name": "pontiac catalina",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 225,
+      "x": 8.280421990443992
+    },
+    {
+      "name": "amc ambassador dpl",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 190,
+      "x": 7.812477402825842
+    },
+    {
+      "name": "citroen ds-21 pallas",
+      "milesPerGallon": 0,
+      "cylinders": 4,
+      "horsepower": 115,
+      "x": 4.350254126743262
+    },
+    {
+      "name": "chevrolet chevelle concours (sw)",
+      "milesPerGallon": 0,
+      "cylinders": 8,
+      "horsepower": 165,
+      "x": 8.336047282481855
+    },
+    {
+      "name": "ford torino (sw)",
+      "milesPerGallon": 0,
+      "cylinders": 8,
+      "horsepower": 153,
+      "x": 8.302128751564197
+    },
+    {
+      "name": "plymouth satellite (sw)",
+      "milesPerGallon": 0,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 8.061597332557989
+    },
+    {
+      "name": "amc rebel sst (sw)",
+      "milesPerGallon": 0,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 7.664837196380818
+    },
+    {
+      "name": "dodge challenger se",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 170,
+      "x": 8.275147641122178
+    },
+    {
+      "name": "plymouth 'cuda 340",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 160,
+      "x": 8.258530083217627
+    },
+    {
+      "name": "ford mustang boss 302",
+      "milesPerGallon": 0,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.645170928170343
+    },
+    {
+      "name": "chevrolet monte carlo",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.89039684982018
+    },
+    {
+      "name": "buick estate wagon (sw)",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 225,
+      "x": 7.76227513980753
+    },
+    {
+      "name": "toyota corona mark ii",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 4.240267871288519
+    },
+    {
+      "name": "plymouth duster",
+      "milesPerGallon": 22,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 5.815333283103814
+    },
+    {
+      "name": "amc hornet",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 97,
+      "x": 6.199722230971187
+    },
+    {
+      "name": "ford maverick",
+      "milesPerGallon": 21,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 5.84155599489376
+    },
+    {
+      "name": "datsun pl510",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.644534398133687
+    },
+    {
+      "name": "volkswagen 1131 deluxe sedan",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 46,
+      "x": 3.652329499162354
+    },
+    {
+      "name": "peugeot 504",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 87,
+      "x": 3.6921618966402843
+    },
+    {
+      "name": "audi 100 ls",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 4.027217142848164
+    },
+    {
+      "name": "saab 99e",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 3.9415947155959774
+    },
+    {
+      "name": "bmw 2002",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 113,
+      "x": 4.050221722279534
+    },
+    {
+      "name": "amc gremlin",
+      "milesPerGallon": 21,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 6.261381817520874
+    },
+    {
+      "name": "ford f250",
+      "milesPerGallon": 10,
+      "cylinders": 8,
+      "horsepower": 215,
+      "x": 7.695684729213842
+    },
+    {
+      "name": "chevy c20",
+      "milesPerGallon": 10,
+      "cylinders": 8,
+      "horsepower": 200,
+      "x": 8.209748747255345
+    },
+    {
+      "name": "dodge d200",
+      "milesPerGallon": 11,
+      "cylinders": 8,
+      "horsepower": 210,
+      "x": 7.846867016987405
+    },
+    {
+      "name": "hi 1200d",
+      "milesPerGallon": 9,
+      "cylinders": 8,
+      "horsepower": 193,
+      "x": 7.828846703882448
+    },
+    {
+      "name": "datsun pl510",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.859449508889943
+    },
+    {
+      "name": "chevrolet vega 2300",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.8718649080786602
+    },
+    {
+      "name": "toyota corona",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 3.6787061470327425
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 0,
+      "x": 4.0187293963215724
+    },
+    {
+      "name": "volkswagen super beetle 117",
+      "milesPerGallon": 0,
+      "cylinders": 4,
+      "horsepower": 48,
+      "x": 3.943328407800161
+    },
+    {
+      "name": "amc gremlin",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.999494813289073
+    },
+    {
+      "name": "plymouth satellite custom",
+      "milesPerGallon": 16,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 6.290208822990809
+    },
+    {
+      "name": "chevrolet chevelle malibu",
+      "milesPerGallon": 17,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.823164098366052
+    },
+    {
+      "name": "ford torino 500",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 88,
+      "x": 6.116011353863191
+    },
+    {
+      "name": "amc matador",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.865571771104295
+    },
+    {
+      "name": "chevrolet impala",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 165,
+      "x": 7.80322981951277
+    },
+    {
+      "name": "pontiac catalina brougham",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 7.712942520435072
+    },
+    {
+      "name": "ford galaxie 500",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 153,
+      "x": 8.030269860470632
+    },
+    {
+      "name": "plymouth fury iii",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.8959396584543855
+    },
+    {
+      "name": "dodge monaco (sw)",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 180,
+      "x": 8.15167511088829
+    },
+    {
+      "name": "ford country squire (sw)",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 170,
+      "x": 7.642988316347062
+    },
+    {
+      "name": "pontiac safari (sw)",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 7.837391703481973
+    },
+    {
+      "name": "amc hornet sportabout (sw)",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.287237197746149
+    },
+    {
+      "name": "chevrolet vega (sw)",
+      "milesPerGallon": 22,
+      "cylinders": 4,
+      "horsepower": 72,
+      "x": 4.201240369620046
+    },
+    {
+      "name": "pontiac firebird",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.091165935264614
+    },
+    {
+      "name": "ford mustang",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 88,
+      "x": 6.36195718874336
+    },
+    {
+      "name": "mercury capri 2000",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 86,
+      "x": 3.8411851683678155
+    },
+    {
+      "name": "opel 1900",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 4.080202623672469
+    },
+    {
+      "name": "peugeot 304",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 3.8607928613726648
+    },
+    {
+      "name": "fiat 124b",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 76,
+      "x": 3.7969976315564606
+    },
+    {
+      "name": "toyota corolla 1200",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.363211116247065
+    },
+    {
+      "name": "datsun 1200",
+      "milesPerGallon": 35,
+      "cylinders": 4,
+      "horsepower": 69,
+      "x": 4.316312298201062
+    },
+    {
+      "name": "volkswagen model 111",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 60,
+      "x": 3.711432044472396
+    },
+    {
+      "name": "plymouth cricket",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 3.9609923230640787
+    },
+    {
+      "name": "toyota corona hardtop",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 4.263784859264984
+    },
+    {
+      "name": "dodge colt hardtop",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 3.8871854792281146
+    },
+    {
+      "name": "volkswagen type 3",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 54,
+      "x": 3.8360975201282663
+    },
+    {
+      "name": "chevrolet vega",
+      "milesPerGallon": 20,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 4.172708392435074
+    },
+    {
+      "name": "ford pinto runabout",
+      "milesPerGallon": 21,
+      "cylinders": 4,
+      "horsepower": 86,
+      "x": 3.9673857263272256
+    },
+    {
+      "name": "chevrolet impala",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 165,
+      "x": 7.633164000543357
+    },
+    {
+      "name": "pontiac catalina",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 7.886678205550053
+    },
+    {
+      "name": "plymouth fury iii",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.275671856536176
+    },
+    {
+      "name": "ford galaxie 500",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 153,
+      "x": 7.951195410494355
+    },
+    {
+      "name": "amc ambassador sst",
+      "milesPerGallon": 17,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.882820449295332
+    },
+    {
+      "name": "mercury marquis",
+      "milesPerGallon": 11,
+      "cylinders": 8,
+      "horsepower": 208,
+      "x": 7.849390788382628
+    },
+    {
+      "name": "buick lesabre custom",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 155,
+      "x": 7.948201490604689
+    },
+    {
+      "name": "oldsmobile delta 88 royale",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 160,
+      "x": 8.210635205663252
+    },
+    {
+      "name": "chrysler newport royal",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 190,
+      "x": 7.641036004573681
+    },
+    {
+      "name": "mazda rx2 coupe",
+      "milesPerGallon": 19,
+      "cylinders": 3,
+      "horsepower": 97,
+      "x": 2.891821199642409
+    },
+    {
+      "name": "amc matador (sw)",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.336629003944669
+    },
+    {
+      "name": "chevrolet chevelle concours (sw)",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 130,
+      "x": 7.9219881116886475
+    },
+    {
+      "name": "ford gran torino (sw)",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.8934726533849435
+    },
+    {
+      "name": "plymouth satellite custom (sw)",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.057706267563129
+    },
+    {
+      "name": "volvo 145e (sw)",
+      "milesPerGallon": 18,
+      "cylinders": 4,
+      "horsepower": 112,
+      "x": 3.635290276575149
+    },
+    {
+      "name": "volkswagen 411 (sw)",
+      "milesPerGallon": 22,
+      "cylinders": 4,
+      "horsepower": 76,
+      "x": 3.8028229183447957
+    },
+    {
+      "name": "peugeot 504 (sw)",
+      "milesPerGallon": 21,
+      "cylinders": 4,
+      "horsepower": 87,
+      "x": 4.118577741767033
+    },
+    {
+      "name": "renault 12 (sw)",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 69,
+      "x": 4.198450953513762
+    },
+    {
+      "name": "ford pinto (sw)",
+      "milesPerGallon": 22,
+      "cylinders": 4,
+      "horsepower": 86,
+      "x": 4.329784358153141
+    },
+    {
+      "name": "datsun 510 (sw)",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 3.9435403382828396
+    },
+    {
+      "name": "toyouta corona mark ii (sw)",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 97,
+      "x": 4.35540238583771
+    },
+    {
+      "name": "dodge colt (sw)",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 4.037920811568482
+    },
+    {
+      "name": "toyota corolla 1600 (sw)",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.7599084399512606
+    },
+    {
+      "name": "buick century 350",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 8.326745745776993
+    },
+    {
+      "name": "amc matador",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.062835335606577
+    },
+    {
+      "name": "chevrolet malibu",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 8.361171737905769
+    },
+    {
+      "name": "ford gran torino",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 137,
+      "x": 7.837847425105593
+    },
+    {
+      "name": "dodge coronet custom",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.939600483693272
+    },
+    {
+      "name": "mercury marquis brougham",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 198,
+      "x": 7.644723815901321
+    },
+    {
+      "name": "chevrolet caprice classic",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.973438719478234
+    },
+    {
+      "name": "ford ltd",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 158,
+      "x": 7.7188754660438414
+    },
+    {
+      "name": "plymouth fury gran sedan",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.11850643108697
+    },
+    {
+      "name": "chrysler new yorker brougham",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 215,
+      "x": 8.205134389394614
+    },
+    {
+      "name": "buick electra 225 custom",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 225,
+      "x": 7.923409436249858
+    },
+    {
+      "name": "amc ambassador brougham",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 175,
+      "x": 8.228936770225731
+    },
+    {
+      "name": "plymouth valiant",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.674149489224827
+    },
+    {
+      "name": "chevrolet nova custom",
+      "milesPerGallon": 16,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.031504541773996
+    },
+    {
+      "name": "amc hornet",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.9503616396021055
+    },
+    {
+      "name": "ford maverick",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 88,
+      "x": 5.976960416158603
+    },
+    {
+      "name": "plymouth duster",
+      "milesPerGallon": 23,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 6.089505720521723
+    },
+    {
+      "name": "volkswagen super beetle",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 46,
+      "x": 3.7303981874150773
+    },
+    {
+      "name": "chevrolet impala",
+      "milesPerGallon": 11,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.976213436545324
+    },
+    {
+      "name": "ford country",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 167,
+      "x": 8.268475314508438
+    },
+    {
+      "name": "plymouth custom suburb",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 170,
+      "x": 8.173854895547144
+    },
+    {
+      "name": "oldsmobile vista cruiser",
+      "milesPerGallon": 12,
+      "cylinders": 8,
+      "horsepower": 180,
+      "x": 7.9615284565949125
+    },
+    {
+      "name": "amc gremlin",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.35906036490087
+    },
+    {
+      "name": "toyota carina",
+      "milesPerGallon": 20,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.6830139107575413
+    },
+    {
+      "name": "chevrolet vega",
+      "milesPerGallon": 21,
+      "cylinders": 4,
+      "horsepower": 72,
+      "x": 3.777266668178489
+    },
+    {
+      "name": "datsun 610",
+      "milesPerGallon": 22,
+      "cylinders": 4,
+      "horsepower": 94,
+      "x": 3.8773818726423626
+    },
+    {
+      "name": "maxda rx3",
+      "milesPerGallon": 18,
+      "cylinders": 3,
+      "horsepower": 90,
+      "x": 3.0856590246125553
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 19,
+      "cylinders": 4,
+      "horsepower": 85,
+      "x": 4.145398212616298
+    },
+    {
+      "name": "mercury capri v6",
+      "milesPerGallon": 21,
+      "cylinders": 6,
+      "horsepower": 107,
+      "x": 5.801479613628054
+    },
+    {
+      "name": "fiat 124 sport coupe",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 4.204130436361175
+    },
+    {
+      "name": "chevrolet monte carlo s",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 7.789089747321902
+    },
+    {
+      "name": "pontiac grand prix",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 230,
+      "x": 8.368666947054
+    },
+    {
+      "name": "fiat 128",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 49,
+      "x": 3.9641028087660763
+    },
+    {
+      "name": "opel manta",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 4.194627460567969
+    },
+    {
+      "name": "audi 100ls",
+      "milesPerGallon": 20,
+      "cylinders": 4,
+      "horsepower": 91,
+      "x": 3.7428576589745863
+    },
+    {
+      "name": "volvo 144ea",
+      "milesPerGallon": 19,
+      "cylinders": 4,
+      "horsepower": 112,
+      "x": 3.8261790588724116
+    },
+    {
+      "name": "dodge dart custom",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.261908833153957
+    },
+    {
+      "name": "saab 99le",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 110,
+      "x": 3.8923861779764803
+    },
+    {
+      "name": "toyota mark ii",
+      "milesPerGallon": 20,
+      "cylinders": 6,
+      "horsepower": 122,
+      "x": 6.023305090318881
+    },
+    {
+      "name": "oldsmobile omega",
+      "milesPerGallon": 11,
+      "cylinders": 8,
+      "horsepower": 180,
+      "x": 7.916533566730453
+    },
+    {
+      "name": "plymouth duster",
+      "milesPerGallon": 20,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 5.815183875829537
+    },
+    {
+      "name": "ford maverick",
+      "milesPerGallon": 21,
+      "cylinders": 6,
+      "horsepower": 0,
+      "x": 6.087079591635942
+    },
+    {
+      "name": "amc hornet",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.132976630768644
+    },
+    {
+      "name": "chevrolet nova",
+      "milesPerGallon": 15,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.77587112911776
+    },
+    {
+      "name": "datsun b210",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 3.7957431353944884
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 4.231979588309825
+    },
+    {
+      "name": "toyota corolla 1200",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 3.7452757830244146
+    },
+    {
+      "name": "chevrolet vega",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 4.36199952209112
+    },
+    {
+      "name": "chevrolet chevelle malibu classic",
+      "milesPerGallon": 16,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.132102235992026
+    },
+    {
+      "name": "amc matador",
+      "milesPerGallon": 16,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.244358407543402
+    },
+    {
+      "name": "plymouth satellite sebring",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.9669018127491755
+    },
+    {
+      "name": "ford gran torino",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.8345110901907615
+    },
+    {
+      "name": "buick century luxus (sw)",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.243711758447686
+    },
+    {
+      "name": "dodge coronet custom (sw)",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.6391122249741805
+    },
+    {
+      "name": "ford gran torino (sw)",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 8.149220531713828
+    },
+    {
+      "name": "amc matador (sw)",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.257730279738169
+    },
+    {
+      "name": "audi fox",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 83,
+      "x": 3.7204948906649604
+    },
+    {
+      "name": "volkswagen dasher",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.044604283879304
+    },
+    {
+      "name": "opel manta",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 78,
+      "x": 4.1329159747108735
+    },
+    {
+      "name": "toyota corona",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 52,
+      "x": 3.763628636444657
+    },
+    {
+      "name": "datsun 710",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 61,
+      "x": 4.108614905428027
+    },
+    {
+      "name": "dodge colt",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.829343093554908
+    },
+    {
+      "name": "fiat 128",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.992179538347937
+    },
+    {
+      "name": "fiat 124 tc",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 4.021045930602439
+    },
+    {
+      "name": "honda civic",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 97,
+      "x": 4.01260776755379
+    },
+    {
+      "name": "subaru",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 93,
+      "x": 4.080818944944528
+    },
+    {
+      "name": "fiat x1.9",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.081015454309478
+    },
+    {
+      "name": "plymouth valiant custom",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 5.7450311922420685
+    },
+    {
+      "name": "chevrolet nova",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.810482491296187
+    },
+    {
+      "name": "mercury monarch",
+      "milesPerGallon": 15,
+      "cylinders": 6,
+      "horsepower": 72,
+      "x": 5.911705207459032
+    },
+    {
+      "name": "ford maverick",
+      "milesPerGallon": 15,
+      "cylinders": 6,
+      "horsepower": 72,
+      "x": 6.033276990213819
+    },
+    {
+      "name": "pontiac catalina",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 170,
+      "x": 7.718068536346503
+    },
+    {
+      "name": "chevrolet bel air",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 8.317758125572004
+    },
+    {
+      "name": "plymouth grand fury",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.7703271590264125
+    },
+    {
+      "name": "ford ltd",
+      "milesPerGallon": 14,
+      "cylinders": 8,
+      "horsepower": 148,
+      "x": 7.786061816063091
+    },
+    {
+      "name": "buick century",
+      "milesPerGallon": 17,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 5.687539285829092
+    },
+    {
+      "name": "chevroelt chevelle malibu",
+      "milesPerGallon": 16,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.846163100863938
+    },
+    {
+      "name": "amc matador",
+      "milesPerGallon": 15,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.149551566435133
+    },
+    {
+      "name": "plymouth fury",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 5.7026529649245346
+    },
+    {
+      "name": "buick skyhawk",
+      "milesPerGallon": 21,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.030710322304106
+    },
+    {
+      "name": "chevrolet monza 2+2",
+      "milesPerGallon": 20,
+      "cylinders": 8,
+      "horsepower": 110,
+      "x": 8.337542628333226
+    },
+    {
+      "name": "ford mustang ii",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 129,
+      "x": 7.726720573831461
+    },
+    {
+      "name": "toyota corolla",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.899423379967887
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 83,
+      "x": 3.981411220984986
+    },
+    {
+      "name": "amc gremlin",
+      "milesPerGallon": 20,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.220606678835218
+    },
+    {
+      "name": "pontiac astro",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 78,
+      "x": 3.921476707741298
+    },
+    {
+      "name": "toyota corona",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 96,
+      "x": 3.929493199649912
+    },
+    {
+      "name": "volkswagen dasher",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 71,
+      "x": 3.967731010447716
+    },
+    {
+      "name": "datsun 710",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 97,
+      "x": 3.6434570923586773
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 97,
+      "x": 5.657146585274514
+    },
+    {
+      "name": "volkswagen rabbit",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.360660460667372
+    },
+    {
+      "name": "amc pacer",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 6.279042915974931
+    },
+    {
+      "name": "audi 100ls",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 3.729205521651694
+    },
+    {
+      "name": "peugeot 504",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.172579879270223
+    },
+    {
+      "name": "volvo 244dl",
+      "milesPerGallon": 22,
+      "cylinders": 4,
+      "horsepower": 98,
+      "x": 3.6460892812911494
+    },
+    {
+      "name": "saab 99le",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 115,
+      "x": 4.099480817622986
+    },
+    {
+      "name": "honda civic cvcc",
+      "milesPerGallon": 33,
+      "cylinders": 4,
+      "horsepower": 53,
+      "x": 3.686699184979733
+    },
+    {
+      "name": "fiat 131",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 86,
+      "x": 3.8906568823168275
+    },
+    {
+      "name": "opel 1900",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 81,
+      "x": 4.163213309864342
+    },
+    {
+      "name": "capri ii",
+      "milesPerGallon": 25,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 4.041695420795337
+    },
+    {
+      "name": "dodge colt",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 79,
+      "x": 4.025099995007562
+    },
+    {
+      "name": "renault 12tl",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 83,
+      "x": 3.757853046507196
+    },
+    {
+      "name": "chevrolet chevelle malibu classic",
+      "milesPerGallon": 17.5,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.699522918782513
+    },
+    {
+      "name": "dodge coronet brougham",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.83205495307041
+    },
+    {
+      "name": "amc matador",
+      "milesPerGallon": 15.5,
+      "cylinders": 8,
+      "horsepower": 120,
+      "x": 8.048915250032099
+    },
+    {
+      "name": "ford gran torino",
+      "milesPerGallon": 14.5,
+      "cylinders": 8,
+      "horsepower": 152,
+      "x": 8.011651456551443
+    },
+    {
+      "name": "plymouth valiant",
+      "milesPerGallon": 22,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.70198208409958
+    },
+    {
+      "name": "chevrolet nova",
+      "milesPerGallon": 22,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.920907645277557
+    },
+    {
+      "name": "ford maverick",
+      "milesPerGallon": 24,
+      "cylinders": 6,
+      "horsepower": 81,
+      "x": 5.773924675854247
+    },
+    {
+      "name": "amc hornet",
+      "milesPerGallon": 22.5,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 6.34431039995742
+    },
+    {
+      "name": "chevrolet chevette",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 52,
+      "x": 4.277594873300891
+    },
+    {
+      "name": "chevrolet woody",
+      "milesPerGallon": 24.5,
+      "cylinders": 4,
+      "horsepower": 60,
+      "x": 3.765335591263168
+    },
+    {
+      "name": "vw rabbit",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.278770224425459
+    },
+    {
+      "name": "honda civic",
+      "milesPerGallon": 33,
+      "cylinders": 4,
+      "horsepower": 53,
+      "x": 4.161027157987546
+    },
+    {
+      "name": "dodge aspen se",
+      "milesPerGallon": 20,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.152268187897024
+    },
+    {
+      "name": "ford granada ghia",
+      "milesPerGallon": 18,
+      "cylinders": 6,
+      "horsepower": 78,
+      "x": 5.913324809422544
+    },
+    {
+      "name": "pontiac ventura sj",
+      "milesPerGallon": 18.5,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 5.828381858640106
+    },
+    {
+      "name": "amc pacer d/l",
+      "milesPerGallon": 17.5,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 5.8683320093177365
+    },
+    {
+      "name": "volkswagen rabbit",
+      "milesPerGallon": 29.5,
+      "cylinders": 4,
+      "horsepower": 71,
+      "x": 3.8792962359719265
+    },
+    {
+      "name": "datsun b-210",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 3.911427860622622
+    },
+    {
+      "name": "toyota corolla",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.8125207839889685
+    },
+    {
+      "name": "ford pinto",
+      "milesPerGallon": 26.5,
+      "cylinders": 4,
+      "horsepower": 72,
+      "x": 3.9382401967362717
+    },
+    {
+      "name": "volvo 245",
+      "milesPerGallon": 20,
+      "cylinders": 4,
+      "horsepower": 102,
+      "x": 3.9172891932003227
+    },
+    {
+      "name": "plymouth volare premier v8",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 7.730584368976243
+    },
+    {
+      "name": "peugeot 504",
+      "milesPerGallon": 19,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.6829066868121823
+    },
+    {
+      "name": "toyota mark ii",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 108,
+      "x": 5.767576399045697
+    },
+    {
+      "name": "mercedes-benz 280s",
+      "milesPerGallon": 16.5,
+      "cylinders": 6,
+      "horsepower": 120,
+      "x": 5.944834766302336
+    },
+    {
+      "name": "cadillac seville",
+      "milesPerGallon": 16.5,
+      "cylinders": 8,
+      "horsepower": 180,
+      "x": 7.945298420556104
+    },
+    {
+      "name": "chevy c10",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 7.74325655312382
+    },
+    {
+      "name": "ford f108",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 130,
+      "x": 7.641011022203554
+    },
+    {
+      "name": "dodge d100",
+      "milesPerGallon": 13,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.205664448591063
+    },
+    {
+      "name": "honda Accelerationord cvcc",
+      "milesPerGallon": 31.5,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 3.9260572773144036
+    },
+    {
+      "name": "buick opel isuzu deluxe",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 4.234095373803297
+    },
+    {
+      "name": "renault 5 gtl",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 58,
+      "x": 3.915485542037537
+    },
+    {
+      "name": "plymouth arrow gs",
+      "milesPerGallon": 25.5,
+      "cylinders": 4,
+      "horsepower": 96,
+      "x": 3.711987497789524
+    },
+    {
+      "name": "datsun f-10 hatchback",
+      "milesPerGallon": 33.5,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.275556352197315
+    },
+    {
+      "name": "chevrolet caprice classic",
+      "milesPerGallon": 17.5,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 8.179625793921783
+    },
+    {
+      "name": "oldsmobile cutlass supreme",
+      "milesPerGallon": 17,
+      "cylinders": 8,
+      "horsepower": 110,
+      "x": 8.3516900485701
+    },
+    {
+      "name": "dodge monaco brougham",
+      "milesPerGallon": 15.5,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 7.8297250571128885
+    },
+    {
+      "name": "mercury cougar brougham",
+      "milesPerGallon": 15,
+      "cylinders": 8,
+      "horsepower": 130,
+      "x": 7.944278879464085
+    },
+    {
+      "name": "chevrolet concours",
+      "milesPerGallon": 17.5,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.150894070023309
+    },
+    {
+      "name": "buick skylark",
+      "milesPerGallon": 20.5,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.723840786618133
+    },
+    {
+      "name": "plymouth volare custom",
+      "milesPerGallon": 19,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 6.200854899011364
+    },
+    {
+      "name": "ford granada",
+      "milesPerGallon": 18.5,
+      "cylinders": 6,
+      "horsepower": 98,
+      "x": 5.767027512175655
+    },
+    {
+      "name": "pontiac grand prix lj",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 180,
+      "x": 7.7585751577480035
+    },
+    {
+      "name": "chevrolet monte carlo landau",
+      "milesPerGallon": 15.5,
+      "cylinders": 8,
+      "horsepower": 170,
+      "x": 8.045977852201142
+    },
+    {
+      "name": "chrysler cordoba",
+      "milesPerGallon": 15.5,
+      "cylinders": 8,
+      "horsepower": 190,
+      "x": 8.192486708372897
+    },
+    {
+      "name": "ford thunderbird",
+      "milesPerGallon": 16,
+      "cylinders": 8,
+      "horsepower": 149,
+      "x": 8.201223481449942
+    },
+    {
+      "name": "volkswagen rabbit custom",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 78,
+      "x": 4.057195298815751
+    },
+    {
+      "name": "pontiac sunbird coupe",
+      "milesPerGallon": 24.5,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.185384444111024
+    },
+    {
+      "name": "toyota corolla liftback",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.7552968862230323
+    },
+    {
+      "name": "ford mustang ii 2+2",
+      "milesPerGallon": 25.5,
+      "cylinders": 4,
+      "horsepower": 89,
+      "x": 3.803025515743171
+    },
+    {
+      "name": "chevrolet chevette",
+      "milesPerGallon": 30.5,
+      "cylinders": 4,
+      "horsepower": 63,
+      "x": 3.7005952927648225
+    },
+    {
+      "name": "dodge colt m/m",
+      "milesPerGallon": 33.5,
+      "cylinders": 4,
+      "horsepower": 83,
+      "x": 4.250604683713029
+    },
+    {
+      "name": "subaru dl",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.155205977408221
+    },
+    {
+      "name": "volkswagen dasher",
+      "milesPerGallon": 30.5,
+      "cylinders": 4,
+      "horsepower": 78,
+      "x": 3.794347823856479
+    },
+    {
+      "name": "datsun 810",
+      "milesPerGallon": 22,
+      "cylinders": 6,
+      "horsepower": 97,
+      "x": 5.748505859329592
+    },
+    {
+      "name": "bmw 320i",
+      "milesPerGallon": 21.5,
+      "cylinders": 4,
+      "horsepower": 110,
+      "x": 3.691939355771659
+    },
+    {
+      "name": "mazda rx-4",
+      "milesPerGallon": 21.5,
+      "cylinders": 3,
+      "horsepower": 110,
+      "x": 2.81777818404469
+    },
+    {
+      "name": "volkswagen rabbit custom diesel",
+      "milesPerGallon": 43.1,
+      "cylinders": 4,
+      "horsepower": 48,
+      "x": 3.7220555062656944
+    },
+    {
+      "name": "ford fiesta",
+      "milesPerGallon": 36.1,
+      "cylinders": 4,
+      "horsepower": 66,
+      "x": 3.6682376054304378
+    },
+    {
+      "name": "mazda glc deluxe",
+      "milesPerGallon": 32.8,
+      "cylinders": 4,
+      "horsepower": 52,
+      "x": 4.012845248275688
+    },
+    {
+      "name": "datsun b210 gx",
+      "milesPerGallon": 39.4,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 3.8904807400804913
+    },
+    {
+      "name": "honda civic cvcc",
+      "milesPerGallon": 36.1,
+      "cylinders": 4,
+      "horsepower": 60,
+      "x": 4.349667176249244
+    },
+    {
+      "name": "oldsmobile cutlass salon brougham",
+      "milesPerGallon": 19.9,
+      "cylinders": 8,
+      "horsepower": 110,
+      "x": 8.218646383633754
+    },
+    {
+      "name": "dodge diplomat",
+      "milesPerGallon": 19.4,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 8.061011909911953
+    },
+    {
+      "name": "mercury monarch ghia",
+      "milesPerGallon": 20.2,
+      "cylinders": 8,
+      "horsepower": 139,
+      "x": 8.09467688137649
+    },
+    {
+      "name": "pontiac phoenix lj",
+      "milesPerGallon": 19.2,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 5.848027241639671
+    },
+    {
+      "name": "chevrolet malibu",
+      "milesPerGallon": 20.5,
+      "cylinders": 6,
+      "horsepower": 95,
+      "x": 6.1706073883547505
+    },
+    {
+      "name": "ford fairmont (auto)",
+      "milesPerGallon": 20.2,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 5.74555866766249
+    },
+    {
+      "name": "ford fairmont (man)",
+      "milesPerGallon": 25.1,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.004711038383785
+    },
+    {
+      "name": "plymouth volare",
+      "milesPerGallon": 20.5,
+      "cylinders": 6,
+      "horsepower": 100,
+      "x": 5.874273239748711
+    },
+    {
+      "name": "amc concord",
+      "milesPerGallon": 19.4,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 6.3572316328228835
+    },
+    {
+      "name": "buick century special",
+      "milesPerGallon": 20.6,
+      "cylinders": 6,
+      "horsepower": 105,
+      "x": 6.326290929100672
+    },
+    {
+      "name": "mercury zephyr",
+      "milesPerGallon": 20.8,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 6.090315657803135
+    },
+    {
+      "name": "dodge aspen",
+      "milesPerGallon": 18.6,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.09127717604979
+    },
+    {
+      "name": "amc concord d/l",
+      "milesPerGallon": 18.1,
+      "cylinders": 6,
+      "horsepower": 120,
+      "x": 6.178803092678216
+    },
+    {
+      "name": "chevrolet monte carlo landau",
+      "milesPerGallon": 19.2,
+      "cylinders": 8,
+      "horsepower": 145,
+      "x": 7.8831426332006025
+    },
+    {
+      "name": "buick regal sport coupe (turbo)",
+      "milesPerGallon": 17.7,
+      "cylinders": 6,
+      "horsepower": 165,
+      "x": 6.266611150726625
+    },
+    {
+      "name": "ford futura",
+      "milesPerGallon": 18.1,
+      "cylinders": 8,
+      "horsepower": 139,
+      "x": 7.939586988821181
+    },
+    {
+      "name": "dodge magnum xe",
+      "milesPerGallon": 17.5,
+      "cylinders": 8,
+      "horsepower": 140,
+      "x": 7.6749842730690325
+    },
+    {
+      "name": "chevrolet chevette",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 4.026094223323545
+    },
+    {
+      "name": "toyota corona",
+      "milesPerGallon": 27.5,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 3.989114871371014
+    },
+    {
+      "name": "datsun 510",
+      "milesPerGallon": 27.2,
+      "cylinders": 4,
+      "horsepower": 97,
+      "x": 3.919495603121351
+    },
+    {
+      "name": "dodge omni",
+      "milesPerGallon": 30.9,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.634310672481856
+    },
+    {
+      "name": "toyota celica gt liftback",
+      "milesPerGallon": 21.1,
+      "cylinders": 4,
+      "horsepower": 95,
+      "x": 4.2362951679593
+    },
+    {
+      "name": "plymouth sapporo",
+      "milesPerGallon": 23.2,
+      "cylinders": 4,
+      "horsepower": 105,
+      "x": 4.03418952324368
+    },
+    {
+      "name": "oldsmobile starfire sx",
+      "milesPerGallon": 23.8,
+      "cylinders": 4,
+      "horsepower": 85,
+      "x": 4.021497535176559
+    },
+    {
+      "name": "datsun 200-sx",
+      "milesPerGallon": 23.9,
+      "cylinders": 4,
+      "horsepower": 97,
+      "x": 3.6549753868403414
+    },
+    {
+      "name": "audi 5000",
+      "milesPerGallon": 20.3,
+      "cylinders": 5,
+      "horsepower": 103,
+      "x": 5.1890073392770635
+    },
+    {
+      "name": "volvo 264gl",
+      "milesPerGallon": 17,
+      "cylinders": 6,
+      "horsepower": 125,
+      "x": 5.981745305757347
+    },
+    {
+      "name": "saab 99gle",
+      "milesPerGallon": 21.6,
+      "cylinders": 4,
+      "horsepower": 115,
+      "x": 4.065826343090008
+    },
+    {
+      "name": "peugeot 604sl",
+      "milesPerGallon": 16.2,
+      "cylinders": 6,
+      "horsepower": 133,
+      "x": 5.810027165541005
+    },
+    {
+      "name": "volkswagen scirocco",
+      "milesPerGallon": 31.5,
+      "cylinders": 4,
+      "horsepower": 71,
+      "x": 4.0664857253021145
+    },
+    {
+      "name": "honda Accelerationord lx",
+      "milesPerGallon": 29.5,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 4.274887214970657
+    },
+    {
+      "name": "pontiac lemans v6",
+      "milesPerGallon": 21.5,
+      "cylinders": 6,
+      "horsepower": 115,
+      "x": 6.230492727989444
+    },
+    {
+      "name": "mercury zephyr 6",
+      "milesPerGallon": 19.8,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 5.948144807434942
+    },
+    {
+      "name": "ford fairmont 4",
+      "milesPerGallon": 22.3,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.849531643650541
+    },
+    {
+      "name": "amc concord dl 6",
+      "milesPerGallon": 20.2,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 5.904143705146815
+    },
+    {
+      "name": "dodge aspen 6",
+      "milesPerGallon": 20.6,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.287468249670606
+    },
+    {
+      "name": "chevrolet caprice classic",
+      "milesPerGallon": 17,
+      "cylinders": 8,
+      "horsepower": 130,
+      "x": 8.006794146856944
+    },
+    {
+      "name": "ford ltd landau",
+      "milesPerGallon": 17.6,
+      "cylinders": 8,
+      "horsepower": 129,
+      "x": 7.915576220737707
+    },
+    {
+      "name": "mercury grand marquis",
+      "milesPerGallon": 16.5,
+      "cylinders": 8,
+      "horsepower": 138,
+      "x": 7.836955099770109
+    },
+    {
+      "name": "dodge st. regis",
+      "milesPerGallon": 18.2,
+      "cylinders": 8,
+      "horsepower": 135,
+      "x": 7.893805841233058
+    },
+    {
+      "name": "buick estate wagon (sw)",
+      "milesPerGallon": 16.9,
+      "cylinders": 8,
+      "horsepower": 155,
+      "x": 7.7080254609954215
+    },
+    {
+      "name": "ford country squire (sw)",
+      "milesPerGallon": 15.5,
+      "cylinders": 8,
+      "horsepower": 142,
+      "x": 7.765267134267947
+    },
+    {
+      "name": "chevrolet malibu classic (sw)",
+      "milesPerGallon": 19.2,
+      "cylinders": 8,
+      "horsepower": 125,
+      "x": 7.638579920680975
+    },
+    {
+      "name": "chrysler lebaron town @ country (sw)",
+      "milesPerGallon": 18.5,
+      "cylinders": 8,
+      "horsepower": 150,
+      "x": 8.145775610523001
+    },
+    {
+      "name": "vw rabbit custom",
+      "milesPerGallon": 31.9,
+      "cylinders": 4,
+      "horsepower": 71,
+      "x": 3.9398826540339784
+    },
+    {
+      "name": "maxda glc deluxe",
+      "milesPerGallon": 34.1,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 3.6455722629575598
+    },
+    {
+      "name": "dodge colt hatchback custom",
+      "milesPerGallon": 35.7,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 4.12193427440282
+    },
+    {
+      "name": "amc spirit dl",
+      "milesPerGallon": 27.4,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 3.9716265958716166
+    },
+    {
+      "name": "mercedes benz 300d",
+      "milesPerGallon": 25.4,
+      "cylinders": 5,
+      "horsepower": 77,
+      "x": 5.068023081278515
+    },
+    {
+      "name": "cadillac eldorado",
+      "milesPerGallon": 23,
+      "cylinders": 8,
+      "horsepower": 125,
+      "x": 7.6675868574290735
+    },
+    {
+      "name": "peugeot 504",
+      "milesPerGallon": 27.2,
+      "cylinders": 4,
+      "horsepower": 71,
+      "x": 3.764605555949112
+    },
+    {
+      "name": "oldsmobile cutlass salon brougham",
+      "milesPerGallon": 23.9,
+      "cylinders": 8,
+      "horsepower": 90,
+      "x": 7.766308790449926
+    },
+    {
+      "name": "plymouth horizon",
+      "milesPerGallon": 34.2,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.149160207292371
+    },
+    {
+      "name": "plymouth horizon tc3",
+      "milesPerGallon": 34.5,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.229858902045439
+    },
+    {
+      "name": "datsun 210",
+      "milesPerGallon": 31.8,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.271534379641972
+    },
+    {
+      "name": "fiat strada custom",
+      "milesPerGallon": 37.3,
+      "cylinders": 4,
+      "horsepower": 69,
+      "x": 4.035466279399953
+    },
+    {
+      "name": "buick skylark limited",
+      "milesPerGallon": 28.4,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.71364184991431
+    },
+    {
+      "name": "chevrolet citation",
+      "milesPerGallon": 28.8,
+      "cylinders": 6,
+      "horsepower": 115,
+      "x": 5.899054957490579
+    },
+    {
+      "name": "oldsmobile omega brougham",
+      "milesPerGallon": 26.8,
+      "cylinders": 6,
+      "horsepower": 115,
+      "x": 5.946006433464216
+    },
+    {
+      "name": "pontiac phoenix",
+      "milesPerGallon": 33.5,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.7396113356866927
+    },
+    {
+      "name": "vw rabbit",
+      "milesPerGallon": 41.5,
+      "cylinders": 4,
+      "horsepower": 76,
+      "x": 4.097550325478324
+    },
+    {
+      "name": "toyota corolla tercel",
+      "milesPerGallon": 38.1,
+      "cylinders": 4,
+      "horsepower": 60,
+      "x": 3.9054338799025206
+    },
+    {
+      "name": "chevrolet chevette",
+      "milesPerGallon": 32.1,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 3.9370906275391677
+    },
+    {
+      "name": "datsun 310",
+      "milesPerGallon": 37.2,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 3.6568656488791245
+    },
+    {
+      "name": "chevrolet citation",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.821088266512798
+    },
+    {
+      "name": "ford fairmont",
+      "milesPerGallon": 26.4,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.70449435635481
+    },
+    {
+      "name": "amc concord",
+      "milesPerGallon": 24.3,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 4.253594061102482
+    },
+    {
+      "name": "dodge aspen",
+      "milesPerGallon": 19.1,
+      "cylinders": 6,
+      "horsepower": 90,
+      "x": 6.282076136405616
+    },
+    {
+      "name": "audi 4000",
+      "milesPerGallon": 34.3,
+      "cylinders": 4,
+      "horsepower": 78,
+      "x": 4.3216508497895045
+    },
+    {
+      "name": "toyota corona liftback",
+      "milesPerGallon": 29.8,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.888781518516995
+    },
+    {
+      "name": "mazda 626",
+      "milesPerGallon": 31.3,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.8457499134604682
+    },
+    {
+      "name": "datsun 510 hatchback",
+      "milesPerGallon": 37,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 4.0894687976157
+    },
+    {
+      "name": "toyota corolla",
+      "milesPerGallon": 32.2,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.9309708244265096
+    },
+    {
+      "name": "mazda glc",
+      "milesPerGallon": 46.6,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.254203956657513
+    },
+    {
+      "name": "dodge colt",
+      "milesPerGallon": 27.9,
+      "cylinders": 4,
+      "horsepower": 105,
+      "x": 4.294719995760485
+    },
+    {
+      "name": "datsun 210",
+      "milesPerGallon": 40.8,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 3.6320715714960423
+    },
+    {
+      "name": "vw rabbit c (diesel)",
+      "milesPerGallon": 44.3,
+      "cylinders": 4,
+      "horsepower": 48,
+      "x": 4.26867037171047
+    },
+    {
+      "name": "vw dasher (diesel)",
+      "milesPerGallon": 43.4,
+      "cylinders": 4,
+      "horsepower": 48,
+      "x": 4.093809229966266
+    },
+    {
+      "name": "audi 5000s (diesel)",
+      "milesPerGallon": 36.4,
+      "cylinders": 5,
+      "horsepower": 67,
+      "x": 5.192007249064847
+    },
+    {
+      "name": "mercedes-benz 240d",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 3.9310267304450868
+    },
+    {
+      "name": "honda civic 1500 gl",
+      "milesPerGallon": 44.6,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.203679390882783
+    },
+    {
+      "name": "renault lecar deluxe",
+      "milesPerGallon": 40.9,
+      "cylinders": 4,
+      "horsepower": 0,
+      "x": 4.071898955902105
+    },
+    {
+      "name": "subaru dl",
+      "milesPerGallon": 33.8,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.174518278318266
+    },
+    {
+      "name": "vokswagen rabbit",
+      "milesPerGallon": 29.8,
+      "cylinders": 4,
+      "horsepower": 62,
+      "x": 3.8658063508922753
+    },
+    {
+      "name": "datsun 280-zx",
+      "milesPerGallon": 32.7,
+      "cylinders": 6,
+      "horsepower": 132,
+      "x": 5.859511410469771
+    },
+    {
+      "name": "mazda rx-7 gs",
+      "milesPerGallon": 23.7,
+      "cylinders": 3,
+      "horsepower": 100,
+      "x": 3.2086989971664353
+    },
+    {
+      "name": "triumph tr7 coupe",
+      "milesPerGallon": 35,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.227487744729735
+    },
+    {
+      "name": "ford mustang cobra",
+      "milesPerGallon": 23.6,
+      "cylinders": 4,
+      "horsepower": 0,
+      "x": 4.068513150549568
+    },
+    {
+      "name": "honda Accelerationord",
+      "milesPerGallon": 32.4,
+      "cylinders": 4,
+      "horsepower": 72,
+      "x": 3.6676526960088136
+    },
+    {
+      "name": "plymouth reliant",
+      "milesPerGallon": 27.2,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 4.132367927382765
+    },
+    {
+      "name": "buick skylark",
+      "milesPerGallon": 26.6,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 3.6896256544908237
+    },
+    {
+      "name": "dodge aries wagon (sw)",
+      "milesPerGallon": 25.8,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 4.050868913470094
+    },
+    {
+      "name": "chevrolet citation",
+      "milesPerGallon": 23.5,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 5.785153063704189
+    },
+    {
+      "name": "plymouth reliant",
+      "milesPerGallon": 30,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 3.815100124717885
+    },
+    {
+      "name": "toyota starlet",
+      "milesPerGallon": 39.1,
+      "cylinders": 4,
+      "horsepower": 58,
+      "x": 4.1983073095232495
+    },
+    {
+      "name": "plymouth champ",
+      "milesPerGallon": 39,
+      "cylinders": 4,
+      "horsepower": 64,
+      "x": 4.191097759552514
+    },
+    {
+      "name": "honda civic 1300",
+      "milesPerGallon": 35.1,
+      "cylinders": 4,
+      "horsepower": 60,
+      "x": 4.131654681105934
+    },
+    {
+      "name": "subaru",
+      "milesPerGallon": 32.3,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.025765200961957
+    },
+    {
+      "name": "datsun 210",
+      "milesPerGallon": 37,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.035308658219122
+    },
+    {
+      "name": "toyota tercel",
+      "milesPerGallon": 37.7,
+      "cylinders": 4,
+      "horsepower": 62,
+      "x": 4.095695463627345
+    },
+    {
+      "name": "mazda glc 4",
+      "milesPerGallon": 34.1,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 4.012140452105604
+    },
+    {
+      "name": "plymouth horizon 4",
+      "milesPerGallon": 34.7,
+      "cylinders": 4,
+      "horsepower": 63,
+      "x": 3.6939202725344633
+    },
+    {
+      "name": "ford escort 4w",
+      "milesPerGallon": 34.4,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.0109200831843665
+    },
+    {
+      "name": "ford escort 2h",
+      "milesPerGallon": 29.9,
+      "cylinders": 4,
+      "horsepower": 65,
+      "x": 4.17830102083104
+    },
+    {
+      "name": "volkswagen jetta",
+      "milesPerGallon": 33,
+      "cylinders": 4,
+      "horsepower": 74,
+      "x": 4.2853561819076145
+    },
+    {
+      "name": "renault 18i",
+      "milesPerGallon": 34.5,
+      "cylinders": 4,
+      "horsepower": 0,
+      "x": 4.359020127809212
+    },
+    {
+      "name": "honda prelude",
+      "milesPerGallon": 33.7,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 4.1543248596235935
+    },
+    {
+      "name": "toyota corolla",
+      "milesPerGallon": 32.4,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 3.769115939419314
+    },
+    {
+      "name": "datsun 200sx",
+      "milesPerGallon": 32.9,
+      "cylinders": 4,
+      "horsepower": 100,
+      "x": 4.295307133805183
+    },
+    {
+      "name": "mazda 626",
+      "milesPerGallon": 31.6,
+      "cylinders": 4,
+      "horsepower": 74,
+      "x": 3.7903396720903535
+    },
+    {
+      "name": "peugeot 505s turbo diesel",
+      "milesPerGallon": 28.1,
+      "cylinders": 4,
+      "horsepower": 80,
+      "x": 4.054656115599271
+    },
+    {
+      "name": "saab 900s",
+      "milesPerGallon": 0,
+      "cylinders": 4,
+      "horsepower": 110,
+      "x": 4.326379710931227
+    },
+    {
+      "name": "volvo diesel",
+      "milesPerGallon": 30.7,
+      "cylinders": 6,
+      "horsepower": 76,
+      "x": 6.197529382540965
+    },
+    {
+      "name": "toyota cressida",
+      "milesPerGallon": 25.4,
+      "cylinders": 6,
+      "horsepower": 116,
+      "x": 5.765034468301705
+    },
+    {
+      "name": "datsun 810 maxima",
+      "milesPerGallon": 24.2,
+      "cylinders": 6,
+      "horsepower": 120,
+      "x": 5.640796772821185
+    },
+    {
+      "name": "buick century",
+      "milesPerGallon": 22.4,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 6.110410054807138
+    },
+    {
+      "name": "oldsmobile cutlass ls",
+      "milesPerGallon": 26.6,
+      "cylinders": 8,
+      "horsepower": 105,
+      "x": 7.644788144403992
+    },
+    {
+      "name": "ford granada gl",
+      "milesPerGallon": 20.2,
+      "cylinders": 6,
+      "horsepower": 88,
+      "x": 5.768702707154798
+    },
+    {
+      "name": "chrysler lebaron salon",
+      "milesPerGallon": 17.6,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 6.2313844239860385
+    },
+    {
+      "name": "chevrolet cavalier",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 3.7847688007736187
+    },
+    {
+      "name": "chevrolet cavalier wagon",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.243022635523257
+    },
+    {
+      "name": "chevrolet cavalier 2-door",
+      "milesPerGallon": 34,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.26214795455118
+    },
+    {
+      "name": "pontiac j2000 se hatchback",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 85,
+      "x": 4.294681781593013
+    },
+    {
+      "name": "dodge aries se",
+      "milesPerGallon": 29,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 4.3612227239547865
+    },
+    {
+      "name": "pontiac phoenix",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.987914895181706
+    },
+    {
+      "name": "ford fairmont futura",
+      "milesPerGallon": 24,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 3.9060656314781035
+    },
+    {
+      "name": "amc concord dl",
+      "milesPerGallon": 23,
+      "cylinders": 4,
+      "horsepower": 0,
+      "x": 3.954666226885773
+    },
+    {
+      "name": "volkswagen rabbit l",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 74,
+      "x": 4.30190674508643
+    },
+    {
+      "name": "mazda glc custom l",
+      "milesPerGallon": 37,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 3.6280848611583063
+    },
+    {
+      "name": "mazda glc custom",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 68,
+      "x": 3.6911419278159396
+    },
+    {
+      "name": "plymouth horizon miser",
+      "milesPerGallon": 38,
+      "cylinders": 4,
+      "horsepower": 63,
+      "x": 4.0011087888837595
+    },
+    {
+      "name": "mercury lynx l",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.183203830552381
+    },
+    {
+      "name": "nissan stanza xe",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 88,
+      "x": 4.2272529260287275
+    },
+    {
+      "name": "honda Accelerationord",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 75,
+      "x": 4.257656005997919
+    },
+    {
+      "name": "toyota corolla",
+      "milesPerGallon": 34,
+      "cylinders": 4,
+      "horsepower": 70,
+      "x": 4.275568077023029
+    },
+    {
+      "name": "honda civic",
+      "milesPerGallon": 38,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 4.118475374376484
+    },
+    {
+      "name": "honda civic (auto)",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 3.9585950997318085
+    },
+    {
+      "name": "datsun 310 gx",
+      "milesPerGallon": 38,
+      "cylinders": 4,
+      "horsepower": 67,
+      "x": 3.8232069851508967
+    },
+    {
+      "name": "buick century limited",
+      "milesPerGallon": 25,
+      "cylinders": 6,
+      "horsepower": 110,
+      "x": 5.752982327423358
+    },
+    {
+      "name": "oldsmobile cutlass ciera (diesel)",
+      "milesPerGallon": 38,
+      "cylinders": 6,
+      "horsepower": 85,
+      "x": 6.189064501959804
+    },
+    {
+      "name": "chrysler lebaron medallion",
+      "milesPerGallon": 26,
+      "cylinders": 4,
+      "horsepower": 92,
+      "x": 4.2146513880184235
+    },
+    {
+      "name": "ford granada l",
+      "milesPerGallon": 22,
+      "cylinders": 6,
+      "horsepower": 112,
+      "x": 6.240598069909455
+    },
+    {
+      "name": "toyota celica gt",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 96,
+      "x": 3.9204248039356773
+    },
+    {
+      "name": "dodge charger 2.2",
+      "milesPerGallon": 36,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 4.150100620678576
+    },
+    {
+      "name": "chevrolet camaro",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 90,
+      "x": 3.728501256342185
+    },
+    {
+      "name": "ford mustang gl",
+      "milesPerGallon": 27,
+      "cylinders": 4,
+      "horsepower": 86,
+      "x": 4.04286904218814
+    },
+    {
+      "name": "vw pickup",
+      "milesPerGallon": 44,
+      "cylinders": 4,
+      "horsepower": 52,
+      "x": 3.8382667209637664
+    },
+    {
+      "name": "dodge rampage",
+      "milesPerGallon": 32,
+      "cylinders": 4,
+      "horsepower": 84,
+      "x": 3.889031792685351
+    },
+    {
+      "name": "ford ranger",
+      "milesPerGallon": 28,
+      "cylinders": 4,
+      "horsepower": 79,
+      "x": 4.177096129854495
+    },
+    {
+      "name": "chevy s-10",
+      "milesPerGallon": 31,
+      "cylinders": 4,
+      "horsepower": 82,
+      "x": 3.698366552382896
+    }
+  ]
+}
diff --git a/src/packages/components/VChart/Scatters/VChartScatter/index.ts b/src/packages/components/VChart/Scatters/VChartScatter/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99c0f578957ad09bfe49f3fdafda6573de8074fe
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Scatters/VChartScatter/index.vue b/src/packages/components/VChart/Scatters/VChartScatter/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/Scatters/index.ts b/src/packages/components/VChart/Scatters/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea7959cbba63e94ee28d20f0848e828706117d34
--- /dev/null
+++ b/src/packages/components/VChart/Scatters/index.ts
@@ -0,0 +1,3 @@
+import { VChartScatterConfig } from './VChartScatter/index'
+
+export default [VChartScatterConfig]
diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/config.ts b/src/packages/components/VChart/WordClouds/VChartWordCloud/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38822e7b38e6113a0c276a803e6cd740c3441ada
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/config.vue b/src/packages/components/VChart/WordClouds/VChartWordCloud/config.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48a2470fbd595ab9c4ea277b596768983ebfbab2
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/data.json b/src/packages/components/VChart/WordClouds/VChartWordCloud/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..23b57b70e5b54be6d1e7b227743abf721d1bb42f
--- /dev/null
+++ b/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
+    }
+  ]
+}
diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts b/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15fde742c15b0dd4d47d92d7df80da8491700b8b
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/index.vue b/src/packages/components/VChart/WordClouds/VChartWordCloud/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c70c6676203fe105c639f2e5c503ac618216cdbb
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/VChart/WordClouds/index.ts b/src/packages/components/VChart/WordClouds/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acf8ea8bb2596a2b5c7a4cd8170ba104fbfbfec9
--- /dev/null
+++ b/src/packages/components/VChart/WordClouds/index.ts
@@ -0,0 +1,3 @@
+import { VChartWordCloudConfig } from './VChartWordCloud/index'
+
+export default [VChartWordCloudConfig]
diff --git a/src/packages/components/VChart/index.d.ts b/src/packages/components/VChart/index.d.ts
index d81841ef0c1bb3c143db67cbd0f09e98525a6296..4bff51fe692b2741260ebe97abe5f22e3c9c66a7 100644
--- a/src/packages/components/VChart/index.d.ts
+++ b/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
diff --git a/src/packages/components/VChart/index.ts b/src/packages/components/VChart/index.ts
index cdc19c62c9e775f91d18e838934d3075d7e33a58..05fb97ca10bc93501b4de29d3090451e986fdc51 100644
--- a/src/packages/components/VChart/index.ts
+++ b/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]
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index 6c92d48bee9d6c8401889540524cde012fd700ac..d9fc5493d967f420cca066a40d5994e531783718 100644
--- a/types/shims-vue.d.ts
+++ b/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';
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index f458c4e20ad1512c95f3d8a99b5f162bbdce16f4..a7cb45dbd60768a07cefb87429ec3aea9e150df7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,11 @@ function pathResolve(dir: string) {
 
 export default defineConfig({
   base: '/',
+  // 修改端口
+  server: {
+    port: 3020,
+    open: true,
+  },
   // 路径重定向
   resolve: {
     alias: [