Compare commits

..

57 Commits

Author SHA1 Message Date
奔跑的面条
81e2e4784d Merge branch 'master-fetch-dev' into master-fetch 2023-12-18 22:06:48 +08:00
奔跑的面条
d925a8e104 Merge branch 'master-fetch-dev' into master-fetch 2023-12-17 20:47:49 +08:00
奔跑的面条
278d67945a !216 fixed:requestDataPondItem应该为响应式ref类型,因此有value,原来写法会造成undefined报错
Merge pull request !216 from fresh66/2.2.6-fixed
2023-12-17 06:40:19 +00:00
hujiangnan
e62f9cbd02 应该为响应式ref类型,因此有value,原来写法会造成undefined报错 2023-10-30 09:28:52 +08:00
奔跑的面条
131abbb28e Merge branch 'master-fetch-dev' into master-fetch 2023-10-08 16:00:22 +08:00
奔跑的面条
656949f7b8 fix: 解决 getStorageInfo 调用错误的问题 2023-09-18 21:14:27 +08:00
奔跑的面条
601e1a2ea7 Merge branch 'master-fetch-dev' into master-fetch 2023-09-18 17:15:48 +08:00
奔跑的面条
75c47dc97e Merge branch 'master-fetch-dev' into master-fetch 2023-09-18 11:45:45 +08:00
奔跑的面条
bb1bfc564d Merge branch 'master-fetch-dev' into master-fetch 2023-09-18 11:08:32 +08:00
奔跑的面条
0cf5e175cf Merge branch 'master-fetch-dev' into master-fetch 2023-09-18 10:52:18 +08:00
奔跑的面条
006a0edca9 Merge branch 'master-fetch-dev' into master-fetch 2023-08-17 10:02:10 +08:00
奔跑的面条
d6f4f20be0 Merge branch 'master-fetch-dev' into master-fetch 2023-07-09 17:09:06 +08:00
奔跑的面条
634f689f07 Merge branch 'master-fetch-dev' into master-fetch 2023-07-09 15:55:11 +08:00
奔跑的面条
24bcccdf2b Merge branch 'master-fetch-dev' into master-fetch 2023-07-08 22:03:58 +08:00
奔跑的面条
45254c3dc4 Merge branch 'master-fetch-dev' into master-fetch 2023-05-28 18:00:25 +08:00
奔跑的面条
5340e89f7d Merge branch 'master-fetch-dev' into master-fetch 2023-05-28 17:56:59 +08:00
奔跑的面条
68c77760ca Merge branch 'master-fetch-dev' into master-fetch 2023-05-28 17:36:48 +08:00
奔跑的面条
6b7f759071 Merge branch 'master-fetch-dev' into master-fetch 2023-05-08 20:44:30 +08:00
奔跑的面条
8809022e8c Merge branch 'master-fetch-dev' into master-fetch 2023-05-08 20:36:15 +08:00
奔跑的面条
0309c567e6 Merge branch 'master-fetch-dev' into master-fetch 2023-04-23 21:17:28 +08:00
奔跑的面条
03be42b910 Merge branch 'master-fetch-dev' into master-fetch 2023-04-23 21:09:40 +08:00
奔跑的面条
15f2d77bec Merge branch 'master-fetch-dev' into master-fetch 2023-04-05 16:39:50 +08:00
奔跑的面条
73524283ed Merge branch 'master-fetch-dev' into master-fetch 2023-04-03 20:11:31 +08:00
奔跑的面条
5fce7f163e Merge branch 'master-fetch-dev' into master-fetch 2023-04-02 18:21:01 +08:00
奔跑的面条
2acf1f4351 Merge branch 'master-fetch-dev' into master-fetch 2023-04-02 18:20:01 +08:00
奔跑的面条
7836332a97 build: 升级版本到 2.2.0 2023-03-16 21:00:13 +08:00
奔跑的面条
b5fe803059 Merge branch 'master-fetch-dev' into master-fetch 2023-03-16 20:59:37 +08:00
奔跑的面条
23e459de94 Merge branch 'master-fetch-dev' into master-fetch 2023-03-04 17:32:50 +08:00
奔跑的面条
43aefe7b6e Merge branch 'master-fetch-dev' into master-fetch 2023-03-04 17:07:17 +08:00
奔跑的面条
824c7a29d8 Merge branch 'master-fetch-dev' into master-fetch 2023-03-04 16:25:17 +08:00
奔跑的面条
92f50f0be2 Merge branch 'master-fetch-dev' into master-fetch 2023-03-04 16:22:02 +08:00
奔跑的面条
dd0170eecc !133 解决adcode类型不正确可能导致的问题
Merge pull request !133 from wallellen/master-fetch-dev
2023-03-04 16:10:45 +08:00
奔跑的面条
aef798c382 !132 fix: 动态请求中,body的json参数使用javasctipt
Merge pull request !132 from guo_ddt/master-fetch
2023-03-04 05:46:01 +00:00
郭孔泉
1922213f8b fix: 动态请求中,body的json参数使用javasctipt拼接 2023-03-03 11:03:05 +08:00
奔跑的面条
92afc0f366 Merge branch 'master-fetch-dev' into master-fetch 2023-02-27 19:04:38 +08:00
奔跑的面条
ef39ecb3c6 Merge branch 'master-fetch-dev' into master-fetch 2023-02-17 18:15:50 +08:00
奔跑的面条
7ff21d6156 Merge branch 'master-fetch-dev' into master-fetch 2023-02-17 14:34:28 +08:00
奔跑的面条
a53d9c4da2 Merge branch 'master-fetch-dev' into master-fetch 2023-02-17 14:33:18 +08:00
奔跑的面条
e586311744 Merge branch 'master-fetch-dev' into master-fetch 2023-01-17 15:35:40 +08:00
奔跑的面条
3eb1ce7ec5 Merge branch 'master-fetch-dev' into master-fetch 2023-01-16 17:59:40 +08:00
奔跑的面条
f04864ed7f build: 升级版本到 2.1.6 2023-01-13 16:53:12 +08:00
奔跑的面条
4c968aee18 Merge branch 'master-fetch-dev' into master-fetch 2023-01-13 16:52:43 +08:00
奔跑的面条
4351aef5cd build: 升级版本 2.1.5 2023-01-08 20:08:37 +08:00
奔跑的面条
8214b30653 Merge remote-tracking branch 'origin/master-fetch-dev' into master-fetch 2022-12-31 21:26:42 +08:00
奔跑的面条
648f4f479e feat: 合并 2.1.4 2022-12-31 21:07:51 +08:00
奔跑的面条
ab22db62f7 build: 升级版本到2.1.3 2022-12-16 14:02:09 +08:00
奔跑的面条
cb750c73b9 Merge branch 'master-fetch-dev' into master-fetch 2022-12-16 13:55:55 +08:00
奔跑的面条
8cf47e9005 !104 fix:图片hash会出现404问题
Merge pull request !104 from lastbee1204/master-fetch
2022-12-16 04:03:40 +00:00
奔跑的面条
666841458e !108 饼状图新增功能 显示标签,标签显示内容,引导线显示,饼状图圆角设置
Merge pull request !108 from 李少白/master-fetch
2022-12-16 02:44:00 +00:00
slxb
dafdbeca4b 饼状图新增功能 显示标签,标签显示内容,引导线显示,饼状图圆角设置 2022-12-13 19:07:47 +08:00
刘彪
5aac8c0546 fix:图片hash会出现404问题 2022-11-29 11:56:37 +08:00
刘彪
0609b95a28 fix:图片hash会出现404问题 2022-11-29 11:47:54 +08:00
奔跑的面条
70ee06d622 Merge remote-tracking branch 'origin/master-fetch-dev' into master-fetch 2022-11-22 12:44:37 +08:00
奔跑的面条
74c9d1df65 Merge branch 'master-fetch-dev' into master-fetch 2022-11-21 10:50:33 +08:00
奔跑的面条
7b327df38e build: 升级版本到 2.1.2 2022-11-19 21:05:32 +08:00
奔跑的面条
2ec4f56943 Merge branch 'master-fetch-dev' into master-fetch 2022-11-19 21:05:15 +08:00
奔跑的面条
60a2bf7f4f docs: 优化说明文档 2022-11-14 10:00:30 +08:00
197 changed files with 4691 additions and 14531 deletions

