blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-08-06 22:11:16 +08:00
Code Issues Projects Releases Wiki Activity

feat: 新增饼图配置项

Browse Source
This commit is contained in:
奔跑的面条 2025-06-16 12:55:46 +08:00
parent cfb2a667bd
commit 9fa0ee630e
4 changed files with 135 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pages/VChartItemSetting/common/FontStyle.vue
View File

@ -20,7 +20,7 @@
<n-input-number v-model:value="style.dy.value" size="small" />
</setting-item>
<setting-item v-if="style?.angle" name="旋转">
<n-input-number v-model:value="style.angle.value" :min="0" :max="360" size="small" />
<n-input-number v-model:value="style.angle.value" :step="0.1" :min="0" :max="360" size="small" />
</setting-item>
</template>
</template>

2
src/packages/components/Charts/Pies/PieCommon/config.vue
View File

@ -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"

37
src/packages/components/VChart/Pies/VChartPie/config.ts
View File

@ -5,7 +5,8 @@ import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
import data from './data.json'
import cloneDeep from 'lodash/cloneDeep'
import type { ChatCategoryEnum, IPieOption } from '../../index.d'
import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
const OUTER_RADIUS = 0.75
export const includes = ['legends', 'tooltip']
export const option: IPieOption & { dataset?: any } = {
@ -19,7 +20,7 @@ export const option: IPieOption & { dataset?: any } = {
centerX: '50%',
centerY: '50%',
innerRadius: 0.68,
outerRadius: 0.75,
outerRadius: OUTER_RADIUS,
label: {
visible: true,
position: 'outside',
@ -29,11 +30,41 @@ export const option: IPieOption & { dataset?: any } = {
fontFamily: 'SimSun',
fontWeight: 'normal',
angle: 0
},
line: {
visible: true
}
},
pie: {
style: {
// 圆角
cornerRadius: 50,
// 描边宽度
outerBorder: {
// 透明度
strokeOpacity: 1,
// 外描边距离
distance: 0,
// 宽度
lineWidth: 0,
// 颜色
stroke: '#ffffff'
}
},
state: {
hover: {
outerRadius: 0.85
},
selected: {
outerRadius: 0.85
}
}
},
// 业务配置（后续会被转换为图表spec)
category: VChartPieConfig.category as ChatCategoryEnum.PIE,
extensionMark: []
extensionMark: [],
// 动画
animationNormal: {}
}
export default class Config extends PublicConfigClass implements CreateComponentType {

105
src/packages/components/VChart/Pies/VChartPie/config.vue
View File

@ -2,7 +2,15 @@
<!-- vCharts 全局设置 -->
<VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
<!-- 饼图配制 -->
<collapse-item name="饼图" expanded>
<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>
@ -24,19 +32,55 @@
<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>
<setting-item-box name="内环形">
<SettingItemBox name="分段样式">
<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>
</setting-item-box>
</collapse-item>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
@ -54,8 +98,7 @@ const props = defineProps({
}
})
const a = toRefs(props.optionData.label.style)
const animationRef = ref(props.optionData.animationNormal && Object.keys(props.optionData.animationNormal)?.length > 0)
const extensionMarkRef = ref(!!props.optionData?.extensionMark)
const markerHandle = (value: boolean) => {
@ -65,4 +108,54 @@ const markerHandle = (value: boolean) => {
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 + 0.1
}
},
easing: 'linear'
},
duration: 500
},
{
effects: {
channel: {
outerRadius: {
to: props.optionData.outerRadius * 100 + 0.1
}
},
easing: 'linear'
},
duration: 500
},
{
effects: {
channel: {
outerRadius: {
to: props.optionData.outerRadius * 100
}
}
},
duration: 500
}
]
}
]
}
} else {
props.optionData.animationNormal = {}
}
}
</script>