mirror of
https://gitee.com/dromara/go-view.git
synced 2026-05-30 00:00:05 +08:00
Merge branch 'dev' into master-fetch-dev
This commit is contained in:
@@ -1 +1,3 @@
|
||||
export * from './legends'
|
||||
export * from './legends'
|
||||
export * from './label'
|
||||
export * from './style'
|
||||
@@ -0,0 +1,120 @@
|
||||
export const labelConfig = {
|
||||
position: [
|
||||
{
|
||||
label: '外部',
|
||||
value: 'outside'
|
||||
},
|
||||
{
|
||||
label: '内部',
|
||||
value: 'inside'
|
||||
},
|
||||
{
|
||||
label: '内部-外',
|
||||
value: 'inside-outer'
|
||||
},
|
||||
{
|
||||
label: '内部-里',
|
||||
value: 'inside-inner'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
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'
|
||||
}
|
||||
],
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -124,7 +124,14 @@ const calcData = (data: any, type?: string) => {
|
||||
const calcCapsuleLengthAndLabelData = (dataset: any) => {
|
||||
try {
|
||||
const { source } = dataset
|
||||
if (!source || !source.length) return
|
||||
if (!source) return
|
||||
|
||||
if (source.length === 0) {
|
||||
// 清空数据
|
||||
state.capsuleLength = []
|
||||
state.labelData = []
|
||||
return
|
||||
}
|
||||
|
||||
state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
|
||||
const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
|
||||
@@ -140,9 +147,8 @@ const calcCapsuleLengthAndLabelData = (dataset: any) => {
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
|
||||
state.labelData = labelData
|
||||
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,9 +23,9 @@ import config, { includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@@ -61,7 +61,7 @@ watch(
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
seriesArr.push(cloneDeep(seriesItem))
|
||||
}
|
||||
replaceMergeArr.value = ['series']
|
||||
props.chartConfig.option.series = seriesArr
|
||||
|
||||
@@ -61,7 +61,7 @@ const option = {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
:options="labelConfig.fontWeight"
|
||||
/>
|
||||
</SettingItem>
|
||||
<setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
|
||||
<setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth > -1">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].label.textBorderWidth"
|
||||
size="small"
|
||||
@@ -81,7 +81,7 @@
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="圆角">
|
||||
<setting-item-box name="分段样式">
|
||||
<setting-item name="圆角大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].itemStyle.borderRadius"
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -3,11 +3,15 @@
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<Axis :axis="optionData.xAxis"></Axis>
|
||||
<Axis :axis="optionData.yAxis"></Axis>
|
||||
<!-- 标签 -->
|
||||
<Label :optionData="optionData"></Label>
|
||||
<!-- 柱体 -->
|
||||
<Bar :optionData="optionData"></Bar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||
import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
|
||||
defineProps({
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -6,8 +6,16 @@ import data from './data.json'
|
||||
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||
import { ChatCategoryEnum, IBarOption } from '../../index.d'
|
||||
import { merge, cloneDeep } from 'lodash'
|
||||
import { vChartGlobalThemeJson } from '@/settings/vchartThemes'
|
||||
|
||||
export const includes = ['legends', 'tooltip']
|
||||
const barConfig = merge(cloneDeep(vChartGlobalThemeJson.bar), {
|
||||
style: {
|
||||
height: 10
|
||||
}
|
||||
})
|
||||
delete (barConfig.style as { width?: any }).width
|
||||
|
||||
export const includes = ['legends', 'tooltip', 'label']
|
||||
export const option: IBarOption & { dataset?: any } = {
|
||||
// 图表配置
|
||||
type: 'bar',
|
||||
@@ -50,6 +58,9 @@ export const option: IBarOption & { dataset?: any } = {
|
||||
...axisThemeJson.grid.style
|
||||
}
|
||||
}
|
||||
},
|
||||
bar: {
|
||||
...barConfig
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,11 +3,15 @@
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<Axis :axis="optionData.xAxis"></Axis>
|
||||
<Axis :axis="optionData.yAxis"></Axis>
|
||||
<!-- 标签 -->
|
||||
<Label :optionData="optionData"></Label>
|
||||
<!-- 柱体 -->
|
||||
<Bar :optionData="optionData"></Bar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||
import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
|
||||
defineProps({
|
||||
|
||||
@@ -5,7 +5,7 @@ export const VChartBarCrossrangeConfig: ConfigType = {
|
||||
key: 'VChartBarCrossrange',
|
||||
chartKey: 'VVChartBarCrossrange',
|
||||
conKey: 'VCVChartBarCrossrange',
|
||||
title: 'VChart并列柱状图',
|
||||
title: '并列柱状图-VChart',
|
||||
category: ChatCategoryEnum.BAR,
|
||||
categoryName: ChatCategoryEnumName.BAR,
|
||||
package: PackagesCategoryEnum.VCHART,
|
||||
|
||||
@@ -6,8 +6,15 @@ import data from './data.json'
|
||||
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
|
||||
import { ChatCategoryEnum, IBarOption } from '../../index.d'
|
||||
import { merge, cloneDeep } from 'lodash'
|
||||
import { vChartGlobalThemeJson } from '@/settings/vchartThemes'
|
||||
|
||||
export const includes = ['legends', 'tooltip']
|
||||
const barConfig = merge(cloneDeep(vChartGlobalThemeJson.bar), {
|
||||
style: {
|
||||
width: 15
|
||||
}
|
||||
})
|
||||
|
||||
export const includes = ['legends', 'tooltip', 'label']
|
||||
export const option: IBarOption & { dataset?: any } = {
|
||||
// 图表配置
|
||||
type: 'bar',
|
||||
@@ -16,6 +23,8 @@ export const option: IBarOption & { dataset?: any } = {
|
||||
yField: ['value'],
|
||||
seriesField: 'year',
|
||||
stack: true,
|
||||
// 开启百分比
|
||||
percent: false,
|
||||
// 业务配置(后续会被转换为图表spec)
|
||||
category: VChartBarStackConfig.category as ChatCategoryEnum.BAR,
|
||||
xAxis: {
|
||||
@@ -49,6 +58,9 @@ export const option: IBarOption & { dataset?: any } = {
|
||||
...axisThemeJson.grid.style
|
||||
}
|
||||
}
|
||||
},
|
||||
bar: {
|
||||
...barConfig
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,12 +3,26 @@
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<Axis :axis="optionData.xAxis"></Axis>
|
||||
<Axis :axis="optionData.yAxis"></Axis>
|
||||
<!-- 标签 -->
|
||||
<Label :optionData="optionData"></Label>
|
||||
<!-- 柱体 -->
|
||||
<Bar :optionData="optionData"></Bar>
|
||||
<!-- 开启百分比 -->
|
||||
<CollapseItem name="百分比堆叠">
|
||||
<SettingItemBox name="配置" alone>
|
||||
<n-space>
|
||||
<span>开启百分比堆叠</span>
|
||||
<n-switch v-model:value="optionData.percent" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||
import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -5,7 +5,7 @@ export const VChartFunnelConfig: ConfigType = {
|
||||
key: 'VChartFunnel',
|
||||
chartKey: 'VVChartFunnel',
|
||||
conKey: 'VCVChartFunnel',
|
||||
title: 'VChart漏斗图',
|
||||
title: '漏斗图-VChart',
|
||||
category: ChatCategoryEnum.FUNNEL,
|
||||
categoryName: ChatCategoryEnumName.FUNNEL,
|
||||
package: PackagesCategoryEnum.VCHART,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -3,12 +3,26 @@
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<Axis :axis="optionData.xAxis"></Axis>
|
||||
<Axis :axis="optionData.yAxis"></Axis>
|
||||
<!-- 开启百分比 -->
|
||||
<CollapseItem name="百分比堆叠">
|
||||
<SettingItemBox name="配置" alone>
|
||||
<n-space>
|
||||
<span>开启百分比堆叠</span>
|
||||
<n-switch v-model:value="optionData.percent" size="small"></n-switch>
|
||||
</n-space>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<Line :optionData="optionData"></Line>
|
||||
<Label :optionData="optionData" :positionOptions="labelConfig.linePosition"></Label>
|
||||
<Point :optionData="optionData"></Point>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
|
||||
import { VChartGlobalSetting, Axis, Label, Line, Point } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||
|
||||
defineProps({
|
||||
optionData: {
|
||||
|
||||
@@ -5,7 +5,7 @@ export const VChartLineConfig: ConfigType = {
|
||||
key: 'VChartLine',
|
||||
chartKey: 'VVChartLine',
|
||||
conKey: 'VCVChartLine',
|
||||
title: 'VChart折线图',
|
||||
title: '折线图-VChart',
|
||||
category: ChatCategoryEnum.LINE,
|
||||
categoryName: ChatCategoryEnumName.LINE,
|
||||
package: PackagesCategoryEnum.VCHART,
|
||||
|
||||
@@ -4,7 +4,9 @@ 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'
|
||||
import type { ChatCategoryEnum, IPieOption } from '../../index.d'
|
||||
|
||||
const OUTER_RADIUS = 0.75
|
||||
|
||||
export const includes = ['legends', 'tooltip']
|
||||
export const option: IPieOption & { dataset?: any } = {
|
||||
@@ -14,8 +16,57 @@ export const option: IPieOption & { dataset?: any } = {
|
||||
categoryField: 'year',
|
||||
valueField: 'value',
|
||||
seriesField: 'year',
|
||||
// 中心
|
||||
centerX: '50%',
|
||||
centerY: '50%',
|
||||
innerRadius: 0.68,
|
||||
outerRadius: OUTER_RADIUS,
|
||||
label: {
|
||||
visible: true,
|
||||
position: 'outside',
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#B9B8CE',
|
||||
fontFamily: 'SimSun',
|
||||
fontWeight: 'normal',
|
||||
angle: 0
|
||||
},
|
||||
line: {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
pie: {
|
||||
style: {
|
||||
// 圆角
|
||||
cornerRadius: 50,
|
||||
// 描边宽度
|
||||
outerBorder: {
|
||||
// 透明度
|
||||
strokeOpacity: 1,
|
||||
// 外描边距离
|
||||
distance: 0,
|
||||
// 宽度
|
||||
lineWidth: 0,
|
||||
// 颜色
|
||||
stroke: '#ffffff'
|
||||
},
|
||||
// 纹理
|
||||
texture: ''
|
||||
},
|
||||
state: {
|
||||
hover: {
|
||||
outerRadius: 0.85
|
||||
},
|
||||
selected: {
|
||||
outerRadius: 0.85
|
||||
}
|
||||
}
|
||||
},
|
||||
// 业务配置(后续会被转换为图表spec)
|
||||
category: VChartPieConfig.category,
|
||||
category: VChartPieConfig.category as ChatCategoryEnum.PIE,
|
||||
extensionMark: [],
|
||||
// 动画
|
||||
animationNormal: {}
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
|
||||
@@ -1,17 +1,164 @@
|
||||
<template>
|
||||
<!-- vCharts 全局设置 -->
|
||||
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
|
||||
<!-- 饼图配制 -->
|
||||
<CollapseItem name="饼图" expanded>
|
||||
<!-- <SettingItemBox name="动画">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="animationRef" size="small" @update:value="animationHandle"></n-switch>
|
||||
<n-text>开启动画</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItemBox> -->
|
||||
<SettingItemBox name="图形">
|
||||
<setting-item name="内圈范围">
|
||||
<n-input-number v-model:value="optionData.innerRadius" :step="0.1" :min="0" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="外圈范围">
|
||||
<n-input-number v-model:value="optionData.outerRadius" :step="0.1" :min="0" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="中心轴X">
|
||||
<n-input v-model:value="optionData.centerX" :step="1" :min="0" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="中心轴Y">
|
||||
<n-input v-model:value="optionData.centerY" :step="1" :min="0" size="small"></n-input>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标签" v-if="optionData.label">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.label.visible" size="small"></n-switch>
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.label.line.visible" size="small"></n-switch>
|
||||
<n-text>引导线</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="位置">
|
||||
<n-select v-model:value="optionData.label.position" :options="labelConfig.position" size="small" />
|
||||
</SettingItem>
|
||||
<FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="分段样式">
|
||||
<setting-item name="纹理类型">
|
||||
<n-select v-model:value="optionData.pie.style.texture" :options="styleConfig.texture" size="small"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="圆角大小">
|
||||
<n-input-number v-model:value="optionData.pie.style.cornerRadius" size="small" :min="0"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="描边宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.pie.style.outerBorder.lineWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker v-model:value="optionData.pie.style.outerBorder.stroke" size="small" />
|
||||
</setting-item>
|
||||
<setting-item name="外描边距离">
|
||||
<n-input-number
|
||||
v-model:value="optionData.pie.style.outerBorder.distance"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="描边透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.pie.style.outerBorder.strokeOpacity"
|
||||
:step="0.1"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="内环形">
|
||||
<setting-item name="可见性">
|
||||
<n-space>
|
||||
<n-switch v-model:value="extensionMarkRef" size="small" @update:value="markerHandle"></n-switch>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { PropType, ref, toRefs } from 'vue'
|
||||
import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
|
||||
import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import FontStyle from '@/components/Pages/VChartItemSetting/common/FontStyle.vue'
|
||||
import type { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { labelConfig, styleConfig } from '@/packages/chartConfiguration/vcharts/index'
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<vChartGlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const animationRef = ref(props.optionData.animationNormal && Object.keys(props.optionData.animationNormal)?.length > 0)
|
||||
const extensionMarkRef = ref(!!props.optionData?.extensionMark)
|
||||
|
||||
const markerHandle = (value: boolean) => {
|
||||
if (value) {
|
||||
props.optionData.extensionMark = []
|
||||
} else {
|
||||
delete props.optionData.extensionMark
|
||||
}
|
||||
}
|
||||
|
||||
const animationHandle = (value: boolean) => {
|
||||
if (value) {
|
||||
props.optionData.animationNormal = {
|
||||
pie: [
|
||||
{
|
||||
loop: true,
|
||||
startTime: 800,
|
||||
oneByOne: true,
|
||||
timeSlices: [
|
||||
{
|
||||
effects: {
|
||||
channel: {
|
||||
outerRadius: {
|
||||
to: props.optionData.outerRadius * 100 + 10
|
||||
}
|
||||
},
|
||||
easing: 'linear'
|
||||
},
|
||||
duration: 500
|
||||
},
|
||||
{
|
||||
effects: {
|
||||
channel: {
|
||||
outerRadius: {
|
||||
to: props.optionData.outerRadius * 100 + 10
|
||||
}
|
||||
},
|
||||
easing: 'linear'
|
||||
},
|
||||
duration: 500
|
||||
},
|
||||
{
|
||||
effects: {
|
||||
channel: {
|
||||
outerRadius: {
|
||||
to: props.optionData.outerRadius * 100
|
||||
}
|
||||
}
|
||||
},
|
||||
duration: 500
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
props.optionData.animationNormal = {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
+1
-1
@@ -56,7 +56,7 @@ export interface IAreaOption extends Omit<IAreaChartSpec, 'axes'> {
|
||||
}
|
||||
|
||||
export interface IPieOption extends IPieChartSpec {
|
||||
category: ChatCategoryEnum.PIE
|
||||
category?: ChatCategoryEnum.PIE
|
||||
type: 'pie'
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user