1
.gitignore vendored
View File

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

View File

@@ -1,7 +1,5 @@
## 总览
![logo](readme/logo-t-y.png)
**`master-fetch` 分支是带有后端接口请求的分支**
**后端项目地址:[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve)**
@@ -14,71 +12,6 @@
接口地址修改:`.env`
### 🤯 后端项目
后端项目 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)
技术点:
- 框架:基于 `Vue3` 框架编写,使用 `hooks` 写法抽离部分逻辑,使代码结构更加清晰;
- 类型:使用 `TypeScript` 进行类型约束,减少未知错误发生概率,可以大胆修改逻辑内容;
- 性能:多处性能优化,使用页面懒加载、组件动态注册、数据滚动加载等方式,提升页面渲染速度;
- 存储:拥有本地记忆,部分配置项采用 `storage` 存储本地,提升使用体验;
- 封装:项目进行了详细的工具类封装如:路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等
工作台:
![项目截图](readme/go-view-canvas.png)
请求配置:
![项目截图](readme/go-view-fetch.png)
数据过滤:
![项目截图](readme/go-view-filter.png)
主题色:
![项目截图](readme/go-view-color.png)
主要技术栈为:
| 名称 | 版本 | 名称 | 版本 |
| ------------------- | ----- | ----------- | ------ |
| 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` | 😁 | 🥰 | 🤗 |
开发环境:
| 名称 | 版本 | 名称 | 版本 |
| ---- | ------- | ------- | ----- |
| node | 16.16.x | npm | 8.5.x |
| pnpm | 7.1.x | windows | 11 |
已完成图表:
| 分类 | 名称 | 名称 | 名称 |
| ------ | ---------------- | ---------------- | -------- |
| 图表 | 柱状图 | 横向柱状图 | 折线图 |
| \* | 单/多 折线面积图 | 饼图 | 水球图 |
| \* | 环形图 | NaiveUI 多种进度 | 🤠 |
| 信息 | 文字 | 图片 | 😶 |
| 列表 | 滚动排名列表 | 滚动表格 | 🤓 |
| 小组件 | 边框-01~13 | 装饰-01~05 | 数字翻牌 |
## 浏览器支持
开发和测试平台均在 `Google` 和最新版 `EDGE` 上完成,暂未测试 `IE11` 等其它浏览器,如有需求请自行测试与兼容。
## 安装
本项目采用` pnpm` 进行包管理
```shell
# port
VITE_DEV_PORT = '8080'

View File

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

