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' }