Pre Merge pull request !161 from tanhao/feat-ecahrts-legend

2025-10-14 06:22:10 +08:00 · 2023-05-25 03:39:07 +00:00 · 2023-05-25 03:39:07 +00:00 · 43ccb47bc1
commit 43ccb47bc1
parent 9e9765b573 9ec7d58132
21 changed files with 260 additions and 87 deletions
--- a/README.md
+++ b/README.md
@ -1,30 +1,89 @@
-## 总览
+#### 总览

-![logo](readme/logo-t-y.png)
+<p align="center">
+    <img src="readme/logo-t-y.png" alt="go-view" />
+</p>

-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
+<h4 align="center">开源、精美、便捷的「数据可视化」低代码开发平台</h4>

-### 😶 纯 **前端** 分支： **`master`**
+#### 长期赞助商

-### 👻 携带 **后端** 请求分支: **`master-fetch`**
+<div>
+  <div align="center" style="column-gap: 20px;">
+    <a
+      href="http://www.ccflow.org/?from=goviewGitee"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
+    </a>
+    <span> &nbsp;</span>
+    <a
+      href="https://fastbee.cn/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/fb-banner.gif" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+    <br/>
+    <br/>
+    <a
+      href="https://www.qeasy.cloud/"
+      target="_blank"
+      style="
+        padding: 10px 20px;
+        display: inline-block;
+        border-radius: 10px;
+        background: #f9f9f9;
+      ">
+      <img src="readme/sponsors/qyy-banner.png" alt="go-view" style="width: 250px;" width="250px"/>
+    </a>
+    <span> &nbsp;</span>
+    <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>  
+  </div>
+</div>

-### 📚 GoView **文档** 地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+#### 😶 **纯前端** 分支： **`master`**

-项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club)
+#### 👻 携带 **后端** 请求分支: **`master-fetch`**

