mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
Merge branch 'dev' into master-fetch-dev
This commit is contained in:
奔跑的面条
commit
aad77cf022
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,3 +5,4 @@ dist-ssr
|
|||||||
*.local
|
*.local
|
||||||
.vscode
|
.vscode
|
||||||
.idea
|
.idea
|
||||||
|
pnpm-lock
|
||||||
59
README.md
59
README.md
@ -20,6 +20,65 @@
|
|||||||
|
|
||||||
接口说明地址：[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)
|
接口说明地址：[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 全局方法、组件等
|
||||||
|
|
||||||
|
工作台：
|
||||||
|
|
||||||
|
|
||||||
|
请求配置：
|
||||||
|
|
||||||
|
|
||||||
|
数据过滤：
|
||||||
|
|
||||||
|
|
||||||
|
主题色：
|
||||||
|
|
||||||
|
|
||||||
|
主要技术栈为：
|
||||||
|
|
||||||
|
| 名称 | 版本 | 名称 | 版本 |
|
||||||
|
| ------------------- | ----- | ----------- | ------ |
|
||||||
|
| 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
|
```shell
|
||||||
# port
|
# port
|
||||||
VITE_DEV_PORT = '8080'
|
VITE_DEV_PORT = '8080'
|
||||||
|
|||||||
12
package.json
12
package.json
@ -2,11 +2,11 @@
|
|||||||
"name": "go-view",
|
"name": "go-view",
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12.0"
|
"node": ">=16.14"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --host",
|
"dev": "vite --host",
|
||||||
"build": "vue-tsc --noEmit && vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"new": "plop --plopfile ./plop/plopfile.js",
|
"new": "plop --plopfile ./plop/plopfile.js",
|
||||||
"postinstall": "husky install",
|
"postinstall": "husky install",
|
||||||
@ -21,6 +21,8 @@
|
|||||||
"@types/crypto-js": "^4.1.1",
|
"@types/crypto-js": "^4.1.1",
|
||||||
"@types/keymaster": "^1.6.30",
|
"@types/keymaster": "^1.6.30",
|
||||||
"@types/lodash": "^4.14.184",
|
"@types/lodash": "^4.14.184",
|
||||||
|
"@visactor/vchart": "^1.12.12",
|
||||||
|
"@visactor/vchart-theme": "^1.12.2",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"color": "^4.2.3",
|
"color": "^4.2.3",
|
||||||
@ -37,11 +39,11 @@
|
|||||||
"keymaster": "^1.6.2",
|
"keymaster": "^1.6.2",
|
||||||
"mitt": "^3.0.0",
|
"mitt": "^3.0.0",
|
||||||
"monaco-editor": "^0.33.0",
|
"monaco-editor": "^0.33.0",
|
||||||
"naive-ui": "2.34.3",
|
"naive-ui": "2.40.3",
|
||||||
"pinia": "^2.0.13",
|
"pinia": "^2.0.13",
|
||||||
"screenfull": "^6.0.1",
|
"screenfull": "^6.0.1",
|
||||||
"three": "^0.145.0",
|
"three": "^0.145.0",
|
||||||
"vue": "^3.2.31",
|
"vue": "^3.5.13",
|
||||||
"vue-demi": "^0.13.1",
|
"vue-demi": "^0.13.1",
|
||||||
"vue-i18n": "9.2.2",
|
"vue-i18n": "9.2.2",
|
||||||
"vue-router": "4.0.12",
|
"vue-router": "4.0.12",
|
||||||
@ -75,7 +77,7 @@
|
|||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"plop": "^3.0.5",
|
"plop": "^3.0.5",
|
||||||
"prettier": "^2.6.2",
|
"prettier": "^2.6.2",
|
||||||
"sass": "^1.49.11",
|
"sass": "~1.49.11",
|
||||||
"sass-loader": "^12.6.0",
|
"sass-loader": "^12.6.0",
|
||||||
"typescript": "4.6.3",
|
"typescript": "4.6.3",
|
||||||
"vite": "4.3.6",
|
"vite": "4.3.6",
|
||||||
|
|||||||
10771
pnpm-lock.yaml
generated
10771
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
|||||||
import test from './test.mock'
|
import test from './test.mock'
|
||||||
|
import vchart from './vchart.mock'
|
||||||
import { MockMethod } from 'vite-plugin-mock'
|
import { MockMethod } from 'vite-plugin-mock'
|
||||||
import { RequestHttpEnum } from '@/enums/httpEnum'
|
import { RequestHttpEnum } from '@/enums/httpEnum'
|
||||||
|
|
||||||
@ -22,6 +23,8 @@ export const threeEarth01Url = '/mock/threeEarth01Data'
|
|||||||
export const sankeyUrl = '/mock/sankey'
|
export const sankeyUrl = '/mock/sankey'
|
||||||
export const graphUrl = '/mock/graphData'
|
export const graphUrl = '/mock/graphData'
|
||||||
|
|
||||||
|
export const vchartBarDataUrl = '/mock/vchart/barDataUrl'
|
||||||
|
|
||||||
const mockObject: MockMethod[] = [
|
const mockObject: MockMethod[] = [
|
||||||
{
|
{
|
||||||
// 正则
|
// 正则
|
||||||
@ -115,6 +118,11 @@ const mockObject: MockMethod[] = [
|
|||||||
method: RequestHttpEnum.GET,
|
method: RequestHttpEnum.GET,
|
||||||
response: () => test.graphData
|
response: () => test.graphData
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
url: vchartBarDataUrl,
|
||||||
|
method: RequestHttpEnum.GET,
|
||||||
|
response: () => vchart.bar
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
export default mockObject
|
export default mockObject
|
||||||
|
|||||||
10
src/api/mock/vchart.mock.ts
Normal file
10
src/api/mock/vchart.mock.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import bar from './vchart/bar.json'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
bar: {
|
||||||
|
code: 0,
|
||||||
|
status: 200,
|
||||||
|
msg: '请求成功',
|
||||||
|
data: bar
|
||||||
|
}
|
||||||
|
}
|
||||||
16
src/api/mock/vchart/bar.json
Normal file
16
src/api/mock/vchart/bar.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Nail polish", "year": "Africa", "value|100-900": 3 },
|
||||||
|
{ "type": "Nail polish", "year": "EU", "value|100-900": 3 },
|
||||||
|
{ "type": "Nail polish", "year": "China", "value|100-900": 3 },
|
||||||
|
{ "type": "Nail polish", "year": "USA", "value|100-900": 3 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "Africa", "value|100-900": 3 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "EU", "value|100-900": 3 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "China", "value|100-900": 3 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "USA", "value|100-900": 3 },
|
||||||
|
{ "type": "Rouge", "year": "Africa", "value|100-900": 3 },
|
||||||
|
{ "type": "Rouge", "year": "EU", "value|100-900": 3 },
|
||||||
|
{ "type": "Rouge", "year": "China", "value|100-900": 3 },
|
||||||
|
{ "type": "Rouge", "year": "USA", "value|100-900": 3 }
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/assets/images/chart/vchart/vchart_area.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_area.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/chart/vchart/vchart_bar_x.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_bar_x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/chart/vchart/vchart_bar_x_stack.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_bar_x_stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/images/chart/vchart/vchart_funnel.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_funnel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
src/assets/images/chart/vchart/vchart_line.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/chart/vchart/vchart_percent_area.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_percent_area.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/chart/vchart/vchart_pie.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_pie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/images/chart/vchart/vchart_scatter.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_scatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/images/chart/vchart/vchart_word_cloud.png
Normal file
BIN
src/assets/images/chart/vchart/vchart_word_cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
3
src/components/GoVChart/index.ts
Normal file
3
src/components/GoVChart/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import GoVChart from './index.vue'
|
||||||
|
|
||||||
|
export { GoVChart }
|
||||||
246
src/components/GoVChart/index.vue
Normal file
246
src/components/GoVChart/index.vue
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
<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 })
|
||||||
|
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>
|
||||||
29
src/components/GoVChart/register.ts
Normal file
29
src/components/GoVChart/register.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
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
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
32
src/components/GoVChart/transformProps/areas.ts
Normal file
32
src/components/GoVChart/transformProps/areas.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
delete spec.category
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// axis
|
||||||
|
const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
|
||||||
|
const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
|
||||||
|
spec.axes = [{
|
||||||
|
orient: 'bottom',
|
||||||
|
...restXAxisProps
|
||||||
|
}, {
|
||||||
|
orient: 'left',
|
||||||
|
...restYAxisProps
|
||||||
|
}]
|
||||||
|
delete spec.xAxis
|
||||||
|
delete spec.yAxis
|
||||||
|
// console.log('spec-area-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
34
src/components/GoVChart/transformProps/bars.ts
Normal file
34
src/components/GoVChart/transformProps/bars.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
delete spec.category
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// axis
|
||||||
|
const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
|
||||||
|
const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
|
||||||
|
spec.axes = [{
|
||||||
|
orient: 'bottom',
|
||||||
|
...restXAxisProps,
|
||||||
|
// paddingInner: 0.5
|
||||||
|
}, {
|
||||||
|
orient: 'left',
|
||||||
|
...restYAxisProps
|
||||||
|
}]
|
||||||
|
|
||||||
|
delete spec.xAxis
|
||||||
|
delete spec.yAxis
|
||||||
|
// console.log('spec-bar-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
28
src/components/GoVChart/transformProps/funnels.ts
Normal file
28
src/components/GoVChart/transformProps/funnels.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Datum } from "@visactor/vchart/esm/typings"
|
||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
const INNER_RADIUS = 0.75
|
||||||
|
const OUTER_RADIUS = 0.68
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// label
|
||||||
|
spec.label = {
|
||||||
|
visible: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log('spec-funnel-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
20
src/components/GoVChart/transformProps/index.ts
Normal file
20
src/components/GoVChart/transformProps/index.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { ChatCategoryEnum, IOption } from "@/packages/components/VChart/index.d";
|
||||||
|
import bars from './bars'
|
||||||
|
import pies from './pies'
|
||||||
|
import lines from './lines'
|
||||||
|
import areas from './areas'
|
||||||
|
import funnels from "./funnels";
|
||||||
|
import wordClouds from "./wordClouds";
|
||||||
|
import scatters from "./scatters";
|
||||||
|
export const transformHandler: {
|
||||||
|
[key: string]: (args: IOption) => any
|
||||||
|
} = {
|
||||||
|
[ChatCategoryEnum.BAR]: bars,
|
||||||
|
[ChatCategoryEnum.PIE]: pies,
|
||||||
|
[ChatCategoryEnum.LINE]: lines,
|
||||||
|
[ChatCategoryEnum.AREA]: areas,
|
||||||
|
[ChatCategoryEnum.FUNNEL]: funnels,
|
||||||
|
[ChatCategoryEnum.WORDCLOUD]: wordClouds,
|
||||||
|
[ChatCategoryEnum.SCATTER]: scatters,
|
||||||
|
// todo: more charts handler
|
||||||
|
}
|
||||||
32
src/components/GoVChart/transformProps/lines.ts
Normal file
32
src/components/GoVChart/transformProps/lines.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
delete spec.category
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// axis
|
||||||
|
const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
|
||||||
|
const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
|
||||||
|
spec.axes = [{
|
||||||
|
orient: 'bottom',
|
||||||
|
...restXAxisProps
|
||||||
|
}, {
|
||||||
|
orient: 'left',
|
||||||
|
...restYAxisProps
|
||||||
|
}]
|
||||||
|
delete spec.xAxis
|
||||||
|
delete spec.yAxis
|
||||||
|
// console.log('spec-line-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
139
src/components/GoVChart/transformProps/pies.ts
Normal file
139
src/components/GoVChart/transformProps/pies.ts
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
import { Datum } from "@visactor/vchart/esm/typings"
|
||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
const INNER_RADIUS = 0.75
|
||||||
|
const OUTER_RADIUS = 0.68
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
delete spec.category
|
||||||
|
|
||||||
|
spec.innerRadius = INNER_RADIUS
|
||||||
|
spec.outerRadius = OUTER_RADIUS
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// extensionMark
|
||||||
|
spec.extensionMark = [
|
||||||
|
{
|
||||||
|
name: 'arc_inner_shadow',
|
||||||
|
type: 'arc',
|
||||||
|
dataId: 'id0',
|
||||||
|
style: {
|
||||||
|
interactive: false,
|
||||||
|
startAngle: (datum: Datum) => {
|
||||||
|
console.log('startAngle', datum)
|
||||||
|
return datum['__VCHART_ARC_START_ANGLE'];
|
||||||
|
},
|
||||||
|
endAngle: (datum: Datum) => {
|
||||||
|
return datum['__VCHART_ARC_END_ANGLE'];
|
||||||
|
},
|
||||||
|
innerRadius: (datum: Datum, context: any) => {
|
||||||
|
return context.getLayoutRadius() * spec.innerRadius - 30;
|
||||||
|
},
|
||||||
|
outerRadius: (datum: Datum, context: any) => {
|
||||||
|
return context.getLayoutRadius() * spec.innerRadius;
|
||||||
|
},
|
||||||
|
fillOpacity: 0.3,
|
||||||
|
fill: (datum: Datum, context: any) => {
|
||||||
|
console.log('context', context.seriesColor(datum[spec.seriesField]))
|
||||||
|
return context.seriesColor(datum[spec.seriesField]);
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
x: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().x();
|
||||||
|
},
|
||||||
|
y: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().y();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'arc_inner',
|
||||||
|
type: 'symbol',
|
||||||
|
// dataId: 'id0',
|
||||||
|
style: {
|
||||||
|
interactive: false,
|
||||||
|
size: (datum: Datum, context: any) => {
|
||||||
|
return context.getLayoutRadius() * 2 * spec.innerRadius - 100;
|
||||||
|
},
|
||||||
|
fillOpacity: 0,
|
||||||
|
lineWidth: 1,
|
||||||
|
strokeOpacity: 0.5,
|
||||||
|
stroke: {
|
||||||
|
gradient: 'conical',
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: Math.PI * 2,
|
||||||
|
stops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#FFF',
|
||||||
|
opacity: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFF',
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
x: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().x();
|
||||||
|
},
|
||||||
|
y: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().y();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'arc_outer',
|
||||||
|
type: 'symbol',
|
||||||
|
// dataId: 'id0',
|
||||||
|
style: {
|
||||||
|
interactive: false,
|
||||||
|
size: (datum: Datum, context: any) => {
|
||||||
|
return context.getLayoutRadius() * 2 * spec.outerRadius + 50;
|
||||||
|
},
|
||||||
|
fillOpacity: 0,
|
||||||
|
lineWidth: 1,
|
||||||
|
strokeOpacity: 0.5,
|
||||||
|
stroke: {
|
||||||
|
gradient: 'conical',
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: Math.PI * 2,
|
||||||
|
stops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#FFF',
|
||||||
|
opacity: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFF',
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
x: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().x();
|
||||||
|
},
|
||||||
|
y: (datum: Datum, context: any) => {
|
||||||
|
return context.getCenter().y();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// console.log('spec-pie-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
35
src/components/GoVChart/transformProps/scatters.ts
Normal file
35
src/components/GoVChart/transformProps/scatters.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
// axis
|
||||||
|
const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
|
||||||
|
const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
|
||||||
|
spec.axes = [{
|
||||||
|
orient: 'bottom',
|
||||||
|
...restXAxisProps,
|
||||||
|
label: {
|
||||||
|
formatMethod: (value: string) => Number(value).toFixed(2)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
orient: 'left',
|
||||||
|
...restYAxisProps
|
||||||
|
}]
|
||||||
|
|
||||||
|
delete spec.xAxis
|
||||||
|
delete spec.yAxis
|
||||||
|
// console.log('spec-scatter-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
21
src/components/GoVChart/transformProps/wordClouds.ts
Normal file
21
src/components/GoVChart/transformProps/wordClouds.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { Datum } from "@visactor/vchart/esm/typings"
|
||||||
|
import { cloneDeep } from "lodash"
|
||||||
|
|
||||||
|
export default (chartProps: any) => {
|
||||||
|
const spec = cloneDeep(chartProps)
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
const keyFill = spec.tooltip.style.keyLabel.fill
|
||||||
|
const valueFill = spec.tooltip.style.valueLabel.fill
|
||||||
|
const titleFill = spec.tooltip.style.titleLabel.keyFill
|
||||||
|
delete spec.tooltip.style.keyLabel.fill
|
||||||
|
delete spec.tooltip.style.valueLabel.fill
|
||||||
|
delete spec.tooltip.style.titleLabel.keyFill
|
||||||
|
spec.tooltip.style.keyLabel.fontColor = keyFill
|
||||||
|
spec.tooltip.style.valueLabel.fontColor = valueFill
|
||||||
|
spec.tooltip.style.titleLabel.fontColor = titleFill
|
||||||
|
|
||||||
|
|
||||||
|
// console.log('spec-word-cloud-transform', spec)
|
||||||
|
return spec
|
||||||
|
}
|
||||||
71
src/components/Pages/VChartItemSetting/Axis.vue
Normal file
71
src/components/Pages/VChartItemSetting/Axis.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<collapse-item v-model:name="axis.name">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="axis.visible" size="small"></n-switch>
|
||||||
|
</template>
|
||||||
|
<setting-item-box name="轴标签">
|
||||||
|
<setting-item name="可见性">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="axis.label.visible" size="small"></n-switch>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="角度">
|
||||||
|
<n-input-number v-model:value="axis.label.style.angle" :min="0" :max="360" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<FontStyle :style="axis.label.style"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="轴标题">
|
||||||
|
<setting-item name="可见性">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="axis.title.visible" size="small"></n-switch>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="标题内容">
|
||||||
|
<n-input v-model:value="axis.title.style.text" size="small"></n-input>
|
||||||
|
</setting-item>
|
||||||
|
<FontStyle :style="axis.title.style"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="轴线">
|
||||||
|
<setting-item name="可见性">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="axis.domainLine.visible" size="small"></n-switch>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name=""> </setting-item>
|
||||||
|
<setting-item name="粗细">
|
||||||
|
<n-input-number v-model:value="axis.domainLine.style.lineWidth" :min="0" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="颜色">
|
||||||
|
<n-color-picker v-model:value="axis.domainLine.style.stroke" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="网格线">
|
||||||
|
<setting-item name="可见性">
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="axis.grid.visible" size="small"></n-switch>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name=""> </setting-item>
|
||||||
|
<setting-item name="粗细">
|
||||||
|
<n-input-number v-model:value="axis.grid.style.lineWidth" :min="0" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="颜色">
|
||||||
|
<n-color-picker v-model:value="axis.grid.style.stroke" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
</collapse-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import FontStyle from './common/FontStyle.vue'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
axis: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
38
src/components/Pages/VChartItemSetting/Legends.vue
Normal file
38
src/components/Pages/VChartItemSetting/Legends.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<!-- todo 补充常用配置项 -->
|
||||||
|
<div v-if="optionData.legends">
|
||||||
|
<div v-for="(legendItem, index) in optionData.legends" :key="index">
|
||||||
|
<collapse-item name="图例">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="legendItem.visible" size="small"></n-switch>
|
||||||
|
</template>
|
||||||
|
<setting-item-box name="布局">
|
||||||
|
<setting-item name="位置">
|
||||||
|
<n-select v-model:value="legendItem.orient" size="small" :options="legendsConfig.orient" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="对齐方式">
|
||||||
|
<n-select v-model:value="legendItem.position" size="small" :options="legendsConfig.position" />
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="项配置">
|
||||||
|
<FontStyle :style="legendItem.item.label.style"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
</collapse-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||||
|
import FontStyle from './common/FontStyle.vue'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
47
src/components/Pages/VChartItemSetting/Tooltip.vue
Normal file
47
src/components/Pages/VChartItemSetting/Tooltip.vue
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<!-- todo 补充常用配置项 -->
|
||||||
|
<div v-if="optionData.tooltip">
|
||||||
|
<collapse-item name="提示框">
|
||||||
|
<template #header>
|
||||||
|
<n-switch v-model:value="optionData.tooltip.visible" size="small"></n-switch>
|
||||||
|
</template>
|
||||||
|
<setting-item-box name="框">
|
||||||
|
<setting-item name="填充">
|
||||||
|
<n-color-picker v-model:value="optionData.tooltip.style.panel.backgroundColor" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="瞄边">
|
||||||
|
<n-color-picker v-model:value="optionData.tooltip.style.panel.border.color" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="粗细">
|
||||||
|
<n-input-number v-model:value="optionData.tooltip.style.panel.border.width" :min="0" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="圆角">
|
||||||
|
<n-input-number v-model:value="optionData.tooltip.style.panel.border.radius" :min="0" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="标题">
|
||||||
|
<FontStyle :style="optionData.tooltip.style.titleLabel"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="名称">
|
||||||
|
<FontStyle :style="optionData.tooltip.style.keyLabel"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
<setting-item-box name="值">
|
||||||
|
<FontStyle :style="optionData.tooltip.style.valueLabel"></FontStyle>
|
||||||
|
</setting-item-box>
|
||||||
|
</collapse-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import FontStyle from './common/FontStyle.vue'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 图例 -->
|
||||||
|
<Legends :optionData="optionData"></Legends>
|
||||||
|
<Tooltip :optionData="optionData"></Tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
import Legends from './Legends.vue'
|
||||||
|
import Tooltip from './Tooltip.vue'
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
33
src/components/Pages/VChartItemSetting/common/FontStyle.vue
Normal file
33
src/components/Pages/VChartItemSetting/common/FontStyle.vue
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<!-- todo 补充常用配置项 -->
|
||||||
|
<!-- <div v-if="style"> -->
|
||||||
|
<!-- <setting-item-box v-if="style" name=""> -->
|
||||||
|
<setting-item name="颜色">
|
||||||
|
<n-color-picker v-model:value="style.fill" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="大小">
|
||||||
|
<n-input-number v-model:value="style.fontSize" :min="1" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="字体">
|
||||||
|
<n-select v-model:value="style.fontFamily" :options="fontStyleConfig.fontFamily" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<setting-item name="字重">
|
||||||
|
<n-select v-model:value="style.fontSize" :options="fontStyleConfig.fontWeight" size="small" />
|
||||||
|
</setting-item>
|
||||||
|
<!-- </setting-item-box> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { fontStyleConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||||
|
import { FontType } from '@/settings/vchartThemes/index'
|
||||||
|
import { SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
style: {
|
||||||
|
type: Object as PropType<FontType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
4
src/components/Pages/VChartItemSetting/index.ts
Normal file
4
src/components/Pages/VChartItemSetting/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import VChartGlobalSetting from './VChartGlobalSetting.vue'
|
||||||
|
import Axis from './Axis.vue'
|
||||||
|
|
||||||
|
export { VChartGlobalSetting, Axis }
|
||||||
@ -6,4 +6,5 @@ export * from '@/hooks/useSystemInit.hook'
|
|||||||
export * from '@/hooks/useChartDataPondFetch.hook'
|
export * from '@/hooks/useChartDataPondFetch.hook'
|
||||||
export * from '@/hooks/useLifeHandler.hook'
|
export * from '@/hooks/useLifeHandler.hook'
|
||||||
export * from '@/hooks/useLang.hook'
|
export * from '@/hooks/useLang.hook'
|
||||||
export * from '@/hooks/useChartInteract.hook'
|
export * from '@/hooks/useChartInteract.hook'
|
||||||
|
export * from '@/hooks/useVCharts.hook'
|
||||||
164
src/hooks/useVCharts.hook.ts
Normal file
164
src/hooks/useVCharts.hook.ts
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
import { watch } from 'vue'
|
||||||
|
import { VChart, type ITheme } from '@visactor/vchart'
|
||||||
|
|
||||||
|
import light from '@visactor/vchart-theme/public/light.json'
|
||||||
|
import dark from '@visactor/vchart-theme/public/dark.json'
|
||||||
|
import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'
|
||||||
|
import vScreenClean from '@visactor/vchart-theme/public/vScreenClean.json'
|
||||||
|
import vScreenOutskirts from '@visactor/vchart-theme/public/vScreenOutskirts.json'
|
||||||
|
import vScreenBlueOrange from '@visactor/vchart-theme/public/vScreenBlueOrange.json'
|
||||||
|
import vScreenFinanceYellow from '@visactor/vchart-theme/public/vScreenFinanceYellow.json'
|
||||||
|
import vScreenWenLvCyan from '@visactor/vchart-theme/public/vScreenWenLvCyan.json'
|
||||||
|
import vScreenElectricGreen from '@visactor/vchart-theme/public/vScreenElectricGreen.json'
|
||||||
|
import vScreenECommercePurple from '@visactor/vchart-theme/public/vScreenECommercePurple.json'
|
||||||
|
import vScreenRedBlue from '@visactor/vchart-theme/public/vScreenRedBlue.json'
|
||||||
|
import vScreenPartyRed from '@visactor/vchart-theme/public/vScreenPartyRed.json'
|
||||||
|
// 行业色板
|
||||||
|
import veODesignLightFinance from '@visactor/vchart-theme/public/veODesignLightFinance.json'
|
||||||
|
import veODesignDarkFinance from '@visactor/vchart-theme/public/veODesignDarkFinance.json'
|
||||||
|
|
||||||
|
import veODesignLightGovernment from '@visactor/vchart-theme/public/veODesignLightGovernment.json'
|
||||||
|
import veODesignDarkGovernment from '@visactor/vchart-theme/public/veODesignDarkGovernment.json'
|
||||||
|
|
||||||
|
import veODesignLightConsumer from '@visactor/vchart-theme/public/veODesignLightConsumer.json'
|
||||||
|
import veODesignDarkConsumer from '@visactor/vchart-theme/public/veODesignDarkConsumer.json'
|
||||||
|
|
||||||
|
import veODesignLightAutomobile from '@visactor/vchart-theme/public/veODesignLightAutomobile.json'
|
||||||
|
import veODesignDarkAutomobile from '@visactor/vchart-theme/public/veODesignDarkAutomobile.json'
|
||||||
|
|
||||||
|
import veODesignLightCulturalTourism from '@visactor/vchart-theme/public/veODesignLightCulturalTourism.json'
|
||||||
|
import veODesignDarkCulturalTourism from '@visactor/vchart-theme/public/veODesignDarkCulturalTourism.json'
|
||||||
|
|
||||||
|
import veODesignLightMedical from '@visactor/vchart-theme/public/veODesignLightMedical.json'
|
||||||
|
import veODesignDarkMedical from '@visactor/vchart-theme/public/veODesignDarkMedical.json'
|
||||||
|
|
||||||
|
import veODesignLightNewEnergy from '@visactor/vchart-theme/public/veODesignLightNewEnergy.json'
|
||||||
|
import veODesignDarkNewEnergy from '@visactor/vchart-theme/public/veODesignDarkNewEnergy.json'
|
||||||
|
|
||||||
|
const themeMap = {
|
||||||
|
// 明亮
|
||||||
|
light: light,
|
||||||
|
// 暗黑
|
||||||
|
dark: dark,
|
||||||
|
// 火山蓝
|
||||||
|
vScreenVolcanoBlue: vScreenVolcanoBlue,
|
||||||
|
// 党建红
|
||||||
|
vScreenPartyRed: vScreenPartyRed,
|
||||||
|
// 清新蜡笔
|
||||||
|
vScreenClean: vScreenClean,
|
||||||
|
// 郊外
|
||||||
|
vScreenOutskirts: vScreenOutskirts,
|
||||||
|
// 汽车蓝橙
|
||||||
|
vScreenBlueOrange: vScreenBlueOrange,
|
||||||
|
// 金融黄
|
||||||
|
vScreenFinanceYellow: vScreenFinanceYellow,
|
||||||
|
// 文旅青
|
||||||
|
vScreenWenLvCyan: vScreenWenLvCyan,
|
||||||
|
// 电力绿
|
||||||
|
vScreenElectricGreen: vScreenElectricGreen,
|
||||||
|
// 电商紫
|
||||||
|
vScreenECommercePurple: vScreenECommercePurple,
|
||||||
|
// 红蓝
|
||||||
|
vScreenRedBlue: vScreenRedBlue,
|
||||||
|
// 金融行业色板
|
||||||
|
veODesignLightFinance: veODesignLightFinance,
|
||||||
|
veODesignDarkFinance: veODesignDarkFinance,
|
||||||
|
// 政府行业色板
|
||||||
|
veODesignLightGovernment: veODesignLightGovernment,
|
||||||
|
veODesignDarkGovernment: veODesignDarkGovernment,
|
||||||
|
// 消费行业色板
|
||||||
|
veODesignLightConsumer: veODesignLightConsumer,
|
||||||
|
veODesignDarkConsumer: veODesignDarkConsumer,
|
||||||
|
// 汽车行业色板
|
||||||
|
veODesignLightAutomobile: veODesignLightAutomobile,
|
||||||
|
veODesignDarkAutomobile: veODesignDarkAutomobile,
|
||||||
|
// 文旅行业色板
|
||||||
|
veODesignLightCulturalTourism: veODesignLightCulturalTourism,
|
||||||
|
veODesignDarkCulturalTourism: veODesignDarkCulturalTourism,
|
||||||
|
// 医疗行业色板
|
||||||
|
veODesignLightMedical: veODesignLightMedical,
|
||||||
|
veODesignDarkMedical: veODesignDarkMedical,
|
||||||
|
// 新能源行业色板
|
||||||
|
veODesignLightNewEnergy: veODesignLightNewEnergy,
|
||||||
|
veODesignDarkNewEnergy: veODesignDarkNewEnergy
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useVCharts = () => {
|
||||||
|
const getThemeMap = () => {
|
||||||
|
return themeMap
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册主题（支持自定义主题）
|
||||||
|
const registerTheme = (themeName: keyof typeof themeMap, theme: any) => {
|
||||||
|
VChart.ThemeManager.registerTheme(themeName, (themeMap[themeName] as any) || theme)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置当前主题
|
||||||
|
const setCurrentTheme = (themeName = 'vScreenVolcanoBlue') => {
|
||||||
|
VChart.ThemeManager.setCurrentTheme(themeName)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断主题是否存在
|
||||||
|
const themeExist = (name: string): boolean => {
|
||||||
|
return VChart.ThemeManager.themeExist(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取主题
|
||||||
|
const getTheme = (name: string): ITheme => {
|
||||||
|
return VChart.ThemeManager.getTheme(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前主题
|
||||||
|
const getCurrentTheme = (): ITheme => {
|
||||||
|
return VChart.ThemeManager.getCurrentTheme()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置主题
|
||||||
|
const setTheme = (name: keyof typeof themeMap): boolean => {
|
||||||
|
if (themeExist(name)) {
|
||||||
|
setCurrentTheme(name)
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// 先注册
|
||||||
|
const theme = themeMap[name]
|
||||||
|
if (theme) {
|
||||||
|
registerTheme(name, theme)
|
||||||
|
setCurrentTheme(name)
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
// 注册默认主题
|
||||||
|
registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
getThemeMap,
|
||||||
|
registerTheme,
|
||||||
|
setCurrentTheme,
|
||||||
|
themeExist,
|
||||||
|
getTheme,
|
||||||
|
setTheme,
|
||||||
|
getCurrentTheme
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题初始化
|
||||||
|
export const useInitVChartsTheme = (chartEditStore: any) => {
|
||||||
|
const vCharts = useVCharts()
|
||||||
|
|
||||||
|
const initVChartsThemeIns = watch(
|
||||||
|
() => chartEditStore.getEditCanvasConfig.vChartThemeName,
|
||||||
|
(newTheme: string) => {
|
||||||
|
vCharts.setTheme(newTheme as any)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
initVChartsThemeIns
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,7 +7,7 @@ export default {
|
|||||||
my: 'My',
|
my: 'My',
|
||||||
new_project: 'New Project',
|
new_project: 'New Project',
|
||||||
all_project: 'All Project',
|
all_project: 'All Project',
|
||||||
my_templete: 'My Templete',
|
my_template: 'My Template',
|
||||||
template_market: 'Template Market',
|
template_market: 'Template Market',
|
||||||
|
|
||||||
// items
|
// items
|
||||||
|
|||||||
@ -8,7 +8,7 @@ export default {
|
|||||||
my: '我的',
|
my: '我的',
|
||||||
new_project: '新项目',
|
new_project: '新项目',
|
||||||
all_project: '全部项目',
|
all_project: '全部项目',
|
||||||
my_templete: '我的模板',
|
my_template: '我的模板',
|
||||||
template_market: '模板市场',
|
template_market: '模板市场',
|
||||||
|
|
||||||
// items
|
// items
|
||||||
|
|||||||
1
src/packages/chartConfiguration/vcharts/index.ts
Normal file
1
src/packages/chartConfiguration/vcharts/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './legends'
|
||||||
99
src/packages/chartConfiguration/vcharts/legends.ts
Normal file
99
src/packages/chartConfiguration/vcharts/legends.ts
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
export const legendsConfig = {
|
||||||
|
// 位置
|
||||||
|
orient: [
|
||||||
|
{
|
||||||
|
label: '顶部',
|
||||||
|
value: 'top'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '底部',
|
||||||
|
value: 'bottom'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '左侧',
|
||||||
|
value: 'left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '右侧',
|
||||||
|
value: 'right'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 对齐方式
|
||||||
|
position: [
|
||||||
|
{
|
||||||
|
label: '起始',
|
||||||
|
value: 'start'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '居中',
|
||||||
|
value: 'middle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '末尾',
|
||||||
|
value: 'end'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 每一项的图例位置
|
||||||
|
align: [
|
||||||
|
{
|
||||||
|
label: '居左',
|
||||||
|
value: 'left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '居右',
|
||||||
|
value: 'right'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const fontStyleConfig = {
|
||||||
|
// 字重
|
||||||
|
fontWeight: [
|
||||||
|
{
|
||||||
|
label: '100',
|
||||||
|
value: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '200',
|
||||||
|
value: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '300',
|
||||||
|
value: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '400',
|
||||||
|
value: 400
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '500',
|
||||||
|
value: 500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '600',
|
||||||
|
value: 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '正常',
|
||||||
|
value: "normal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '加粗',
|
||||||
|
value: "bold"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
fontFamily: [
|
||||||
|
{
|
||||||
|
label: '宋体',
|
||||||
|
value: 'SimSun'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '黑体',
|
||||||
|
value: 'SimHei'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '楷体',
|
||||||
|
value: '楷体'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -28,7 +28,7 @@ export const option = {
|
|||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: true,
|
show: true,
|
||||||
type: 'category'
|
type: 'category'
|
||||||
},
|
},
|
||||||
|
|||||||
@ -10,7 +10,11 @@
|
|||||||
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
|
<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="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
|
||||||
<div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
<div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
||||||
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
|
{{
|
||||||
|
typeof status.mergedConfig.valueFormatter === 'function'
|
||||||
|
? status.mergedConfig.valueFormatter(item)
|
||||||
|
: item.value
|
||||||
|
}}
|
||||||
{{ unit }}
|
{{ unit }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -62,7 +66,8 @@ const status = reactive({
|
|||||||
const calcRowsData = () => {
|
const calcRowsData = () => {
|
||||||
let { dataset, rowNum, sort } = status.mergedConfig
|
let { dataset, rowNum, sort } = status.mergedConfig
|
||||||
// @ts-ignore
|
// @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 1
|
if (a < b) return 1
|
||||||
if (a === b) return 0
|
if (a === b) return 0
|
||||||
@ -137,7 +142,7 @@ const onRestart = async () => {
|
|||||||
calcRowsData()
|
calcRowsData()
|
||||||
let flag = true
|
let flag = true
|
||||||
if (dataset.length <= rowNum) {
|
if (dataset.length <= rowNum) {
|
||||||
flag=false
|
flag = false
|
||||||
}
|
}
|
||||||
calcHeights(flag)
|
calcHeights(flag)
|
||||||
animation(flag)
|
animation(flag)
|
||||||
|
|||||||
47
src/packages/components/VChart/Areas/VChartArea/config.ts
Normal file
47
src/packages/components/VChart/Areas/VChartArea/config.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartAreaConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { IAreaOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IAreaOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'area',
|
||||||
|
dataset: data,
|
||||||
|
xField: 'type',
|
||||||
|
yField: 'value',
|
||||||
|
seriesField: 'country',
|
||||||
|
stack: true,
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartAreaConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartAreaConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartAreaConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
19
src/packages/components/VChart/Areas/VChartArea/config.vue
Normal file
19
src/packages/components/VChart/Areas/VChartArea/config.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
16
src/packages/components/VChart/Areas/VChartArea/data.json
Normal file
16
src/packages/components/VChart/Areas/VChartArea/data.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Nail polish", "country": "China", "value": 3054 },
|
||||||
|
{ "type": "Nail polish", "country": "USA", "value": 12814 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "China", "value": 5067 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
|
||||||
|
{ "type": "Rouge", "country": "China", "value": 7004 },
|
||||||
|
{ "type": "Rouge", "country": "USA", "value": 11624 },
|
||||||
|
{ "type": "Lipstick", "country": "China", "value": 9054 },
|
||||||
|
{ "type": "Lipstick", "country": "USA", "value": 8814 },
|
||||||
|
{ "type": "Eyeshadows", "country": "China", "value": 12043 },
|
||||||
|
{ "type": "Eyeshadows", "country": "USA", "value": 12998 },
|
||||||
|
{ "type": "Eyeliner", "country": "China", "value": 15067 },
|
||||||
|
{ "type": "Eyeliner", "country": "USA", "value": 12321 }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Areas/VChartArea/index.ts
Normal file
14
src/packages/components/VChart/Areas/VChartArea/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartAreaConfig: ConfigType = {
|
||||||
|
key: 'VChartArea',
|
||||||
|
chartKey: 'VVChartArea',
|
||||||
|
conKey: 'VCVChartArea',
|
||||||
|
title: 'VChart面积图',
|
||||||
|
category: ChatCategoryEnum.AREA,
|
||||||
|
categoryName: ChatCategoryEnumName.AREA,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_area.png'
|
||||||
|
}
|
||||||
22
src/packages/components/VChart/Areas/VChartArea/index.vue
Normal file
22
src/packages/components/VChart/Areas/VChartArea/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartPercentAreaConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { IAreaOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IAreaOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'area',
|
||||||
|
dataset: data,
|
||||||
|
xField: 'type',
|
||||||
|
yField: 'value',
|
||||||
|
seriesField: 'country',
|
||||||
|
stack: true,
|
||||||
|
percent: true,
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartPercentAreaConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartPercentAreaConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartPercentAreaConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Nail polish", "country": "China", "value": 3054 },
|
||||||
|
{ "type": "Nail polish", "country": "USA", "value": 12814 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "China", "value": 5067 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
|
||||||
|
{ "type": "Rouge", "country": "China", "value": 7004 },
|
||||||
|
{ "type": "Rouge", "country": "USA", "value": 11624 },
|
||||||
|
{ "type": "Lipstick", "country": "China", "value": 9054 },
|
||||||
|
{ "type": "Lipstick", "country": "USA", "value": 8814 },
|
||||||
|
{ "type": "Eyeshadows", "country": "China", "value": 12043 },
|
||||||
|
{ "type": "Eyeshadows", "country": "USA", "value": 12998 },
|
||||||
|
{ "type": "Eyeliner", "country": "China", "value": 15067 },
|
||||||
|
{ "type": "Eyeliner", "country": "USA", "value": 12321 }
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartPercentAreaConfig: ConfigType = {
|
||||||
|
key: 'VChartPercentArea',
|
||||||
|
chartKey: 'VVChartPercentArea',
|
||||||
|
conKey: 'VCVChartPercentArea',
|
||||||
|
title: 'VChart百分比面积图',
|
||||||
|
category: ChatCategoryEnum.AREA,
|
||||||
|
categoryName: ChatCategoryEnumName.AREA,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_percent_area.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
4
src/packages/components/VChart/Areas/index.ts
Normal file
4
src/packages/components/VChart/Areas/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { VChartAreaConfig } from './VChartArea/index'
|
||||||
|
import { VChartPercentAreaConfig } from './VChartPercentArea/index'
|
||||||
|
|
||||||
|
export default [VChartAreaConfig, VChartPercentAreaConfig]
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartBarCommonConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { IBarOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IBarOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'bar',
|
||||||
|
dataset: data,
|
||||||
|
stack: true,
|
||||||
|
xField: ['year', 'type'],
|
||||||
|
yField: ['value'],
|
||||||
|
seriesField: 'type',
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartBarCommonConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartBarCommonConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartBarCommonConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Autocracies", "year": "1930", "value": 129 },
|
||||||
|
{ "type": "Autocracies", "year": "1940", "value": 133 },
|
||||||
|
{ "type": "Autocracies", "year": "1950", "value": 130 },
|
||||||
|
{ "type": "Autocracies", "year": "1960", "value": 126 },
|
||||||
|
{ "type": "Autocracies", "year": "1970", "value": 117 },
|
||||||
|
{ "type": "Autocracies", "year": "1980", "value": 114 },
|
||||||
|
{ "type": "Autocracies", "year": "1990", "value": 111 },
|
||||||
|
{ "type": "Autocracies", "year": "2000", "value": 89 },
|
||||||
|
{ "type": "Autocracies", "year": "2010", "value": 80 },
|
||||||
|
{ "type": "Autocracies", "year": "2018", "value": 80 },
|
||||||
|
|
||||||
|
{ "type": "Democracies", "year": "1930", "value": 22 },
|
||||||
|
{ "type": "Democracies", "year": "1940", "value": 13 },
|
||||||
|
{ "type": "Democracies", "year": "1950", "value": 25 },
|
||||||
|
{ "type": "Democracies", "year": "1960", "value": 29 },
|
||||||
|
{ "type": "Democracies", "year": "1970", "value": 38 },
|
||||||
|
{ "type": "Democracies", "year": "1980", "value": 41 },
|
||||||
|
{ "type": "Democracies", "year": "1990", "value": 57 },
|
||||||
|
{ "type": "Democracies", "year": "2000", "value": 87 },
|
||||||
|
{ "type": "Democracies", "year": "2010", "value": 98 },
|
||||||
|
{ "type": "Democracies", "year": "2018", "value": 99 }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Bars/VChartBarCommon/index.ts
Normal file
14
src/packages/components/VChart/Bars/VChartBarCommon/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartBarCommonConfig: ConfigType = {
|
||||||
|
key: 'VChartBarCommon',
|
||||||
|
chartKey: 'VVChartBarCommon',
|
||||||
|
conKey: 'VCVChartBarCommon',
|
||||||
|
title: 'VChart并列柱状图',
|
||||||
|
category: ChatCategoryEnum.BAR,
|
||||||
|
categoryName: ChatCategoryEnumName.BAR,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_bar_x.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
47
src/packages/components/VChart/Bars/VChartBarStack/config.ts
Normal file
47
src/packages/components/VChart/Bars/VChartBarStack/config.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartBarStackConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { IBarOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IBarOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'bar',
|
||||||
|
dataset: data,
|
||||||
|
xField: ['type'],
|
||||||
|
yField: ['value'],
|
||||||
|
seriesField: 'year',
|
||||||
|
stack: true,
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartBarStackConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartBarStackConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartBarStackConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
16
src/packages/components/VChart/Bars/VChartBarStack/data.json
Normal file
16
src/packages/components/VChart/Bars/VChartBarStack/data.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Nail polish", "year": "Africa", "value": 590 },
|
||||||
|
{ "type": "Nail polish", "year": "EU", "value": 450 },
|
||||||
|
{ "type": "Nail polish", "year": "China", "value": 474 },
|
||||||
|
{ "type": "Nail polish", "year": "USA", "value": 459 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "Africa", "value": 746 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "EU", "value": 176 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "China", "value": 210 },
|
||||||
|
{ "type": "Eyebrow pencil", "year": "USA", "value": 775 },
|
||||||
|
{ "type": "Rouge", "year": "Africa", "value": 896 },
|
||||||
|
{ "type": "Rouge", "year": "EU", "value": 784 },
|
||||||
|
{ "type": "Rouge", "year": "China", "value": 866 },
|
||||||
|
{ "type": "Rouge", "year": "USA", "value": 899 }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Bars/VChartBarStack/index.ts
Normal file
14
src/packages/components/VChart/Bars/VChartBarStack/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartBarStackConfig: ConfigType = {
|
||||||
|
key: 'VChartBarStack',
|
||||||
|
chartKey: 'VVChartBarStack',
|
||||||
|
conKey: 'VCVChartBarStack',
|
||||||
|
title: 'VChart堆叠柱状图',
|
||||||
|
category: ChatCategoryEnum.BAR,
|
||||||
|
categoryName: ChatCategoryEnumName.BAR,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_bar_x_stack.png'
|
||||||
|
}
|
||||||
22
src/packages/components/VChart/Bars/VChartBarStack/index.vue
Normal file
22
src/packages/components/VChart/Bars/VChartBarStack/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
4
src/packages/components/VChart/Bars/index.ts
Normal file
4
src/packages/components/VChart/Bars/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { VChartBarCommonConfig } from './VChartBarCommon/index'
|
||||||
|
import { VChartBarStackConfig } from './VChartBarStack/index'
|
||||||
|
|
||||||
|
export default [VChartBarCommonConfig, VChartBarStackConfig]
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartFunnelConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import { IFunnelOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IFunnelOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'funnel',
|
||||||
|
dataset: data,
|
||||||
|
categoryField: 'name',
|
||||||
|
valueField: 'value',
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartFunnelConfig.category,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartFunnelConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartFunnelConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"value": 100,
|
||||||
|
"name": "Step1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 80,
|
||||||
|
"name": "Step2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 60,
|
||||||
|
"name": "Step3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 40,
|
||||||
|
"name": "Step4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 20,
|
||||||
|
"name": "Step5"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Funnels/VChartFunnel/index.ts
Normal file
14
src/packages/components/VChart/Funnels/VChartFunnel/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartFunnelConfig: ConfigType = {
|
||||||
|
key: 'VChartFunnel',
|
||||||
|
chartKey: 'VVChartFunnel',
|
||||||
|
conKey: 'VCVChartFunnel',
|
||||||
|
title: 'VChart漏斗图',
|
||||||
|
category: ChatCategoryEnum.FUNNEL,
|
||||||
|
categoryName: ChatCategoryEnumName.FUNNEL,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_funnel.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
3
src/packages/components/VChart/Funnels/index.ts
Normal file
3
src/packages/components/VChart/Funnels/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { VChartFunnelConfig } from './VChartFunnel/index'
|
||||||
|
|
||||||
|
export default [VChartFunnelConfig]
|
||||||
47
src/packages/components/VChart/Lines/VChartLine/config.ts
Normal file
47
src/packages/components/VChart/Lines/VChartLine/config.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartLineConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { ILineOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: ILineOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'line',
|
||||||
|
dataset: data,
|
||||||
|
xField: 'type',
|
||||||
|
yField: 'value',
|
||||||
|
seriesField: 'country',
|
||||||
|
stack: true,
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartLineConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartLineConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartLineConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
19
src/packages/components/VChart/Lines/VChartLine/config.vue
Normal file
19
src/packages/components/VChart/Lines/VChartLine/config.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
16
src/packages/components/VChart/Lines/VChartLine/data.json
Normal file
16
src/packages/components/VChart/Lines/VChartLine/data.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Nail polish", "country": "China", "value": 3054 },
|
||||||
|
{ "type": "Nail polish", "country": "USA", "value": 12814 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "China", "value": 5067 },
|
||||||
|
{ "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
|
||||||
|
{ "type": "Rouge", "country": "China", "value": 7004 },
|
||||||
|
{ "type": "Rouge", "country": "USA", "value": 11624 },
|
||||||
|
{ "type": "Lipstick", "country": "China", "value": 9054 },
|
||||||
|
{ "type": "Lipstick", "country": "USA", "value": 8814 },
|
||||||
|
{ "type": "Eyeshadows", "country": "China", "value": 12043 },
|
||||||
|
{ "type": "Eyeshadows", "country": "USA", "value": 12998 },
|
||||||
|
{ "type": "Eyeliner", "country": "China", "value": 15067 },
|
||||||
|
{ "type": "Eyeliner", "country": "USA", "value": 12321 }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Lines/VChartLine/index.ts
Normal file
14
src/packages/components/VChart/Lines/VChartLine/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartLineConfig: ConfigType = {
|
||||||
|
key: 'VChartLine',
|
||||||
|
chartKey: 'VVChartLine',
|
||||||
|
conKey: 'VCVChartLine',
|
||||||
|
title: 'VChart折线图',
|
||||||
|
category: ChatCategoryEnum.LINE,
|
||||||
|
categoryName: ChatCategoryEnumName.LINE,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_line.png'
|
||||||
|
}
|
||||||
22
src/packages/components/VChart/Lines/VChartLine/index.vue
Normal file
22
src/packages/components/VChart/Lines/VChartLine/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
3
src/packages/components/VChart/Lines/index.ts
Normal file
3
src/packages/components/VChart/Lines/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { VChartLineConfig } from './VChartLine/index'
|
||||||
|
|
||||||
|
export default [VChartLineConfig]
|
||||||
26
src/packages/components/VChart/Pies/VChartPie/config.ts
Normal file
26
src/packages/components/VChart/Pies/VChartPie/config.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartPieConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import { IPieOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IPieOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'pie',
|
||||||
|
dataset: data,
|
||||||
|
categoryField: 'year',
|
||||||
|
valueField: 'value',
|
||||||
|
seriesField: 'year',
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartPieConfig.category,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartPieConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartPieConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
17
src/packages/components/VChart/Pies/VChartPie/config.vue
Normal file
17
src/packages/components/VChart/Pies/VChartPie/config.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
14
src/packages/components/VChart/Pies/VChartPie/data.json
Normal file
14
src/packages/components/VChart/Pies/VChartPie/data.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{ "type": "Autocracies", "year": "1930", "value": 129 },
|
||||||
|
{ "type": "Autocracies", "year": "1940", "value": 133 },
|
||||||
|
{ "type": "Autocracies", "year": "1950", "value": 130 },
|
||||||
|
{ "type": "Autocracies", "year": "1960", "value": 126 },
|
||||||
|
{ "type": "Autocracies", "year": "1970", "value": 117 },
|
||||||
|
{ "type": "Autocracies", "year": "1980", "value": 114 },
|
||||||
|
{ "type": "Autocracies", "year": "1990", "value": 111 },
|
||||||
|
{ "type": "Autocracies", "year": "2000", "value": 89 },
|
||||||
|
{ "type": "Autocracies", "year": "2010", "value": 80 },
|
||||||
|
{ "type": "Autocracies", "year": "2018", "value": 80 }
|
||||||
|
]
|
||||||
|
}
|
||||||
14
src/packages/components/VChart/Pies/VChartPie/index.ts
Normal file
14
src/packages/components/VChart/Pies/VChartPie/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartPieConfig: ConfigType = {
|
||||||
|
key: 'VChartPie',
|
||||||
|
chartKey: 'VVChartPie',
|
||||||
|
conKey: 'VCVChartPie',
|
||||||
|
title: 'VChart饼图',
|
||||||
|
category: ChatCategoryEnum.PIE,
|
||||||
|
categoryName: ChatCategoryEnumName.PIE,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_pie.png'
|
||||||
|
}
|
||||||
22
src/packages/components/VChart/Pies/VChartPie/index.vue
Normal file
22
src/packages/components/VChart/Pies/VChartPie/index.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
3
src/packages/components/VChart/Pies/index.ts
Normal file
3
src/packages/components/VChart/Pies/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { VChartPieConfig } from './VChartPie/index'
|
||||||
|
|
||||||
|
export default [VChartPieConfig]
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartScatterConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||||
|
import { IAreaOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IAreaOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'scatter',
|
||||||
|
dataset: data,
|
||||||
|
stack: true,
|
||||||
|
xField: 'x',
|
||||||
|
yField: 'horsepower',
|
||||||
|
seriesField: 'cylinders',
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartScatterConfig.category,
|
||||||
|
xAxis: {
|
||||||
|
name: 'x轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'y轴',
|
||||||
|
...axisThemeJson,
|
||||||
|
grid: {
|
||||||
|
...axisThemeJson.grid,
|
||||||
|
style: {
|
||||||
|
...axisThemeJson.grid.style,
|
||||||
|
lineDash: [3, 3]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartScatterConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartScatterConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
<Axis :axis="optionData.xAxis"></Axis>
|
||||||
|
<Axis :axis="optionData.yAxis"></Axis>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
2846
src/packages/components/VChart/Scatters/VChartScatter/data.json
Normal file
2846
src/packages/components/VChart/Scatters/VChartScatter/data.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartScatterConfig: ConfigType = {
|
||||||
|
key: 'VChartScatter',
|
||||||
|
chartKey: 'VVChartScatter',
|
||||||
|
conKey: 'VCVChartScatter',
|
||||||
|
title: 'VChart散点图',
|
||||||
|
category: ChatCategoryEnum.SCATTER,
|
||||||
|
categoryName: ChatCategoryEnumName.SCATTER,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_scatter.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
3
src/packages/components/VChart/Scatters/index.ts
Normal file
3
src/packages/components/VChart/Scatters/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { VChartScatterConfig } from './VChartScatter/index'
|
||||||
|
|
||||||
|
export default [VChartScatterConfig]
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { PublicConfigClass } from '@/packages/public'
|
||||||
|
import { VChartWordCloudConfig } from './index'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
|
||||||
|
import data from './data.json'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import { IWordCloudOption } from '../../index.d'
|
||||||
|
|
||||||
|
export const includes = ['legends', 'tooltip']
|
||||||
|
export const option: IWordCloudOption & { dataset?: any } = {
|
||||||
|
// 图表配置
|
||||||
|
type: 'wordCloud',
|
||||||
|
dataset: data,
|
||||||
|
nameField: 'name',
|
||||||
|
valueField: 'value',
|
||||||
|
seriesField: 'name',
|
||||||
|
// 业务配置（后续会被转换为图表spec)
|
||||||
|
category: VChartWordCloudConfig.category,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
public key = VChartWordCloudConfig.key
|
||||||
|
public chartConfig = cloneDeep(VChartWordCloudConfig)
|
||||||
|
// 图表配置项
|
||||||
|
public option = vChartOptionPrefixHandle(option, includes)
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<!-- vCharts 全局设置 -->
|
||||||
|
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
|
||||||
|
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
{
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"name": "数据可视化",
|
||||||
|
"value": 8000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "GO VIEW",
|
||||||
|
"value": 6181
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "低代码",
|
||||||
|
"value": 4386
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Vue3",
|
||||||
|
"value": 4055
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "TypeScript4",
|
||||||
|
"value": 2467
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Vite2",
|
||||||
|
"value": 2244
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "NaiveUI",
|
||||||
|
"value": 1898
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ECharts5",
|
||||||
|
"value": 1484
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "VChart",
|
||||||
|
"value": 600
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Axios",
|
||||||
|
"value": 1112
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Pinia2",
|
||||||
|
"value": 965
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "PlopJS",
|
||||||
|
"value": 847
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "sfc",
|
||||||
|
"value": 582
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "SCSS",
|
||||||
|
"value": 555
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "pnpm",
|
||||||
|
"value": 550
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "eslint",
|
||||||
|
"value": 462
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "json",
|
||||||
|
"value": 366
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "图表",
|
||||||
|
"value": 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "地图",
|
||||||
|
"value": 282
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "时钟",
|
||||||
|
"value": 273
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "标题",
|
||||||
|
"value": 265
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const VChartWordCloudConfig: ConfigType = {
|
||||||
|
key: 'VChartWordCloud',
|
||||||
|
chartKey: 'VVChartWordCloud',
|
||||||
|
conKey: 'VCVChartWordCloud',
|
||||||
|
title: 'VChart词云图',
|
||||||
|
category: ChatCategoryEnum.WORDCLOUD,
|
||||||
|
categoryName: ChatCategoryEnumName.WORDCLOUD,
|
||||||
|
package: PackagesCategoryEnum.VCHART,
|
||||||
|
chartFrame: ChartFrameEnum.VCHART,
|
||||||
|
image: 'vchart_word_cloud.png'
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { GoVChart } from '@/components/GoVChart'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import config from './config'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<config>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
props.chartConfig.option.dataset = newData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
3
src/packages/components/VChart/WordClouds/index.ts
Normal file
3
src/packages/components/VChart/WordClouds/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { VChartWordCloudConfig } from './VChartWordCloud/index'
|
||||||
|
|
||||||
|
export default [VChartWordCloudConfig]
|
||||||
86
src/packages/components/VChart/index.d.ts
vendored
Normal file
86
src/packages/components/VChart/index.d.ts
vendored
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import { IBarChartSpec, ILineChartSpec, IAreaChartSpec, IPieChartSpec, IFunnelChartSpec, IWordCloudChartSpec } from '@visactor/vchart'
|
||||||
|
import { ICartesianAxisCommonSpec } from '@visactor/vchart/esm/component/axis'
|
||||||
|
|
||||||
|
|
||||||
|
export enum ChatCategoryEnum {
|
||||||
|
BAR = 'Bars',
|
||||||
|
PIE = 'Pies',
|
||||||
|
LINE = 'Lines',
|
||||||
|
AREA = 'Areas',
|
||||||
|
FUNNEL = 'Funnels',
|
||||||
|
WORDCLOUD = 'WordClouds',
|
||||||
|
SCATTER = 'Scatters',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ChatCategoryEnumName {
|
||||||
|
BAR = '柱状图',
|
||||||
|
PIE = '饼图',
|
||||||
|
LINE = '折线图',
|
||||||
|
AREA = '面积图',
|
||||||
|
FUNNEL = '漏斗图',
|
||||||
|
WORDCLOUD = '词云图',
|
||||||
|
SCATTER = '散点图',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
|
||||||
|
category: ChatCategoryEnum.BAR
|
||||||
|
type: 'bar'
|
||||||
|
xAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
yAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ILineOption extends Omit<ILineChartSpec, 'axes'> {
|
||||||
|
category: ChatCategoryEnum.LINE
|
||||||
|
type: 'line'
|
||||||
|
xAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
yAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IAreaOption extends Omit<IAreaChartSpec, 'axes'> {
|
||||||
|
category: ChatCategoryEnum.AREA
|
||||||
|
type: 'area'
|
||||||
|
xAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
yAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IPieOption extends IPieChartSpec {
|
||||||
|
category: ChatCategoryEnum.PIE
|
||||||
|
type: 'pie'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IFunnelOption extends IFunnelChartSpec {
|
||||||
|
category: ChatCategoryEnum.FUNNEL
|
||||||
|
type: 'funnel'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IWordCloudOption extends IWordCloudChartSpec {
|
||||||
|
category: ChatCategoryEnum.WORDCLOUD
|
||||||
|
type: 'wordCloud'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IScatterOption extends Omit<IAreaChartSpec, 'axes'> {
|
||||||
|
category: ChatCategoryEnum.SCATTER
|
||||||
|
type: 'scatter'
|
||||||
|
xAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
yAxis?: {
|
||||||
|
name: string
|
||||||
|
} & ICartesianAxisCommonSpec
|
||||||
|
}
|
||||||
|
|
||||||
|
// todo
|
||||||
|
// export type IOption = IBarOption | ILineOption ....
|
||||||
|
export type IOption = IBarOption | IPieOption | ILineOption | IAreaOption | IFunnelOption | IScatterOption
|
||||||
9
src/packages/components/VChart/index.ts
Normal file
9
src/packages/components/VChart/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Bars from './Bars'
|
||||||
|
import Pies from './Pies'
|
||||||
|
import Lines from './Lines'
|
||||||
|
import Areas from './Areas'
|
||||||
|
import Funnels from './Funnels'
|
||||||
|
import WordClouds from './WordClouds'
|
||||||
|
import Scatters from './Scatters'
|
||||||
|
|
||||||
|
export const VChartList = [...Bars, ...Pies, ...Lines, ...Areas, ...Funnels, ...WordClouds, ...Scatters]
|
||||||
12
src/packages/index.d.ts
vendored
12
src/packages/index.d.ts
vendored
@ -1,10 +1,13 @@
|
|||||||
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
|
||||||
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||||
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
|
import type { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/VChart/index.d'
|
||||||
|
|
||||||
export enum ChartFrameEnum {
|
export enum ChartFrameEnum {
|
||||||
// 支持 dataset 的 echarts 框架
|
// 支持 dataset 的 echarts 框架
|
||||||
ECHARTS = 'echarts',
|
ECHARTS = 'echarts',
|
||||||
|
// VChart 框架
|
||||||
|
VCHART = 'VChart',
|
||||||
// UI 组件框架
|
// UI 组件框架
|
||||||
NAIVE_UI = 'naiveUI',
|
NAIVE_UI = 'naiveUI',
|
||||||
// 自定义带数据组件
|
// 自定义带数据组件
|
||||||
@ -24,11 +27,11 @@ export type ConfigType = {
|
|||||||
// 标题
|
// 标题
|
||||||
title: string
|
title: string
|
||||||
// 分类
|
// 分类
|
||||||
category: string
|
category: ChatCategoryEnum
|
||||||
// 分类名称
|
// 分类名称
|
||||||
categoryName: string
|
categoryName: ChatCategoryEnumName
|
||||||
// 所属包
|
// 所属包
|
||||||
package: string
|
package: PackagesCategoryEnum
|
||||||
// 归类
|
// 归类
|
||||||
chartFrame?: ChartFrameEnum
|
chartFrame?: ChartFrameEnum
|
||||||
// 预览图
|
// 预览图
|
||||||
@ -173,6 +176,7 @@ export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<
|
|||||||
// 包分类枚举
|
// 包分类枚举
|
||||||
export enum PackagesCategoryEnum {
|
export enum PackagesCategoryEnum {
|
||||||
CHARTS = 'Charts',
|
CHARTS = 'Charts',
|
||||||
|
VCHART = 'VChart',
|
||||||
TABLES = 'Tables',
|
TABLES = 'Tables',
|
||||||
INFORMATIONS = 'Informations',
|
INFORMATIONS = 'Informations',
|
||||||
PHOTOS = 'Photos',
|
PHOTOS = 'Photos',
|
||||||
@ -183,6 +187,7 @@ export enum PackagesCategoryEnum {
|
|||||||
// 包分类名称
|
// 包分类名称
|
||||||
export enum PackagesCategoryName {
|
export enum PackagesCategoryName {
|
||||||
CHARTS = '图表',
|
CHARTS = '图表',
|
||||||
|
VCHART = 'VChart',
|
||||||
TABLES = '列表',
|
TABLES = '列表',
|
||||||
INFORMATIONS = '信息',
|
INFORMATIONS = '信息',
|
||||||
PHOTOS = '图片',
|
PHOTOS = '图片',
|
||||||
@ -199,6 +204,7 @@ export enum FetchComFlagType {
|
|||||||
// 图表包类型
|
// 图表包类型
|
||||||
export type PackagesType = {
|
export type PackagesType = {
|
||||||
[PackagesCategoryEnum.CHARTS]: ConfigType[]
|
[PackagesCategoryEnum.CHARTS]: ConfigType[]
|
||||||
|
[PackagesCategoryEnum.VCHART]: ConfigType[]
|
||||||
[PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
|
[PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
|
||||||
[PackagesCategoryEnum.TABLES]: ConfigType[]
|
[PackagesCategoryEnum.TABLES]: ConfigType[]
|
||||||
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
|
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import { ChartList } from '@/packages/components/Charts/index'
|
import { ChartList } from '@/packages/components/Charts/index'
|
||||||
|
import { VChartList } from '@/packages/components/VChart/index'
|
||||||
import { DecorateList } from '@/packages/components/Decorates/index'
|
import { DecorateList } from '@/packages/components/Decorates/index'
|
||||||
import { InformationList } from '@/packages/components/Informations/index'
|
import { InformationList } from '@/packages/components/Informations/index'
|
||||||
import { TableList } from '@/packages/components/Tables/index'
|
import { TableList } from '@/packages/components/Tables/index'
|
||||||
@ -19,6 +20,7 @@ const imagesModules: Record<string, { default: string }> = import.meta.glob('../
|
|||||||
// * 所有图表
|
// * 所有图表
|
||||||
export let packagesList: PackagesType = {
|
export let packagesList: PackagesType = {
|
||||||
[PackagesCategoryEnum.CHARTS]: ChartList,
|
[PackagesCategoryEnum.CHARTS]: ChartList,
|
||||||
|
[PackagesCategoryEnum.VCHART]: VChartList,
|
||||||
[PackagesCategoryEnum.INFORMATIONS]: InformationList,
|
[PackagesCategoryEnum.INFORMATIONS]: InformationList,
|
||||||
[PackagesCategoryEnum.TABLES]: TableList,
|
[PackagesCategoryEnum.TABLES]: TableList,
|
||||||
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[])
|
|||||||
* @param option
|
* @param option
|
||||||
* @return option
|
* @return option
|
||||||
*/
|
*/
|
||||||
export const echartOptionProfixHandle = (option: any, includes: string[]) => {
|
export const echartOptionProfixHandle = (option: any, includes: string[] = []) => {
|
||||||
option['backgroundColor'] = 'rgba(0,0,0,0)'
|
option['backgroundColor'] = 'rgba(0,0,0,0)'
|
||||||
return mergeTheme(option, globalThemeJson, includes)
|
return mergeTheme(option, globalThemeJson, includes)
|
||||||
}
|
}
|
||||||
|
|||||||
24
src/packages/public/vChart.ts
Normal file
24
src/packages/public/vChart.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import merge from 'lodash/merge'
|
||||||
|
import pick from 'lodash/pick'
|
||||||
|
import { vChartGlobalThemeJson } from '@/settings/vchartThemes/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* * 合并 color 和全局配置项
|
||||||
|
* @param option 配置
|
||||||
|
* @param themeSetting 设置
|
||||||
|
* @param excludes 排除元素
|
||||||
|
* @returns object
|
||||||
|
*/
|
||||||
|
export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {
|
||||||
|
return (option = merge({}, pick(themeSetting, includes), option))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* * vCharts option 统一前置处理
|
||||||
|
* @param option
|
||||||
|
* @return option
|
||||||
|
*/
|
||||||
|
export const vChartOptionPrefixHandle = (option: any, includes: string[] = []) => {
|
||||||
|
option['background'] = 'rgba(0,0,0,0)'
|
||||||
|
return mergeTheme(option, vChartGlobalThemeJson, includes)
|
||||||
|
}
|
||||||
@ -104,7 +104,8 @@ import {
|
|||||||
Carbon3DSoftware as Carbon3DSoftwareIcon,
|
Carbon3DSoftware as Carbon3DSoftwareIcon,
|
||||||
Filter as FilterIcon,
|
Filter as FilterIcon,
|
||||||
FilterEdit as FilterEditIcon,
|
FilterEdit as FilterEditIcon,
|
||||||
Laptop as LaptopIcon
|
Laptop as LaptopIcon,
|
||||||
|
ChartPie as ChartPieIcon
|
||||||
} from '@vicons/carbon'
|
} from '@vicons/carbon'
|
||||||
|
|
||||||
const ionicons5 = {
|
const ionicons5 = {
|
||||||
@ -306,7 +307,9 @@ const carbon = {
|
|||||||
FilterIcon,
|
FilterIcon,
|
||||||
FilterEditIcon,
|
FilterEditIcon,
|
||||||
// 图层
|
// 图层
|
||||||
LaptopIcon
|
LaptopIcon,
|
||||||
|
// 柱状图
|
||||||
|
ChartPieIcon
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://www.xicons.org/#/ 还有很多
|
// https://www.xicons.org/#/ 还有很多
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user