View File

@@ -1,12 +1,12 @@
{
"name": "go-view",
"version": "2.2.9",
"version": "2.2.7",
"engines": {
"node": ">=16.14"
"node": ">=12.0"
},
"scripts": {
"dev": "vite --host",
"build": "vite build",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"new": "plop --plopfile ./plop/plopfile.js",
"postinstall": "husky install",
@@ -21,8 +21,6 @@
"@types/crypto-js": "^4.1.1",
"@types/keymaster": "^1.6.30",
"@types/lodash": "^4.14.184",
"@visactor/vchart": "^2.0.0",
"@visactor/vchart-theme": "^1.12.2",
"animate.css": "^4.1.1",
"axios": "^1.4.0",
"color": "^4.2.3",
@@ -39,16 +37,16 @@
"keymaster": "^1.6.2",
"mitt": "^3.0.0",
"monaco-editor": "^0.33.0",
"naive-ui": "2.40.3",
"naive-ui": "2.34.3",
"pinia": "^2.0.13",
"screenfull": "^6.0.1",
"three": "^0.145.0",
"vue": "^3.5.13",
"vue": "^3.2.31",
"vue-demi": "^0.13.1",
"vue-i18n": "9.2.2",
"vue-router": "4.0.12",
"vue3-lazyload": "^0.2.5-beta",
"vue3-sketch-ruler": "1.3.3",
"vue3-sketch-ruler": "^1.3.3",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
@@ -77,7 +75,7 @@
"mockjs": "^1.1.0",
"plop": "^3.0.5",
"prettier": "^2.6.2",
"sass": "1.49.11",
"sass": "^1.49.11",
"sass-loader": "^12.6.0",
"typescript": "4.6.3",
"vite": "4.3.6",

10911
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

View File

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

View File

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

View File

@@ -1,29 +0,0 @@
import { VChart } from '@visactor/vchart/esm/core';
import { registerBarChart, registerAreaChart, registerLineChart, registerPieChart, registerFunnelChart, registerWordCloudChart, registerScatterChart } from '@visactor/vchart/esm/chart';
import { registerTooltip, registerCartesianCrossHair, registerDiscreteLegend, registerLabel } from '@visactor/vchart/esm/component';
import { registerDomTooltipHandler } from '@visactor/vchart/esm/plugin/components';
import { registerAnimate } from '@visactor/vchart';
export const registerChartsAndComponents = () => {
VChart.useRegisters([
// 图表
registerBarChart,
registerAreaChart,
registerLineChart,
registerPieChart,
registerScatterChart,
registerFunnelChart,
registerWordCloudChart,
// 组件
registerTooltip,
registerDomTooltipHandler,
registerCartesianCrossHair,
registerDiscreteLegend,
registerLabel,
// 动画
registerAnimate
]);
}

View File

@@ -1,32 +0,0 @@
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
}

View File

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

View File

@@ -1,28 +0,0 @@
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
}

View File

@@ -1,20 +0,0 @@
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
}

View File

@@ -1,43 +0,0 @@
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
spec.label = {
...spec.label,
style: {
...spec.label?.style,
lineWidth: 0
}
}
// console.log('spec-line-transform', spec)
return spec
}

View File

@@ -1,132 +0,0 @@
import { Datum } from '@visactor/vchart/esm/typings'
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
if (spec.extensionMark) {
// extensionMark
spec.extensionMark = [
{
name: 'arc_inner_shadow',
type: 'arc',
dataId: 'id0',
style: {
interactive: false,
startAngle: (datum: 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) => {
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()
}
}
}
]
}
return spec
}

View File

@@ -1,35 +0,0 @@
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
}

View File

@@ -1,21 +0,0 @@
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
}

View File

@@ -1,110 +0,0 @@
<template>
<collapse-item :name="axis.name">
<template #header>
<n-switch v-model:value="axis.visible" size="small"></n-switch>
</template>
<setting-item-box name="单位">
<setting-item name="可见性">
<n-space>
<n-switch v-model:value="axis.unit.visible" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="内容">
<n-input v-model:value="axis.unit.text" size="small"></n-input>
</setting-item>
<FontStyle :style="toRefs(axis.unit.style)"></FontStyle>
</setting-item-box>
<setting-item-box name="轴标签">
<setting-item v-if="axis.label" name="可见性">
<n-space>
<n-switch v-model:value="axis.label.visible" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item v-if="axis.label" name="角度">
<n-input-number v-model:value="axis.label.style.angle" :min="0" :max="360" size="small" />
</setting-item>
<FontStyle v-if="axis.label" :style="toRefs(axis.label.style)"></FontStyle>
</setting-item-box>
<setting-item-box name="轴标题">
<setting-item name="可见性">
<n-space>
<n-switch v-model:value="axis.title.visible" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="内容">
<n-input v-model:value="axis.title.style.text" size="small"></n-input>
</setting-item>
<setting-item name="位置">
<n-select v-model:value="axis.title.position" :options="legendsConfig.position" size="small" />
</setting-item>
<setting-item name="角度">
<n-input-number v-model:value="axis.title.angle" :min="0" :max="360" size="small" />
</setting-item>
<FontStyle :style="toRefs(axis.title.style)"></FontStyle>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item name="可见性">
<n-space>
<n-switch v-model:value="axis.domainLine.visible" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name=""> </setting-item>
<setting-item name="粗细">
<n-input-number v-model:value="axis.domainLine.style.lineWidth" :min="0" size="small" />
</setting-item>
<setting-item name="颜色">
<n-color-picker v-model:value="axis.domainLine.style.stroke" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="网格线">
<setting-item name="可见性">
<n-space>
<n-switch v-model:value="axis.grid.visible" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="开启虚线">
<n-space>
<n-switch v-model:value="isLineDashRef" size="small" @update:value="changeLineDash"></n-switch>
</n-space>
</setting-item>
<setting-item name="粗细">
<n-input-number v-model:value="axis.grid.style.lineWidth" :min="0" size="small" />
</setting-item>
<setting-item name="颜色">
<n-color-picker v-model:value="axis.grid.style.stroke" size="small" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType, ref, toRefs } from 'vue'
import FontStyle from './common/FontStyle.vue'
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
const props = defineProps({
axis: {
type: Object as PropType<vChartGlobalThemeJsonType>,
required: true
}
})
// 判断是否是虚线
const isDash = (data: undefined | Array<number>) => {
if (!data || data.length === 0 || data[0] === 0) return false
return true
}
// 虚线
const isLineDashRef = ref(isDash(props.axis.grid.style.lineDash))
const changeLineDash = (data: boolean) => {
if (data) {
props.axis.grid.style.lineDash = [4, 4] // 设置为虚线
} else {
props.axis.grid.style.lineDash = [0] // 设置为实线
}
}
</script>