-项目带后端-Demo 地址：[后端 Demo 地址](http://1.117.240.165:8080/goview/#/login)
+#### 📚 GoView **文档** 地址：[https://www.mtruning.club/](https://www.mtruning.club/)

-文档-在线地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/)
+项目纯前端-Demo 地址：[https://vue.mtruning.club/](https://vue.mtruning.club/)

-文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc)
+项目带后端-Demo 地址：[https://demo.mtruning.club/](https://demo.mtruning.club/)

-### 🤯 后端项目
+Cloud IDE 代码在线预览地址：[https://idegitee.com/dromara/go-view](https://idegitee.com/dromara/go-view)

 后端项目 gitee 地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)

-接口说明地址：[https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb)
+后端地址（社区实现，仅供参考）：

-技术点：
+- `JAVA` [https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve) (当前使用)
+- `.NET` [https://gitee.com/sun_xiang_yu/go-view-dotnet](https://gitee.com/sun_xiang_yu/go-view-dotnet)
+- `NODE` [https://gitee.com/qwdingyu/led](https://gitee.com/qwdingyu/led)
+- `Docker 镜像` [https://gitee.com/AHEAD4/go-view-docker](https://gitee.com/AHEAD4/go-view-docker)
+- `接口文档`[https://docs.apipost.cn](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3) (不是最新, 以前端代码为准)
+
+#### 整体介绍

 - 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰；

@ -36,17 +95,34 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图

 - 封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等

+- 入选 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)

 主要技术栈为：

@ -55,7 +131,7 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图
 | Vue                 | 3.2.x | TypeScript4 | 4.6.x  |
 | Vite                | 4.2.x | NaiveUI     | 2.34.x |
 | ECharts             | 5.3.x | Pinia       | 2.0.x  |
-| 详见 `package.json` | 😁    | 🥰          | 🤗     |
+| 详见 `package.json` | 😁     | 🥰           | 🤗      |

 开发环境:

@ -66,14 +142,17 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图

 已完成图表：

-| 分类   | 名称             | 名称             | 名称     |
-| ------ | ---------------- | ---------------- | -------- |
-| 图表   | 柱状图           | 横向柱状图       | 折线图   |
-| \*     | 单/多 折线面积图 | 饼图             | 水球图   |
-| \*     | 环形图           | NaiveUI 多种进度 | 🤠       |
-| 信息   | 文字             | 图片             | 😶       |
-| 列表   | 滚动排名列表     | 滚动表格         | 🤓       |
-| 小组件 | 边框-01~13       | 装饰-01~05       | 数字翻牌 |
+| 分类   | 名称             | 名称       | 名称           | 名称                     |
+| ------ | ---------------- | ---------- | -------------- | ------------------------ |
+| 图表   | 柱状图           | 横向柱状图 | 折线图         | 单/多 折线面积图(渐变色) |
+| \*     | 饼图             | 环形图     | 水球图         | 雷达图                   |
+| \*     | NaiveUI 多种进度 | 散点图     | 对数回归散点图 | 热力图                   |
+| \*     | 漏斗图           | 中国地图   | 高德地图       | 🦊                        |
+| 信息   | 文字             | 渐变文字   | 词云           | 嵌套网页                 |
+| \*     | 图片             | 视频       | 😺              | 🐯                        |
+| 列表   | 滚动排名列表     | 滚动表格   | 🐮              | 🐐                        |
+| 小组件 | 边框-01~13       | 装饰-01~05 | 数字翻牌       | 通用时间                 |
+| \*     | 数字计数         | 倒计时     | 时钟           | 🦁                        |

 ## 浏览器支持

@ -81,52 +160,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 +176,9 @@ make dist
 - style: 不影响程序逻辑的代码修改
 - chore: 不属于以上类型的其他类型(日常事务)

-## 交流
+## 交流群

-QQ 群：1030129384
-
-![QQ群](readme/go-view-qq.png)
+QQ 群：663629294
+<img width="260px" src="readme/go-view-qq.png" alt="QQ群" style="border-radius: 20px" />

 ![渲染海报](readme/logo-poster.png)
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
  "name": "go-view",
-  "version": "1.1.11",
+  "version": "1.2.5",
  "engines": {
-    "node": ">=16.14 <18.0.0"
+    "node": ">=12.0"
  },
  "scripts": {
    "dev": "vite --host",
--- a/preview.yml
+++ 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)
--- a/readme/go-view-doc.png
+++ b/readme/go-view-doc.png
--- a/readme/go-view-echarts-color.png
+++ b/readme/go-view-echarts-color.png
--- a/readme/go-view-event.png
+++ b/readme/go-view-event.png
--- a/readme/go-view-indexpage.png
+++ b/readme/go-view-indexpage.png
--- a/readme/go-view-qq.png
+++ b/readme/go-view-qq.png
--- a/readme/go-view-theme.png
+++ b/readme/go-view-theme.png
--- a/readme/sponsors/ccflow-banner.png
+++ b/readme/sponsors/ccflow-banner.png
--- a/readme/sponsors/fb-banner.gif
+++ b/readme/sponsors/fb-banner.gif
--- a/readme/sponsors/qyy-banner.png
+++ b/readme/sponsors/qyy-banner.png
--- a/readme/sponsors/zyplayer-banner.png
+++ b/readme/sponsors/zyplayer-banner.png
--- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
@ -257,9 +257,36 @@
      <n-switch v-model:value="legend.show" size="small"></n-switch>
    </template>
    <setting-item-box name="图例文字">
-      <setting-item>
+      <setting-item name="颜色">
        <n-color-picker size="small" v-model:value="legend.textStyle.color"></n-color-picker>
      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="legend.textStyle.fontSize" :min="1" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例位置">
+      <setting-item name="x轴">
+        <n-select v-model:value="legend.x" size="small" :options="legendConfig.lengendX" />
+      </setting-item>
+      <setting-item name="y轴">
+        <n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例信息">
+      <setting-item name="方向">
+        <n-select v-model:value="legend.orient" size="small" :options="legendConfig.orient" />
+      </setting-item>
+      <setting-item name="形状">
+        <n-select v-model:value="legend.icon" size="small" :options="legendConfig.shape" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="图例大小">
+      <setting-item name="宽">
+        <n-input-number v-model:value="legend.itemWidth" :min="1" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="高">
+        <n-input-number v-model:value="legend.itemHeight" :min="1" size="small"></n-input-number>
+      </setting-item>
    </setting-item-box>
  </collapse-item>

@ -309,9 +336,9 @@
 </template>

 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, watch } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
+import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@ -360,4 +387,14 @@ const grid = computed(() => {
 const visualMap = computed(() => {
  return props.optionData.visualMap
 })
+
+// 监听legend color颜色改变type = scroll的颜色
+watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
+  if (legend.value && newVal) {
+    legend.value.pageTextStyle.color = newVal
+  } 
+}, {
+  immediate: true,
+  deep: true,
+})
 </script>
--- a/src/packages/chartConfiguration/echarts/index.ts
+++ b/src/packages/chartConfiguration/echarts/index.ts
@ -1,3 +1,4 @@
 export * from './axis'
 export * from './line'
 export * from './label'
+export * from './legend'
--- a/src/packages/chartConfiguration/echarts/legend.ts
+++ b/src/packages/chartConfiguration/echarts/legend.ts
@ -0,0 +1,70 @@
+export const legendConfig = {
+  // X轴位置
+  lengendX: [
+    {
+      label: '靠左',
+      value: 'left'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠右',
+      value: 'right'
+    }
+  ],
+  // y轴位置
+  lengendY: [
+    {
+      label: '靠上',
+      value: 'top'
+    },
+    {
+      label: '居中',
+      value: 'center'
+    },
+    {
+      label: '靠下',
+      value: 'bottom'
+    }
+  ],
+  // 排列方向
+  orient: [
+    {
+      label: '水平',
+      value: 'horizontal'
+    },
+    {
+      label: '垂直',
+      value: 'vertical'
+    }
+  ],
+  // 形状
+  shape: [
+    {
+      label: '圆形',
+      value: 'circle'
+    },
+    {
+      label: '方形',
+      value: 'rect'
+    },
+    {
+      label: '圆角方形',
+      value: 'roundRect'
+    },
+    {
+      label: '三角形',
+      value: 'triangle'
+    },
+    {
+      label: '钢笔形',
+      value: 'pin'
+    },
+    {
+      label: '箭头形',
+      value: 'arrow'
+    }
+  ]
+}
--- a/src/packages/components/Charts/Maps/MapAmap/config.ts
+++ b/src/packages/components/Charts/Maps/MapAmap/config.ts
@ -16,7 +16,8 @@ export enum ThemeEnum {
  MACARON = 'macaron',
  BLUE = 'blue',
  DARKBLUE = 'darkblue',
-  WINE = 'wine'
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
 }

 export enum LangEnum {
--- a/src/packages/components/Charts/Maps/MapAmap/config.vue
+++ b/src/packages/components/Charts/Maps/MapAmap/config.vue
@ -134,6 +134,10 @@ const themeOptions = [
  {
    value: ThemeEnum.WINE,
    label: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    label: '卫星'
  }
 ]

--- a/src/packages/components/Charts/Maps/MapAmap/index.vue
+++ b/src/packages/components/Charts/Maps/MapAmap/index.vue
@ -8,7 +8,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum } from './config'
+import { MarkerEnum, ThemeEnum } from './config'
 import { isArray } from '@/utils'

 const props = defineProps({
@ -51,7 +51,6 @@ const initMap = (newData: any) => {
        resizeEnable: true,
        zoom: amapZindex.value, // 地图显示的缩放级别
        center: [amapLon.value, amapLat.value],
-        mapStyle: `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`, //自定义地图的显示样式
        lang: lang.value,
        features: features.value,
        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
@ -60,6 +59,14 @@ const initMap = (newData: any) => {
        willReadFrequently: true
      })
      dataHandle(props.chartConfig.option.dataset)
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
+      }
    })
    .catch(e => {})
 }
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@ -86,8 +86,18 @@
  },
  "legend": {
    "show": true,
-    "top": "5%",
+    "type": "scroll",
+    "x": "center",
+    "y": "top",
+    "icon": "circle",
+    "orient": "horizontal",
    "textStyle": {
+      "color": "#B9B8CE",
+      "fontSize": 18
+    },
+    "itemHeight": 15,
+    "itemWidth": 15,
+    "pageTextStyle": {
      "color": "#B9B8CE"
    }
  },
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@ -58,7 +58,7 @@ const previewHandle = () => {
 // 发布
 const sendHandle = () => {
  goDialog({
-    message: '想体验发布功能，请前往 master-fetch 分支查看: https://gitee.com/MTrun/go-view/tree/master-fetch',
+    message: '想体验发布功能，请前往查看: https://demo.mtruning.club/#/login。源码需切换到：master-fetch 分支。',
    positiveText: '了然',
    closeNegativeText: true,
    onPositiveCallback: () => {}