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
|
||||
.vscode
|
||||
.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)
|
||||
|
||||
技术点：
|
||||
|
||||
- 框架：基于 `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
|
||||
# port
|
||||
VITE_DEV_PORT = '8080'
|
||||
|
||||
12
package.json
12
package.json
@ -2,11 +2,11 @@
|
||||
"name": "go-view",
|
||||
"version": "2.2.8",
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
"node": ">=16.14"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"new": "plop --plopfile ./plop/plopfile.js",
|
||||
"postinstall": "husky install",
|
||||
@ -21,6 +21,8 @@
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/keymaster": "^1.6.30",
|
||||
"@types/lodash": "^4.14.184",
|
||||
"@visactor/vchart": "^1.12.12",
|
||||
"@visactor/vchart-theme": "^1.12.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.4.0",
|
||||
"color": "^4.2.3",
|
||||
@ -37,11 +39,11 @@
|
||||
"keymaster": "^1.6.2",
|
||||
"mitt": "^3.0.0",
|
||||
"monaco-editor": "^0.33.0",
|
||||
"naive-ui": "2.34.3",
|
||||
"naive-ui": "2.40.3",
|
||||
"pinia": "^2.0.13",
|
||||
"screenfull": "^6.0.1",
|
||||
"three": "^0.145.0",
|
||||
"vue": "^3.2.31",
|
||||
"vue": "^3.5.13",
|
||||
"vue-demi": "^0.13.1",
|
||||
"vue-i18n": "9.2.2",
|
||||
"vue-router": "4.0.12",
|
||||
@ -75,7 +77,7 @@
|
||||
"mockjs": "^1.1.0",
|
||||
"plop": "^3.0.5",
|
||||
"prettier": "^2.6.2",
|
||||
"sass": "^1.49.11",
|
||||
"sass": "~1.49.11",
|
||||
"sass-loader": "^12.6.0",
|
||||
"typescript": "4.6.3",
|
||||
"vite": "4.3.6",
|
||||
|
||||
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 vchart from './vchart.mock'
|
||||
import { MockMethod } from 'vite-plugin-mock'
|
||||
import { RequestHttpEnum } from '@/enums/httpEnum'
|
||||
|
||||
@ -22,6 +23,8 @@ export const threeEarth01Url = '/mock/threeEarth01Data'
|
||||
export const sankeyUrl = '/mock/sankey'
|
||||
export const graphUrl = '/mock/graphData'
|
||||
|
||||
export const vchartBarDataUrl = '/mock/vchart/barDataUrl'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
// 正则
|
||||
@ -115,6 +118,11 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.graphData
|
||||
},
|
||||
{
|
||||
url: vchartBarDataUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => vchart.bar
|
||||
}
|
||||
]
|
||||
|
||||
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/useLifeHandler.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',
|
||||
new_project: 'New Project',
|
||||
all_project: 'All Project',
|
||||
my_templete: 'My Templete',
|
||||
my_template: 'My Template',
|
||||
template_market: 'Template Market',
|
||||
|
||||
// items
|
||||
|
||||
@ -8,7 +8,7 @@ export default {
|
||||
my: '我的',
|
||||
new_project: '新项目',
|
||||
all_project: '全部项目',
|
||||
my_templete: '我的模板',
|
||||
my_template: '我的模板',
|
||||
template_market: '模板市场',
|
||||
|
||||
// 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'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category'
|
||||
},
|
||||
|
||||
@ -10,7 +10,11 @@
|
||||
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
|
||||
<div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
|
||||
<div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
||||
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
|
||||
{{
|
||||
typeof status.mergedConfig.valueFormatter === 'function'
|
||||
? status.mergedConfig.valueFormatter(item)
|
||||
: item.value
|
||||
}}
|
||||
{{ unit }}
|
||||
</div>
|
||||
</div>
|
||||
@ -62,7 +66,8 @@ const status = reactive({
|
||||
const calcRowsData = () => {
|
||||
let { dataset, rowNum, sort } = status.mergedConfig
|
||||
// @ts-ignore
|
||||
sort &&dataset.sort(({ value: a }, { value: b } ) => {
|
||||
sort &&
|
||||
dataset.sort(({ value: a }, { value: b }) => {
|
||||
if (a > b) return -1
|
||||
if (a < b) return 1
|
||||
if (a === b) return 0
|
||||
@ -137,7 +142,7 @@ const onRestart = async () => {
|
||||
calcRowsData()
|
||||
let flag = true
|
||||
if (dataset.length <= rowNum) {
|
||||
flag=false
|
||||
flag = false
|
||||
}
|
||||
calcHeights(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 type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import type { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/VChart/index.d'
|
||||
|
||||
export enum ChartFrameEnum {
|
||||
// 支持 dataset 的 echarts 框架
|
||||
ECHARTS = 'echarts',
|
||||
// VChart 框架
|
||||
VCHART = 'VChart',
|
||||
// UI 组件框架
|
||||
NAIVE_UI = 'naiveUI',
|
||||
// 自定义带数据组件
|
||||
@ -24,11 +27,11 @@ export type ConfigType = {
|
||||
// 标题
|
||||
title: string
|
||||
// 分类
|
||||
category: string
|
||||
category: ChatCategoryEnum
|
||||
// 分类名称
|
||||
categoryName: string
|
||||
categoryName: ChatCategoryEnumName
|
||||
// 所属包
|
||||
package: string
|
||||
package: PackagesCategoryEnum
|
||||
// 归类
|
||||
chartFrame?: ChartFrameEnum
|
||||
// 预览图
|
||||
@ -173,6 +176,7 @@ export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<
|
||||
// 包分类枚举
|
||||
export enum PackagesCategoryEnum {
|
||||
CHARTS = 'Charts',
|
||||
VCHART = 'VChart',
|
||||
TABLES = 'Tables',
|
||||
INFORMATIONS = 'Informations',
|
||||
PHOTOS = 'Photos',
|
||||
@ -183,6 +187,7 @@ export enum PackagesCategoryEnum {
|
||||
// 包分类名称
|
||||
export enum PackagesCategoryName {
|
||||
CHARTS = '图表',
|
||||
VCHART = 'VChart',
|
||||
TABLES = '列表',
|
||||
INFORMATIONS = '信息',
|
||||
PHOTOS = '图片',
|
||||
@ -199,6 +204,7 @@ export enum FetchComFlagType {
|
||||
// 图表包类型
|
||||
export type PackagesType = {
|
||||
[PackagesCategoryEnum.CHARTS]: ConfigType[]
|
||||
[PackagesCategoryEnum.VCHART]: ConfigType[]
|
||||
[PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
|
||||
[PackagesCategoryEnum.TABLES]: ConfigType[]
|
||||
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { ChartList } from '@/packages/components/Charts/index'
|
||||
import { VChartList } from '@/packages/components/VChart/index'
|
||||
import { DecorateList } from '@/packages/components/Decorates/index'
|
||||
import { InformationList } from '@/packages/components/Informations/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 = {
|
||||
[PackagesCategoryEnum.CHARTS]: ChartList,
|
||||
[PackagesCategoryEnum.VCHART]: VChartList,
|
||||
[PackagesCategoryEnum.INFORMATIONS]: InformationList,
|
||||
[PackagesCategoryEnum.TABLES]: TableList,
|
||||
[PackagesCategoryEnum.DECORATES]: DecorateList,
|
||||
|
||||
@ -20,7 +20,7 @@ export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[])
|
||||
* @param option
|
||||
* @return option
|
||||
*/
|
||||
export const echartOptionProfixHandle = (option: any, includes: string[]) => {
|
||||
export const echartOptionProfixHandle = (option: any, includes: string[] = []) => {
|
||||
option['backgroundColor'] = 'rgba(0,0,0,0)'
|
||||
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,
|
||||
Filter as FilterIcon,
|
||||
FilterEdit as FilterEditIcon,
|
||||
Laptop as LaptopIcon
|
||||
Laptop as LaptopIcon,
|
||||
ChartPie as ChartPieIcon
|
||||
} from '@vicons/carbon'
|
||||
|
||||
const ionicons5 = {
|
||||
@ -306,7 +307,9 @@ const carbon = {
|
||||
FilterIcon,
|
||||
FilterEditIcon,
|
||||
// 图层
|
||||
LaptopIcon
|
||||
LaptopIcon,
|
||||
// 柱状图
|
||||
ChartPieIcon
|
||||
}
|
||||
|
||||
// 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