View File

@@ -1,52 +0,0 @@
<template>
<template v-if="optionData.bar">
<collapse-item name="柱体">
<SettingItemBox name="样式">
<setting-item v-if="'width' in optionData.bar.style" name="宽度">
<n-input-number v-model:value="optionData.bar.style.width" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item v-if="'height' in (optionData.bar.style as any)" name="高度">
<n-input-number v-model:value="(optionData.bar.style as any).height" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="圆角大小">
<n-input-number v-model:value="optionData.bar.style.cornerRadius" size="small" :min="0"></n-input-number>
</setting-item>
<setting-item name="填充透明度">
<n-input-number
v-model:value="optionData.bar.style.fillOpacity"
:step="0.1"
size="small"
:min="0"
:max="1"
></n-input-number>
</setting-item>
<setting-item name="整体透明度">
<n-input-number
v-model:value="optionData.bar.style.opacity"
:step="0.1"
size="small"
:min="0"
:max="1"
></n-input-number>
</setting-item>
<setting-item name="纹理类型">
<n-select v-model:value="optionData.bar.style.texture" :options="styleConfig.texture" size="small"></n-select>
</setting-item>
</SettingItemBox>
</collapse-item>
</template>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
defineProps({
optionData: {
type: Object as PropType<vChartGlobalThemeJsonType>,
required: true
}
})
</script>

View File

@@ -1,46 +0,0 @@
<template>
<template v-if="optionData.label">
<collapse-item name="标签">
<template #header>
<n-switch v-model:value="optionData.label.visible" size="small"></n-switch>
</template>
<setting-item-box name="布局">
<setting-item name="位置">
<n-select
v-model:value="optionData.label.position"
size="small"
:options="positionOptions || labelConfig.barPosition"
/>
</setting-item>
<setting-item name="间距">
<n-input-number v-model:value="optionData.label.offset" :min="1" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="字体">
<FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
</setting-item-box>
</collapse-item>
</template>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'
import FontStyle from './common/FontStyle.vue'
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
defineProps({
optionData: {
type: Object as PropType<vChartGlobalThemeJsonType>,
required: true
},
positionOptions: {
type: Array,
required: false
}
})
</script>

View File

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

View File

@@ -1,33 +0,0 @@
<template>
<collapse-item name="线条" v-if="optionData.line">
<SettingItemBox name="样式">
<setting-item name="宽度">
<n-input-number v-model:value="optionData.line.style.lineWidth" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="线条类型">
<n-select
v-model:value="optionData.line.style.curveType"
:options="styleConfig.curveType"
size="small"
></n-select>
</setting-item>
<setting-item name="末端样式">
<n-select v-model:value="optionData.line.style.lineCap" :options="styleConfig.lineCap" size="small"></n-select>
</setting-item>
</SettingItemBox>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
defineProps({
optionData: {
type: Object as PropType<vChartGlobalThemeJsonType>,
required: true
}
})
</script>

View File

@@ -1,56 +0,0 @@
<template>
<template v-if="optionData.point">
<collapse-item name="实心点(图元)">
<template #header>
<n-switch v-model:value="optionData.point.visible" size="small"></n-switch>
</template>
<setting-item-box name="样式">
<setting-item name="位置">
<n-select v-model:value="optionData.point.style.symbolType" size="small" :options="styleConfig.symbolType" />
</setting-item>
<setting-item name="大小">
<n-input-number v-model:value="optionData.point.style.size" :min="0" size="small" />
</setting-item>
<setting-item name="填充透明度">
<n-input-number v-model:value="optionData.point.style.fillOpacity" :step="0.1" :min="0" size="small" />
</setting-item>
<setting-item name="边框宽度">
<n-input-number v-model:value="optionData.point.style.lineWidth" :min="0" size="small" />
</setting-item>
<setting-item name="边框颜色">
<n-color-picker v-model:value="optionData.point.style.stroke" size="small" />
</setting-item>
<setting-item name="边框透明度">
<n-input-number v-model:value="optionData.point.style.strokeOpacity" :step="0.1" :min="0" size="small" />
</setting-item>
<setting-item name="偏移X">
<n-input-number v-model:value="optionData.point.style.dx" :min="0" size="small" />
</setting-item>
<setting-item name="偏移Y">
<n-input-number v-model:value="optionData.point.style.dy" :min="0" size="small" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
import FontStyle from './common/FontStyle.vue'
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
defineProps({
optionData: {
type: Object as PropType<vChartGlobalThemeJsonType>,
required: true
},
positionOptions: {
type: Array,
required: false
}
})
</script>

