github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-05-30 00:00:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: supply more chart types into vchart libs

Browse Source
This commit is contained in:
skie1997
2025-02-20 15:42:54 +08:00
parent 3b5e0fcdeb
commit 54b393b456
61 changed files with 4065 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/packages/components/VChart/Areas/VChartArea/config.ts
+47
View 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)
}
src/packages/components/VChart/Areas/VChartArea/config.vue
+19
View 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>
src/packages/components/VChart/Areas/VChartArea/data.json
+16
View 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 }
]
}
src/packages/components/VChart/Areas/VChartArea/index.ts
+14
View 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'
}
src/packages/components/VChart/Areas/VChartArea/index.vue
+22
View 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>
src/packages/components/VChart/Areas/VChartPercentArea/config.ts
+48
View File
@@ -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)
}
src/packages/components/VChart/Areas/VChartPercentArea/config.vue
+19
View 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>
src/packages/components/VChart/Areas/VChartPercentArea/data.json
+16
View 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 }
]
}
src/packages/components/VChart/Areas/VChartPercentArea/index.ts
+14
View File
@@ -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'
}
src/packages/components/VChart/Areas/VChartPercentArea/index.vue
+22
View 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>
src/packages/components/VChart/Areas/index.ts
+4
View File
@@ -0,0 +1,4 @@
import { VChartAreaConfig } from './VChartArea/index'
import { VChartPercentAreaConfig } from './VChartPercentArea/index'
export default [VChartAreaConfig, VChartPercentAreaConfig]
src/packages/components/VChart/Bars/VChartBarCommon/index.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const VChartBarCommonConfig: ConfigType = {
key: 'VChartBarCommon',
chartKey: 'VVChartBarCommon',
conKey: 'VCVChartBarCommon',
title: 'VChart柱状图',
title: 'VChart并列柱状图',
category: ChatCategoryEnum.BAR,
categoryName: ChatCategoryEnumName.BAR,
package: PackagesCategoryEnum.VCHART,
src/packages/components/VChart/Bars/VChartBarStack/index.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const VChartBarStackConfig: ConfigType = {
key: 'VChartBarStack',
chartKey: 'VVChartBarStack',
conKey: 'VCVChartBarStack',
title: 'VChart柱状图',
title: 'VChart堆叠柱状图',
category: ChatCategoryEnum.BAR,
categoryName: ChatCategoryEnumName.BAR,
package: PackagesCategoryEnum.VCHART,
src/packages/components/VChart/Funnels/VChartFunnel/config.ts
+25
View File
@@ -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)
}
src/packages/components/VChart/Funnels/VChartFunnel/config.vue
+17
View 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>
src/packages/components/VChart/Funnels/VChartFunnel/data.json
+24
View File
@@ -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"
}
]
}
src/packages/components/VChart/Funnels/VChartFunnel/index.ts
+14
View 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'
}
src/packages/components/VChart/Funnels/VChartFunnel/index.vue
+22
View 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>
src/packages/components/VChart/Funnels/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { VChartFunnelConfig } from './VChartFunnel/index'
export default [VChartFunnelConfig]
src/packages/components/VChart/Lines/VChartLine/config.ts
+47
View 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)
}
src/packages/components/VChart/Lines/VChartLine/config.vue
+19
View 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>
src/packages/components/VChart/Lines/VChartLine/data.json
+16
View 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 }
]
}
src/packages/components/VChart/Lines/VChartLine/index.ts
+14
View 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'
}
src/packages/components/VChart/Lines/VChartLine/index.vue
+22
View 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>
src/packages/components/VChart/Lines/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { VChartLineConfig } from './VChartLine/index'
export default [VChartLineConfig]
src/packages/components/VChart/Pies/VChartPie/config.ts
+26
View 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)
}
src/packages/components/VChart/Pies/VChartPie/config.vue
+17
View 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>
src/packages/components/VChart/Pies/VChartPie/data.json
+14
View 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 }
]
}
src/packages/components/VChart/Pies/VChartPie/index.ts
+14
View 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'
}
src/packages/components/VChart/Pies/VChartPie/index.vue
+22
View 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>
src/packages/components/VChart/Pies/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { VChartPieConfig } from './VChartPie/index'
export default [VChartPieConfig]
src/packages/components/VChart/Scatters/VChartScatter/config.ts
+47
View File
@@ -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)
}
src/packages/components/VChart/Scatters/VChartScatter/config.vue
+19
View 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>
src/packages/components/VChart/Scatters/VChartScatter/data.json
+2846
View File
File diff suppressed because it is too large Load Diff
src/packages/components/VChart/Scatters/VChartScatter/index.ts
+14
View File
@@ -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'
}
src/packages/components/VChart/Scatters/VChartScatter/index.vue
+22
View 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>
src/packages/components/VChart/Scatters/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { VChartScatterConfig } from './VChartScatter/index'
export default [VChartScatterConfig]
src/packages/components/VChart/WordClouds/VChartWordCloud/config.ts
+26
View File
@@ -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)
}
src/packages/components/VChart/WordClouds/VChartWordCloud/config.vue
+17
View 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>
src/packages/components/VChart/WordClouds/VChartWordCloud/data.json
+88
View File
@@ -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
}
]
}
src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts
+14
View File
@@ -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'
}
src/packages/components/VChart/WordClouds/VChartWordCloud/index.vue
+22
View 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>
src/packages/components/VChart/WordClouds/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { VChartWordCloudConfig } from './VChartWordCloud/index'
export default [VChartWordCloudConfig]
src/packages/components/VChart/index.d.ts
Vendored
+62 -2
View File
@@ -1,13 +1,25 @@
import { IBarChartSpec } from '@visactor/vchart'
import { IBarChartSpec, ILineChartSpec, IAreaChartSpec, IPieChartSpec, IFunnelChartSpec, IWordCloudChartSpec } from '@visactor/vchart'
import { ICartesianAxisCommonSpec } from '@visactor/vchart/esm/component/axis'
export enum ChatCategoryEnum {
BAR = 'Bars',
PIE = 'Pies',
LINE = 'Lines',
AREA = 'Areas',
FUNNEL = 'Funnels',
WORDCLOUD = 'WordClouds',
SCATTER = 'Scatters',
}
export enum ChatCategoryEnumName {
BAR = '柱状图',
PIE = '饼图',
LINE = '折线图',
AREA = '面积图',
FUNNEL = '漏斗图',
WORDCLOUD = '词云图',
SCATTER = '散点图',
}
export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
@@ -21,6 +33,54 @@ export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
} & ICartesianAxisCommonSpec
}
export interface ILineOption extends Omit<ILineChartSpec, 'axes'> {
category: ChatCategoryEnum.LINE
type: 'line'
xAxis?: {
name: string
} & ICartesianAxisCommonSpec
yAxis?: {
name: string
} & ICartesianAxisCommonSpec
}
export interface IAreaOption extends Omit<IAreaChartSpec, 'axes'> {
category: ChatCategoryEnum.AREA
type: 'area'
xAxis?: {
name: string
} & ICartesianAxisCommonSpec
yAxis?: {
name: string
} & ICartesianAxisCommonSpec
}
export interface IPieOption extends IPieChartSpec {
category: ChatCategoryEnum.PIE
type: 'pie'
}
export interface IFunnelOption extends IFunnelChartSpec {
category: ChatCategoryEnum.FUNNEL
type: 'funnel'
}
export interface IWordCloudOption extends IWordCloudChartSpec {
category: ChatCategoryEnum.WORDCLOUD
type: 'wordCloud'
}
export interface IScatterOption extends Omit<IAreaChartSpec, 'axes'> {
category: ChatCategoryEnum.SCATTER
type: 'scatter'
xAxis?: {
name: string
} & ICartesianAxisCommonSpec
yAxis?: {
name: string
} & ICartesianAxisCommonSpec
}
// todo
// export type IOption = IBarOption | ILineOption ....
export type IOption = IBarOption
export type IOption = IBarOption | IPieOption | ILineOption | IAreaOption | IFunnelOption | IScatterOption
src/packages/components/VChart/index.ts
+7 -1
View File
@@ -1,3 +1,9 @@
import Bars from './Bars'
import Pies from './Pies'
import Lines from './Lines'
import Areas from './Areas'
import Funnels from './Funnels'
import WordClouds from './WordClouds'
import Scatters from './Scatters'
export const VChartList = [...Bars]
export const VChartList = [...Bars, ...Pies, ...Lines, ...Areas, ...Funnels, ...WordClouds, ...Scatters]