From cfb2a667bd8077024a6f1195d8770783c0f70349 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sun, 15 Jun 2025 16:36:31 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=E9=85=8D=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GoVChart/index.vue | 4 +- .../GoVChart/transformProps/pies.ts | 233 +++++++++--------- .../Pages/VChartItemSetting/Axis.vue | 2 +- .../VChartItemSetting/common/FontStyle.vue | 4 +- .../chartConfiguration/vcharts/index.ts | 3 +- .../chartConfiguration/vcharts/label.ts | 24 ++ .../Charts/Pies/PieCommon/config.vue | 2 +- .../VChart/Bars/VChartBarCommon/index.ts | 2 +- .../VChart/Bars/VChartBarCrossrange/index.ts | 2 +- .../VChart/Bars/VChartBarStack/index.ts | 2 +- .../VChart/Funnels/VChartFunnel/index.ts | 2 +- .../VChart/Lines/VChartLine/index.ts | 2 +- .../VChart/Pies/VChartPie/config.ts | 22 +- .../VChart/Pies/VChartPie/config.vue | 57 ++++- .../components/VChart/Pies/VChartPie/index.ts | 2 +- .../VChart/Scatters/VChartScatter/index.ts | 2 +- .../WordClouds/VChartWordCloud/index.ts | 2 +- src/packages/components/VChart/index.d.ts | 2 +- 18 files changed, 228 insertions(+), 141 deletions(-) create mode 100644 src/packages/chartConfiguration/vcharts/label.ts diff --git a/src/components/GoVChart/index.vue b/src/components/GoVChart/index.vue index d2c5c050..200be4b3 100644 --- a/src/components/GoVChart/index.vue +++ b/src/components/GoVChart/index.vue @@ -197,7 +197,7 @@ const createOrUpdateChart = ( } ) => { if (vChartRef.value && !chart) { - const spec = transformHandler[chartProps.category](chartProps) + const spec = transformHandler[chartProps.category || '']?.(chartProps) chart = new VChart( { ...spec, data: chartProps.dataset }, { @@ -208,7 +208,7 @@ const createOrUpdateChart = ( chart.renderSync() return true } else if (chart) { - const spec = transformHandler[chartProps.category](chartProps) + const spec = transformHandler[chartProps.category || '']?.(chartProps) chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined }) return true } diff --git a/src/components/GoVChart/transformProps/pies.ts b/src/components/GoVChart/transformProps/pies.ts index c6bb19c3..e371e3f4 100644 --- a/src/components/GoVChart/transformProps/pies.ts +++ b/src/components/GoVChart/transformProps/pies.ts @@ -1,15 +1,10 @@ -import { Datum } from "@visactor/vchart/esm/typings" -import { cloneDeep } from "lodash" -const INNER_RADIUS = 0.75 -const OUTER_RADIUS = 0.68 +import { Datum } from '@visactor/vchart/esm/typings' +import { cloneDeep } from 'lodash' 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 @@ -21,119 +16,117 @@ export default (chartProps: any) => { 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(); + if (spec.extensionMark) { + // extensionMark + spec.extensionMark = [ + { + name: 'arc_inner_shadow', + type: 'arc', + dataId: 'id0', + style: { + interactive: false, + startAngle: (datum: Datum) => { + return datum['__VCHART_ARC_START_ANGLE'] + }, + endAngle: (datum: Datum) => { + return datum['__VCHART_ARC_END_ANGLE'] + }, + innerRadius: (datum: Datum, context: any) => { + return context.getLayoutRadius() * spec.innerRadius - 30 + }, + outerRadius: (datum: Datum, context: any) => { + return context.getLayoutRadius() * spec.innerRadius + }, + fillOpacity: 0.3, + fill: (datum: Datum, context: any) => { + return context.seriesColor(datum[spec.seriesField]) + }, + visible: true, + x: (datum: Datum, context: any) => { + return context.getCenter().x() + }, + y: (datum: Datum, context: any) => { + return context.getCenter().y() + } + } + }, + { + name: 'arc_inner', + type: 'symbol', + // dataId: 'id0', + style: { + interactive: false, + size: (datum: Datum, context: any) => { + return context.getLayoutRadius() * 2 * spec.innerRadius - 100 + }, + fillOpacity: 0, + lineWidth: 1, + strokeOpacity: 0.5, + stroke: { + gradient: 'conical', + startAngle: 0, + endAngle: Math.PI * 2, + stops: [ + { + offset: 0, + color: '#FFF', + opacity: 0 + }, + { + offset: 1, + color: '#FFF', + opacity: 1 + } + ] + }, + visible: true, + x: (datum: Datum, context: any) => { + return context.getCenter().x() + }, + y: (datum: Datum, context: any) => { + return context.getCenter().y() + } + } + }, + { + name: 'arc_outer', + type: 'symbol', + // dataId: 'id0', + style: { + interactive: false, + size: (datum: Datum, context: any) => { + return context.getLayoutRadius() * 2 * spec.outerRadius + 50 + }, + fillOpacity: 0, + lineWidth: 1, + strokeOpacity: 0.5, + stroke: { + gradient: 'conical', + startAngle: 0, + endAngle: Math.PI * 2, + stops: [ + { + offset: 0, + color: '#FFF', + opacity: 0 + }, + { + offset: 1, + color: '#FFF', + opacity: 1 + } + ] + }, + visible: true, + x: (datum: Datum, context: any) => { + return context.getCenter().x() + }, + y: (datum: Datum, context: any) => { + return context.getCenter().y() + } } } - }, - { - 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 -} \ No newline at end of file +} diff --git a/src/components/Pages/VChartItemSetting/Axis.vue b/src/components/Pages/VChartItemSetting/Axis.vue index 08b42be6..76f1135f 100644 --- a/src/components/Pages/VChartItemSetting/Axis.vue +++ b/src/components/Pages/VChartItemSetting/Axis.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/VChart/Pies/VChartPie/index.ts b/src/packages/components/VChart/Pies/VChartPie/index.ts index 532e6154..4e9f28c1 100644 --- a/src/packages/components/VChart/Pies/VChartPie/index.ts +++ b/src/packages/components/VChart/Pies/VChartPie/index.ts @@ -5,7 +5,7 @@ export const VChartPieConfig: ConfigType = { key: 'VChartPie', chartKey: 'VVChartPie', conKey: 'VCVChartPie', - title: 'VChart饼图', + title: '饼图多欢-VChart', category: ChatCategoryEnum.PIE, categoryName: ChatCategoryEnumName.PIE, package: PackagesCategoryEnum.VCHART, diff --git a/src/packages/components/VChart/Scatters/VChartScatter/index.ts b/src/packages/components/VChart/Scatters/VChartScatter/index.ts index 99c0f578..263e69ba 100644 --- a/src/packages/components/VChart/Scatters/VChartScatter/index.ts +++ b/src/packages/components/VChart/Scatters/VChartScatter/index.ts @@ -5,7 +5,7 @@ export const VChartScatterConfig: ConfigType = { key: 'VChartScatter', chartKey: 'VVChartScatter', conKey: 'VCVChartScatter', - title: 'VChart散点图', + title: '散点图-VChart', category: ChatCategoryEnum.SCATTER, categoryName: ChatCategoryEnumName.SCATTER, package: PackagesCategoryEnum.VCHART, diff --git a/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts b/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts index 15fde742..20f93e68 100644 --- a/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts +++ b/src/packages/components/VChart/WordClouds/VChartWordCloud/index.ts @@ -5,7 +5,7 @@ export const VChartWordCloudConfig: ConfigType = { key: 'VChartWordCloud', chartKey: 'VVChartWordCloud', conKey: 'VCVChartWordCloud', - title: 'VChart词云图', + title: '词云图-VChart', category: ChatCategoryEnum.WORDCLOUD, categoryName: ChatCategoryEnumName.WORDCLOUD, package: PackagesCategoryEnum.VCHART, diff --git a/src/packages/components/VChart/index.d.ts b/src/packages/components/VChart/index.d.ts index 4bff51fe..5e64acfc 100644 --- a/src/packages/components/VChart/index.d.ts +++ b/src/packages/components/VChart/index.d.ts @@ -56,7 +56,7 @@ export interface IAreaOption extends Omit { } export interface IPieOption extends IPieChartSpec { - category: ChatCategoryEnum.PIE + category?: ChatCategoryEnum.PIE type: 'pie' } From 9fa0ee630e5cc05d3851c35c5834dbd756513c95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 16 Jun 2025 12:55:46 +0800 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../VChartItemSetting/common/FontStyle.vue | 2 +- .../Charts/Pies/PieCommon/config.vue | 2 +- .../VChart/Pies/VChartPie/config.ts | 37 +++++- .../VChart/Pies/VChartPie/config.vue | 105 +++++++++++++++++- 4 files changed, 135 insertions(+), 11 deletions(-) diff --git a/src/components/Pages/VChartItemSetting/common/FontStyle.vue b/src/components/Pages/VChartItemSetting/common/FontStyle.vue index 37b40362..2f1877fc 100644 --- a/src/components/Pages/VChartItemSetting/common/FontStyle.vue +++ b/src/components/Pages/VChartItemSetting/common/FontStyle.vue @@ -20,7 +20,7 @@ - + diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue index c1d69ab6..5666ea89 100644 --- a/src/packages/components/Charts/Pies/PieCommon/config.vue +++ b/src/packages/components/Charts/Pies/PieCommon/config.vue @@ -81,7 +81,7 @@ > - + - + + + + + + 开启动画 + + + @@ -24,19 +32,55 @@ 展示标签 + + + + 引导线 + + - + + + + + + + + + + + + + + + + + + - - + + From f883fec1f65fca4e8265282b39e55d4a15182370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 16 Jun 2025 14:04:01 +0800 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=E7=BA=B9=E7=90=86=E9=85=8D=E7=BD=AE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartConfiguration/vcharts/index.ts | 3 +- .../chartConfiguration/vcharts/style.ts | 40 +++++++++++++++++++ .../VChart/Pies/VChartPie/config.ts | 4 +- .../VChart/Pies/VChartPie/config.vue | 11 ++++- 4 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/packages/chartConfiguration/vcharts/style.ts diff --git a/src/packages/chartConfiguration/vcharts/index.ts b/src/packages/chartConfiguration/vcharts/index.ts index b773da19..4f7b95bd 100644 --- a/src/packages/chartConfiguration/vcharts/index.ts +++ b/src/packages/chartConfiguration/vcharts/index.ts @@ -1,2 +1,3 @@ export * from './legends' -export * from './label' \ No newline at end of file +export * from './label' +export * from './style' \ No newline at end of file diff --git a/src/packages/chartConfiguration/vcharts/style.ts b/src/packages/chartConfiguration/vcharts/style.ts new file mode 100644 index 00000000..3524c960 --- /dev/null +++ b/src/packages/chartConfiguration/vcharts/style.ts @@ -0,0 +1,40 @@ +export const styleConfig = { + texture: [ + { + label: '无纹理', + value: '' + }, + { + label: '圆形', + value: 'circle' + }, + { + label: '钻石', + value: 'diamond' + }, + { + label: '矩形', + value: 'rect' + }, + { + label: '竖线', + value: 'horizontal-line' + }, + { + label: '横线', + value: 'vertical-line' + }, + { + label: '右向左斜线', + value: 'bias-rl' + }, + { + label: '左向右斜线', + value: 'bias-lr' + }, + { + label: '格子', + value: 'grid' + } + ] +} diff --git a/src/packages/components/VChart/Pies/VChartPie/config.ts b/src/packages/components/VChart/Pies/VChartPie/config.ts index 418ee426..7c8c27cb 100644 --- a/src/packages/components/VChart/Pies/VChartPie/config.ts +++ b/src/packages/components/VChart/Pies/VChartPie/config.ts @@ -49,7 +49,9 @@ export const option: IPieOption & { dataset?: any } = { lineWidth: 0, // 颜色 stroke: '#ffffff' - } + }, + // 纹理 + texture: '' }, state: { hover: { diff --git a/src/packages/components/VChart/Pies/VChartPie/config.vue b/src/packages/components/VChart/Pies/VChartPie/config.vue index e1ca7277..c310188f 100644 --- a/src/packages/components/VChart/Pies/VChartPie/config.vue +++ b/src/packages/components/VChart/Pies/VChartPie/config.vue @@ -44,6 +44,13 @@ + + + @@ -64,7 +71,7 @@ :min="0" > - + Date: Mon, 16 Jun 2025 14:16:29 +0800 Subject: [PATCH 04/12] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E9=A5=BC?= =?UTF-8?q?=E5=9B=BE=E5=8A=A8=E7=94=BB=E9=94=99=E8=AF=AF=E7=9A=84=E8=AE=A1?= =?UTF-8?q?=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GoVChart/index.vue | 6 +++++- src/packages/components/VChart/Pies/VChartPie/config.vue | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/GoVChart/index.vue b/src/components/GoVChart/index.vue index 200be4b3..5d28ff84 100644 --- a/src/components/GoVChart/index.vue +++ b/src/components/GoVChart/index.vue @@ -209,7 +209,11 @@ const createOrUpdateChart = ( return true } else if (chart) { const spec = transformHandler[chartProps.category || '']?.(chartProps) - chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined }) + chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined }, false, undefined, { + change: false, + reMake: false, + reAnimate: true + }) return true } return false diff --git a/src/packages/components/VChart/Pies/VChartPie/config.vue b/src/packages/components/VChart/Pies/VChartPie/config.vue index c310188f..b037ed18 100644 --- a/src/packages/components/VChart/Pies/VChartPie/config.vue +++ b/src/packages/components/VChart/Pies/VChartPie/config.vue @@ -129,7 +129,7 @@ const animationHandle = (value: boolean) => { effects: { channel: { outerRadius: { - to: props.optionData.outerRadius * 100 + 0.1 + to: props.optionData.outerRadius * 100 + 10 } }, easing: 'linear' @@ -140,7 +140,7 @@ const animationHandle = (value: boolean) => { effects: { channel: { outerRadius: { - to: props.optionData.outerRadius * 100 + 0.1 + to: props.optionData.outerRadius * 100 + 10 } }, easing: 'linear' From 99366efc8cdbe2ffa3f8d428d1b432ada0f63bf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Mon, 16 Jun 2025 16:10:52 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1?= =?UTF-8?q?=E7=8A=B6=E5=9B=BE=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GoVChart/index.vue | 2 +- .../Pages/VChartItemSetting/Axis.vue | 6 +- .../Pages/VChartItemSetting/Bar.vue | 52 +++++++++++++++++ .../Pages/VChartItemSetting/Label.vue | 38 ++++++++++++ .../Pages/VChartItemSetting/index.ts | 4 +- .../chartConfiguration/vcharts/label.ts | 58 +++++++++++++++++++ .../VChart/Bars/VChartBarCommon/config.ts | 2 +- .../VChart/Bars/VChartBarCommon/config.vue | 6 +- .../VChart/Bars/VChartBarCrossrange/config.ts | 13 ++++- .../Bars/VChartBarCrossrange/config.vue | 6 +- .../VChart/Bars/VChartBarStack/config.ts | 12 +++- .../VChart/Bars/VChartBarStack/config.vue | 6 +- .../VChart/Pies/VChartPie/config.vue | 8 +-- src/settings/vchartThemes/global.theme.json | 26 ++++++++- 14 files changed, 221 insertions(+), 18 deletions(-) create mode 100644 src/components/Pages/VChartItemSetting/Bar.vue create mode 100644 src/components/Pages/VChartItemSetting/Label.vue diff --git a/src/components/GoVChart/index.vue b/src/components/GoVChart/index.vue index 5d28ff84..1611105f 100644 --- a/src/components/GoVChart/index.vue +++ b/src/components/GoVChart/index.vue @@ -211,7 +211,7 @@ const createOrUpdateChart = ( const spec = transformHandler[chartProps.category || '']?.(chartProps) chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined }, false, undefined, { change: false, - reMake: false, + reMake: true, reAnimate: true }) return true diff --git a/src/components/Pages/VChartItemSetting/Axis.vue b/src/components/Pages/VChartItemSetting/Axis.vue index 76f1135f..daf2e1b4 100644 --- a/src/components/Pages/VChartItemSetting/Axis.vue +++ b/src/components/Pages/VChartItemSetting/Axis.vue @@ -15,15 +15,15 @@ - + - + - + diff --git a/src/components/Pages/VChartItemSetting/Bar.vue b/src/components/Pages/VChartItemSetting/Bar.vue new file mode 100644 index 00000000..f031fb2e --- /dev/null +++ b/src/components/Pages/VChartItemSetting/Bar.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/components/Pages/VChartItemSetting/Label.vue b/src/components/Pages/VChartItemSetting/Label.vue new file mode 100644 index 00000000..f1df09da --- /dev/null +++ b/src/components/Pages/VChartItemSetting/Label.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/components/Pages/VChartItemSetting/index.ts b/src/components/Pages/VChartItemSetting/index.ts index dd8f7f0c..76dcaa44 100644 --- a/src/components/Pages/VChartItemSetting/index.ts +++ b/src/components/Pages/VChartItemSetting/index.ts @@ -1,4 +1,6 @@ import VChartGlobalSetting from './VChartGlobalSetting.vue' import Axis from './Axis.vue' +import Label from './Label.vue' +import Bar from './Bar.vue' -export { VChartGlobalSetting, Axis } +export { VChartGlobalSetting, Axis, Label, Bar } diff --git a/src/packages/chartConfiguration/vcharts/label.ts b/src/packages/chartConfiguration/vcharts/label.ts index 0e338162..f7d9ca7f 100644 --- a/src/packages/chartConfiguration/vcharts/label.ts +++ b/src/packages/chartConfiguration/vcharts/label.ts @@ -20,5 +20,63 @@ export const labelConfig = { label: '内部-居中', value: 'inside-center' } + ], + barPosition: [ + { + label: '外部', + value: 'outside' + }, + { + label: '内部', + value: 'inside' + }, + { + label: '顶部', + value: 'top' + }, + { + label: '底部', + value: 'bottom' + }, + { + label: '左侧', + value: 'left' + }, + { + label: '右侧', + value: 'right' + }, + { + label: '内部-顶', + value: 'inside-top' + }, + { + label: '内部-底', + value: 'inside-bottom' + }, + { + label: '内部-右', + value: 'inside-right' + }, + { + label: '内部-左', + value: 'inside-left' + }, + { + label: '顶部-右', + value: 'top-right' + }, + { + label: '顶部-左', + value: 'top-left' + }, + { + label: '底部-右', + value: 'bottom-right' + }, + { + label: '底部-左', + value: 'bottom-left' + } ] } diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts index 1f035e86..c18ba01d 100644 --- a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts +++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts @@ -7,7 +7,7 @@ import axisThemeJson from '@/settings/vchartThemes/axis.theme.json' import { ChatCategoryEnum, IBarOption } from '../../index.d' import { merge, cloneDeep } from 'lodash' -export const includes = ['legends', 'tooltip'] +export const includes = ['legends', 'tooltip', 'label', 'bar'] export const option: IBarOption & { dataset?: any } = { // 图表配置 type: 'bar', diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue index 9f15a51a..239a716c 100644 --- a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue +++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue @@ -3,11 +3,15 @@ + + + + diff --git a/src/components/Pages/VChartItemSetting/Line.vue b/src/components/Pages/VChartItemSetting/Line.vue new file mode 100644 index 00000000..f405c3c8 --- /dev/null +++ b/src/components/Pages/VChartItemSetting/Line.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/components/Pages/VChartItemSetting/Point.vue b/src/components/Pages/VChartItemSetting/Point.vue new file mode 100644 index 00000000..f2a90318 --- /dev/null +++ b/src/components/Pages/VChartItemSetting/Point.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/components/Pages/VChartItemSetting/index.ts b/src/components/Pages/VChartItemSetting/index.ts index 76dcaa44..8a679abf 100644 --- a/src/components/Pages/VChartItemSetting/index.ts +++ b/src/components/Pages/VChartItemSetting/index.ts @@ -2,5 +2,7 @@ import VChartGlobalSetting from './VChartGlobalSetting.vue' import Axis from './Axis.vue' import Label from './Label.vue' import Bar from './Bar.vue' +import Line from './Line.vue' +import Point from './Point.vue' -export { VChartGlobalSetting, Axis, Label, Bar } +export { VChartGlobalSetting, Axis, Label, Bar, Line, Point } diff --git a/src/packages/chartConfiguration/vcharts/label.ts b/src/packages/chartConfiguration/vcharts/label.ts index f7d9ca7f..20db1987 100644 --- a/src/packages/chartConfiguration/vcharts/label.ts +++ b/src/packages/chartConfiguration/vcharts/label.ts @@ -78,5 +78,43 @@ export const labelConfig = { label: '底部-左', value: 'bottom-left' } + ], + linePosition: [ + { + label: '顶部', + value: 'top' + }, + { + label: '底部', + value: 'bottom' + }, + { + label: '左侧', + value: 'left' + }, + { + label: '右侧', + value: 'right' + }, + { + label: '顶部-右', + value: 'top-right' + }, + { + label: '顶部-左', + value: 'top-left' + }, + { + label: '底部-右', + value: 'bottom-right' + }, + { + label: '底部-左', + value: 'bottom-left' + }, + { + label: '居中', + value: 'center' + } ] } diff --git a/src/packages/chartConfiguration/vcharts/style.ts b/src/packages/chartConfiguration/vcharts/style.ts index 3524c960..4dce3bc1 100644 --- a/src/packages/chartConfiguration/vcharts/style.ts +++ b/src/packages/chartConfiguration/vcharts/style.ts @@ -36,5 +36,115 @@ export const styleConfig = { label: '格子', value: 'grid' } + ], + curveType: [ + { + label: '线性', + value: 'linear' + }, + { + label: '平滑', + value: 'monotone' + }, + { + label: '平滑趋近X', + value: 'monotoneX' + }, + { + label: '台阶', + value: 'step' + }, + { + label: '连线闭合', + value: 'catmullRom' + }, + { + label: '顺滑闭合', + value: 'catmullRomClosed' + } + ], + lineCap: [ + { + label: '默认', + value: 'butt' + }, + { + label: '圆形', + value: 'round' + }, + { + label: '方形', + value: 'square' + } + ], + symbolType: [ + { + label: '圆形', + value: 'circle' + }, + { + label: '方形', + value: 'rect' + }, + { + label: '菱形', + value: 'diamond' + }, + { + label: '三角形', + value: 'square' + }, + { + label: '指向向上', + value: 'arrow' + }, + { + label: '指向向左', + value: 'arrow2Left' + }, + { + label: '箭头向右', + value: 'arrow2Right' + }, + { + label: '瘦箭头向上', + value: 'wedge' + }, + { + label: '箭头向上', + value: 'triangle' + }, + { + label: '箭头向下', + value: 'triangleDown' + }, + { + label: '箭头向右', + value: 'triangleRight' + }, + { + label: '箭头向左', + value: 'triangleLeft' + }, + { + label: '星星', + value: 'star' + }, + { + label: 'y字形物', + value: 'wye' + }, + { + label: '矩形', + value: 'rect' + }, + { + label: '圆角矩形', + value: 'rectRound' + }, + { + label: '扁平矩形', + value: 'roundLine' + } ] } diff --git a/src/packages/components/VChart/Bars/VChartBarStack/config.vue b/src/packages/components/VChart/Bars/VChartBarStack/config.vue index 0fa023a4..53477eb5 100644 --- a/src/packages/components/VChart/Bars/VChartBarStack/config.vue +++ b/src/packages/components/VChart/Bars/VChartBarStack/config.vue @@ -22,7 +22,7 @@ import { PropType } from 'vue' import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting' import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index' -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' +import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting' defineProps({ optionData: { diff --git a/src/packages/components/VChart/Lines/VChartLine/config.ts b/src/packages/components/VChart/Lines/VChartLine/config.ts index 12ce684f..ad2c15a9 100644 --- a/src/packages/components/VChart/Lines/VChartLine/config.ts +++ b/src/packages/components/VChart/Lines/VChartLine/config.ts @@ -5,9 +5,9 @@ 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' +import { ChatCategoryEnum, ILineOption } from '../../index.d' -export const includes = ['legends', 'tooltip'] +export const includes = ['legends', 'tooltip', 'label', 'line', 'point'] export const option: ILineOption & { dataset?: any } = { // 图表配置 type: 'line', @@ -16,8 +16,10 @@ export const option: ILineOption & { dataset?: any } = { yField: 'value', seriesField: 'country', stack: true, + // 开启百分比 + percent: false, // 业务配置（后续会被转换为图表spec) - category: VChartLineConfig.category, + category: VChartLineConfig.category as ChatCategoryEnum.LINE, xAxis: { name: 'x轴', ...axisThemeJson, @@ -25,7 +27,7 @@ export const option: ILineOption & { dataset?: any } = { ...axisThemeJson.grid, visible: false } - }, + } as any, yAxis: { name: 'y轴', ...axisThemeJson, @@ -36,7 +38,7 @@ export const option: ILineOption & { dataset?: any } = { lineDash: [3, 3] } } - } + } as any } export default class Config extends PublicConfigClass implements CreateComponentType { diff --git a/src/packages/components/VChart/Lines/VChartLine/config.vue b/src/packages/components/VChart/Lines/VChartLine/config.vue index 9f15a51a..c6803bda 100644 --- a/src/packages/components/VChart/Lines/VChartLine/config.vue +++ b/src/packages/components/VChart/Lines/VChartLine/config.vue @@ -3,12 +3,26 @@ + + + + + 开启百分比堆叠 + + + + + + +