View File

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

View File

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

View File

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

View File

@@ -1,84 +0,0 @@
<template>
<setting-item name="间距">
<n-input v-model:value="paddingArray" size="small" @update:value="updateHandle"/>
</setting-item>
</template>
<script setup lang="ts">
import type { ICartesianTitle } from '@visactor/vchart/esm/component/axis'
import { forEach, isNumber } from 'lodash'
import { SettingItem } from '@/components/Pages/ChartItemSetting'
import { PropType, ref } from 'vue'
const props = defineProps({
axis: {
type: Object as PropType<ICartesianTitle>,
required: true
}
})
// 解析间距
const paddingInit = (padding: ICartesianTitle['padding']) => {
const arr = [0, 0, 0, 0]
if (!padding) {
return arr
}
if (isNumber(padding)) {
arr.forEach((item, index) => {
arr[index] = padding
})
} else if (Array.isArray(padding)) {
if (padding.length === 1) {
arr.forEach((item, index) => {
arr[index] = padding[0]
})
} else if (padding.length === 2) {
arr[0] = padding[0]
arr[1] = padding[1]
arr[2] = padding[0]
arr[3] = padding[1]
} else if (padding.length === 3) {
arr[0] = padding[0]
arr[1] = padding[1]
arr[2] = padding[2]
arr[3] = padding[1]
} else if (padding.length === 4) {
arr[0] = padding[0]
arr[1] = padding[1]
arr[2] = padding[2]
arr[3] = padding[3]
}
}
// 转成字符串,逗号分隔
return arr.map(item => item.toString()).join(',')
}
// 间距处理
const paddingArray = ref(paddingInit(props.axis.padding))
// 字符串转成数组
const paddingArrayToNumber = (padding: string) => {
const arr = padding.split(',').map(item => parseFloat(item.trim()))
if (arr.length === 1) {
return [arr[0], arr[0], arr[0], arr[0]]
} else if (arr.length === 2) {
return [arr[0], arr[1], arr[0], arr[1]]
} else if (arr.length === 3) {
return [arr[0], arr[1], arr[2], arr[1]]
} else if (arr.length === 4) {
return arr
}
return [0, 0, 0, 0]
}
const updateHandle = (value: string) => {
const padding = paddingArrayToNumber(value)
forEach(padding, (item, index) => {
if (isNaN(item)) {
padding[index] = 0
}
})
props.axis.padding = padding
}
</script>

View File

@@ -1,8 +0,0 @@
import VChartGlobalSetting from './VChartGlobalSetting.vue'
import Axis from './Axis.vue'
import Label from './Label.vue'
import Bar from './Bar.vue'
import Line from './Line.vue'
import Point from './Point.vue'
export { VChartGlobalSetting, Axis, Label, Bar, Line, Point }

View File

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

View File

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

View File

@@ -116,7 +116,7 @@ export const useChartDataPondFetch = () => {
const requestDataPondItem = computed(() => {
return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
}) as ComputedRef<RequestDataPondItemType>
if (requestDataPondItem) {
if (requestDataPondItem.value) {
newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
}
}

View File

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

View File

@@ -7,7 +7,7 @@ export default {
my: 'My',
new_project: 'New Project',
all_project: 'All Project',
my_template: 'My Template',
my_templete: 'My Templete',
template_market: 'Template Market',
// items

View File

@@ -8,7 +8,7 @@ export default {
my: '我的',
new_project: '新项目',
all_project: '全部项目',
my_template: '我的模板',
my_templete: '我的模板',
template_market: '模板市场',
// items

View File

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

View File

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

View File

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

View File

@@ -1,120 +0,0 @@
export const labelConfig = {
position: [
{
label: '外部',
value: 'outside'
},
{
label: '内部',
value: 'inside'
},
{
label: '内部-外',
value: 'inside-outer'
},
{
label: '内部-里',
value: 'inside-inner'
},
{
label: '内部-居中',
value: 'inside-center'
}
],
barPosition: [
{
label: '外部',
value: 'outside'
},
{
label: '内部',
value: 'inside'
},
{
label: '顶部',
value: 'top'
},
{
label: '底部',
value: 'bottom'
},
{
label: '左侧',
value: 'left'
},
{
label: '右侧',
value: 'right'
},
{
label: '内部-顶',
value: 'inside-top'
},
{
label: '内部-底',
value: 'inside-bottom'
},
{
label: '内部-右',
value: 'inside-right'
},
{
label: '内部-左',
value: 'inside-left'
},
{
label: '顶部-右',
value: 'top-right'
},
{
label: '顶部-左',
value: 'top-left'
},
{
label: '底部-右',
value: 'bottom-right'
},
{
label: '底部-左',
value: 'bottom-left'
}
],
linePosition: [
{
label: '顶部',
value: 'top'
},
{
label: '底部',
value: 'bottom'
},
{
label: '左侧',
value: 'left'
},
{
label: '右侧',
value: 'right'
},
{
label: '顶部-右',
value: 'top-right'
},
{
label: '顶部-左',
value: 'top-left'
},
{
label: '底部-右',
value: 'bottom-right'
},
{
label: '底部-左',
value: 'bottom-left'
},
{
label: '居中',
value: 'center'
}
]
}

View File

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

View File

@@ -1,150 +0,0 @@
export const styleConfig = {
texture: [
{
label: '无纹理',
value: ''
},
{
label: '圆形',
value: 'circle'
},
{
label: '钻石',
value: 'diamond'
},
{
label: '矩形',
value: 'rect'
},
{
label: '竖线',
value: 'horizontal-line'
},
{
label: '横线',
value: 'vertical-line'
},
{
label: '右向左斜线',
value: 'bias-rl'
},
{
label: '左向右斜线',
value: 'bias-lr'
},
{
label: '格子',
value: 'grid'
}
],
curveType: [
{
label: '线性',
value: 'linear'
},
{
label: '平滑',
value: 'monotone'
},
{
label: '平滑趋近X',
value: 'monotoneX'
},
{
label: '台阶',
value: 'step'
},
{
label: '连线闭合',
value: 'catmullRom'
},
{
label: '顺滑闭合',
value: 'catmullRomClosed'
}
],
lineCap: [
{
label: '默认',
value: 'butt'
},
{
label: '圆形',
value: 'round'
},
{
label: '方形',
value: 'square'
}
],
symbolType: [
{
label: '圆形',
value: 'circle'
},
{
label: '方形',
value: 'rect'
},
{
label: '菱形',
value: 'diamond'
},
{
label: '三角形',
value: 'square'
},
{
label: '指向向上',
value: 'arrow'
},
{
label: '指向向左',
value: 'arrow2Left'
},
{
label: '箭头向右',
value: 'arrow2Right'
},
{
label: '瘦箭头向上',
value: 'wedge'
},
{
label: '箭头向上',
value: 'triangle'
},
{
label: '箭头向下',
value: 'triangleDown'
},
{
label: '箭头向右',
value: 'triangleRight'
},
{
label: '箭头向左',
value: 'triangleLeft'
},
{
label: '星星',
value: 'star'
},
{
label: 'y字形物',
value: 'wye'
},
{
label: '矩形',
value: 'rect'
},
{
label: '圆角矩形',
value: 'rectRound'
},
{
label: '扁平矩形',
value: 'roundLine'
}
]
}

View File

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

View File

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

View File

@@ -4,6 +4,7 @@
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
:update-options="{
replaceMerge: replaceMergeArr
}"
@@ -22,6 +23,7 @@ import { mergeTheme } from '@/packages/public/chart'
import config, { includes, seriesItem } from './config'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
import cloneDeep from 'lodash/cloneDeep'
@@ -77,7 +79,5 @@ watch(
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

View File

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

View File

@@ -4,30 +4,9 @@
<CollapseItem
v-for="(item, index) in seriesList"
:key="index"
:name="`系列${index + 1}`"
:name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
:expanded="true"
>
<template #header>
<n-text class="go-fs-13" depth="3">
{{ item.type == 'bar' ? '「柱状图」' : '「折线图」' }}
</n-text>
</template>
<SettingItemBox name="类型">
<SettingItem name="宽度">
<n-select
:value="item.type"
size="small"
:options="[
{ label: '柱状图', value: 'bar' },
{ label: '折线图', value: 'line' }
]"
@update:value="(value: any) => {
updateHandle(item, value)
}"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="图形" v-if="item.type == 'bar'">
<SettingItem name="宽度">
<n-input-number
@@ -55,12 +34,6 @@
<SettingItem name="类型">
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
</SettingItem>
<setting-item>
<n-space>
<n-switch v-model:value="item.smooth" size="small" />
<n-text>曲线</n-text>
</n-space>
</setting-item>
</SettingItemBox>
<SettingItemBox name="实心点" v-if="item.type == 'line'">
<SettingItem name="大小">
@@ -90,10 +63,10 @@
<n-select
v-model:value="item.label.position"
:options="[
{ label: '顶部', value: 'top' },
{ label: '左侧', value: 'left' },
{ label: '右侧', value: 'right' },
{ label: '底部', value: 'bottom' }
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
@@ -102,18 +75,10 @@
</template>
<script setup lang="ts">
import { PropType, computed, toRaw } from 'vue'
import { merge, cloneDeep } from 'lodash';
import GlobalSetting from '@/components/Pages/ChartItemSetting/GlobalSetting.vue'
import CollapseItem from '@/components/Pages/ChartItemSetting/CollapseItem.vue'
import SettingItemBox from '@/components/Pages/ChartItemSetting/SettingItemBox.vue'
import SettingItem from '@/components/Pages/ChartItemSetting/SettingItem.vue'
import { PropType, computed } from 'vue'
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { lineConf } from '@/packages/chartConfiguration/echarts'
import { GlobalThemeJsonType } from '@/settings/chartThemes'
import { barSeriesItem, lineSeriesItem } from './config'
const props = defineProps({
optionData: {
@@ -125,14 +90,4 @@ const props = defineProps({
const seriesList = computed(() => {
return props.optionData.series
})
const updateHandle = (item:any, value:string) => {
const _label = cloneDeep(toRaw(item.label))
lineSeriesItem.label = _label
if (value === 'line') {
merge(item, lineSeriesItem)
} else {
merge(item, barSeriesItem)
}
}
</script>

View File

@@ -4,9 +4,7 @@
:init-options="initOptions"
:theme="themeColor"
:option="option"
:update-options="{
replaceMerge: replaceMergeArr
}"
:manual-update="isPreview()"
autoresize
></v-chart>
</template>
@@ -14,7 +12,6 @@
<script setup lang="ts">
import { ref, computed, watch, PropType, nextTick } from 'vue'
import VChart from 'vue-echarts'
import { isObject, cloneDeep } from 'lodash'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
@@ -54,35 +51,17 @@ const option = computed(() => {
watch(
() => props.chartConfig.option.dataset,
(newData: any, oldData) => {
try {
if (!isObject(newData) || !('dimensions' in newData)) return
if (Array.isArray((newData as any)?.dimensions)) {
const seriesArr: typeof barSeriesItem[] = []
// 对oldData进行判断防止传入错误数据之后对旧维度判断产生干扰
// 此处计算的是dimensions的Y轴维度若是dimensions.length为0或1则默认为1排除X轴维度干扰
const oldDimensions =
Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
const dimensionsGap = newDimensions - oldDimensions
if (dimensionsGap < 0) {
props.chartConfig.option.series.splice(newDimensions - 1)
} else if (dimensionsGap > 0) {
if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
props.chartConfig.option.series = []
}
for (let i = 0; i < dimensionsGap; i++) {
seriesArr.push(cloneDeep(barSeriesItem))
}
props.chartConfig.option.series.push(...seriesArr)
}
replaceMergeArr.value = ['series']
nextTick(() => {
replaceMergeArr.value = []
})
(newData, oldData) => {
if (newData.dimensions.length !== oldData.dimensions.length) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(barSeriesItem, lineSeriesItem)
}
} catch (error) {
console.log(error)
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
},
{
@@ -90,7 +69,5 @@ watch(
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

View File

@@ -124,14 +124,7 @@ const calcData = (data: any, type?: string) => {
const calcCapsuleLengthAndLabelData = (dataset: any) => {
try {
const { source } = dataset
if (!source) return
if (source.length === 0) {
// 清空数据
state.capsuleLength = []
state.labelData = []
return
}
if (!source || !source.length) return
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
@@ -147,8 +140,9 @@ const calcCapsuleLengthAndLabelData = (dataset: any) => {
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
state.labelData = labelData
} catch (error) {
console.warn(error)
console.warn(error);
}
}

View File

@@ -4,6 +4,7 @@
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
:update-options="{
replaceMerge: replaceMergeArr
}"
@@ -23,9 +24,9 @@ import config, { includes, seriesItem } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import { isPreview } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
import { cloneDeep } from 'lodash'
const props = defineProps({
themeSetting: {
@@ -61,7 +62,7 @@ watch(
if (Array.isArray(newData?.dimensions)) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(cloneDeep(seriesItem))
seriesArr.push(seriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
@@ -78,7 +79,5 @@ watch(
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
</script>

View File

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

View File

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

View File

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

View File

@@ -16,7 +16,8 @@ export enum ThemeEnum {
MACARON = 'macaron',
BLUE = 'blue',
DARKBLUE = 'darkblue',
WINE = 'wine'
WINE = 'wine',
WEIXIN = 'tileLayer'
}
export enum LangEnum {
@@ -30,11 +31,6 @@ export enum ViewModeEnum {
STEREOSCOPIC = '3D'
}
export const ShowHideEnum = {
SHOW: true,
HIDE: false
}
export enum FeaturesEnum {
BG = 'bg',
POINT = 'point',
@@ -56,7 +52,7 @@ export const option = {
mapOptions: {
pitch: 60,
skyColor: '#53A9DE',
amapKey: '',
amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
amapStyleKey: ThemeEnum.DARK,
amapStyleKeyCustom: '',
amapLon: 116.397428,
@@ -75,25 +71,6 @@ export const option = {
},
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
viewMode: ViewModeEnum.PLANE,
showLabel: ShowHideEnum.SHOW,
satelliteTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 1,
opacity: 1,
zooms: [3, 18]
},
roadNetTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 2,
opacity: 1,
zooms: [3, 18]
},
trafficTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 3,
opacity: 1,
zooms: [3, 18]
},
lang: LangEnum.ZH_CN,
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
}

View File

@@ -22,21 +22,13 @@
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
</setting-item>
</setting-item-box>
<setting-item-box name="显示要素" :alone="true">
<setting-item-box name="内容" :alone="true">
<n-checkbox-group v-model:value="optionData.mapOptions.features">
<n-space item-style="display: flex;">
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
</n-space>
</n-checkbox-group>
</setting-item-box>
<setting-item-box name="文字标注" :alone="true">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
</setting-item-box>
<setting-item-box name="位置">
<setting-item name="经度">
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
@@ -84,94 +76,11 @@
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="图层" :expanded="true">
<setting-item-box name="卫星图层">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
<setting-item-box name="路网图层">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
<setting-item-box name="实时交通">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
defineProps({
@@ -225,6 +134,10 @@ const themeOptions = [
{
value: ThemeEnum.WINE,
label: '酱籽'
},
{
value: ThemeEnum.WEIXIN,
label: '卫星'
}
]
@@ -257,19 +170,19 @@ const viewModeOptions = [
const featuresOptions = [
{
value: FeaturesEnum.BG,
label: '区域面'
label: '显示地图背景'
},
{
value: FeaturesEnum.POINT,
label: '标注'
label: '显示标识'
},
{
value: FeaturesEnum.ROAD,
label: '道路'
label: '显示道路'
},
{
value: FeaturesEnum.BUILDING,
label: '建筑'
label: '显示建筑'
}
]

View File

@@ -28,13 +28,9 @@ let {
amapStyleKeyCustom,
features,
viewMode,
showLabel,
pitch,
skyColor,
marker,
satelliteTileLayer,
roadNetTileLayer,
trafficTileLayer
marker
} = toRefs(props.chartConfig.option.mapOptions)
let mapIns: any = null
@@ -46,7 +42,7 @@ const initMap = (newData: any) => {
// 初始化
AMapLoader.load({
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥
version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
version: '1.4.8', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
})
.then(AMap => {
@@ -60,40 +56,17 @@ const initMap = (newData: any) => {
pitch: pitch.value, // 地图俯仰角度,有效范围 0 度- 83 度
skyColor: skyColor.value,
viewMode: viewMode.value, // 地图模式
showLabel: showLabel.value, // 是否显示地图文字标记
willReadFrequently: true
})
dataHandle(props.chartConfig.option.dataset)
let satelliteLayer = new AMap.TileLayer.Satellite({
zIndex: satelliteTileLayer.value.zIndex,
opacity: satelliteTileLayer.value.opacity,
zooms: satelliteTileLayer.value.zooms
})
let roadNetLayer = new AMap.TileLayer.RoadNet({
zIndex: roadNetTileLayer.value.zIndex,
opacity: roadNetTileLayer.value.opacity,
zooms: roadNetTileLayer.value.zooms
})
let trafficLayer = new AMap.TileLayer.Traffic({
zIndex: trafficTileLayer.value.zIndex,
opacity: trafficTileLayer.value.opacity,
zooms: trafficTileLayer.value.zooms
})
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
if (satelliteTileLayer.value.show) {
mapIns.add([satelliteLayer])
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}`)
}
if (roadNetTileLayer.value.show) {
mapIns.add([roadNetLayer])
}
if (trafficTileLayer.value.show) {
mapIns.add([trafficLayer])
}
mapIns.setMapStyle(
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
)
})
.catch(e => {})
}

View File

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

View File

@@ -171,19 +171,7 @@ const backLevel = () => {
// 切换地图
const checkOrMap = async (newData: string) => {
if (newData === 'china') {
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
// 显示南海
hainanLandsHandle(true)
vEchartsSetOption()
} else {
// 隐藏南海
hainanLandsHandle(false)
vEchartsSetOption()
}
} else {
await getGeojson(newData)
}
await getGeojson(newData)
props.chartConfig.option.geo.map = newData
props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'map') item.map = newData

View File

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

View File

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

View File

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

View File

@@ -103,10 +103,6 @@ watch(
() => props.chartConfig.option.type,
newData => {
try {
// 防止初始化时触发修改,导致部分参数丢失
if (isPreview()) {
return
}
if (newData === 'nomal') {
props.chartConfig.option.series[0].radius = '70%'
props.chartConfig.option.series[0].roseType = false

View File

@@ -47,9 +47,10 @@ export const option = {
tooltip: {
showDelay: 0,
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
// console.log(params)
return params.value.length > 1
? `${params.seriesName}<br />${params.value[0]} ${params.value[1]}`
: `${params.name} ${params.value}`
: `${params.seriesName}<br />${params.name} ${params.value}`
},
axisPointer: {
show: true,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,5 @@
<template>
<div ref="vChartRef">
<div>
<n-countdown
ref="countdownRef"
:duration="totalDuration"
@@ -79,8 +79,6 @@ import { CreateComponentType } from '@/packages/index.d'
import { Flipper } from '@/components/Pages/Flipper'
import { OptionType } from './config'
import { CountdownInst, CountdownProps } from 'naive-ui/es/countdown/src/Countdown'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const props = defineProps({
chartConfig: {
@@ -176,10 +174,6 @@ watch(
onMounted(() => {
updateTotalDuration()
})
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
</script>
<style lang="scss" scoped>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -36,7 +36,7 @@ let option = shallowReactive({ ...configOption })
// 预览更新
const vVideoRef = ref(null)
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData
option = newData
})
// 编辑更新

View File

@@ -10,11 +10,7 @@
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
<div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
<div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
{{
typeof status.mergedConfig.valueFormatter === 'function'
? status.mergedConfig.valueFormatter(item)
: item.value
}}
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
{{ unit }}
</div>
</div>
@@ -66,8 +62,7 @@ const status = reactive({
const calcRowsData = () => {
let { dataset, rowNum, sort } = status.mergedConfig
// @ts-ignore
sort &&
dataset.sort(({ value: a }, { value: b }) => {
sort &&dataset.sort(({ value: a }, { value: b } ) => {
if (a > b) return -1
if (a < b) return 1
if (a === b) return 0
@@ -142,7 +137,7 @@ const onRestart = async () => {
calcRowsData()
let flag = true
if (dataset.length <= rowNum) {
flag = false
flag=false
}
calcHeights(flag)
animation(flag)

View File

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

View File

@@ -1,47 +0,0 @@
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)
}

View File

@@ -1,19 +0,0 @@
<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>

View File

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

View File

@@ -1,14 +0,0 @@
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'
}

View File

@@ -1,22 +0,0 @@
<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>

Some files were not shown because too many files have changed in this diff Show More