mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<template>
|
|
<!-- Echarts 全局设置 -->
|
|
<global-setting :optionData="optionData"></global-setting>
|
|
<CollapseItem name="饼图配置" :expanded="true">
|
|
<SettingItemBox name="类型">
|
|
<SettingItem>
|
|
<n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
|
|
</SettingItem>
|
|
</SettingItemBox>
|
|
<SettingItemBox name="标签">
|
|
<SettingItem>
|
|
<n-space>
|
|
<n-switch v-model:value="optionData.series[0].label.show" size="small"></n-switch>
|
|
<n-text>展示标签</n-text>
|
|
</n-space>
|
|
</SettingItem>
|
|
<setting-item>
|
|
<n-space>
|
|
<n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
|
|
<n-text>引导线</n-text>
|
|
</n-space>
|
|
</setting-item>
|
|
<SettingItem name="位置">
|
|
<n-select v-model:value="optionData.series[0].label.position" size="small" :options="labelConfig.position" />
|
|
</SettingItem>
|
|
<setting-item name="展示类型">
|
|
<n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
|
|
</setting-item>
|
|
</SettingItemBox>
|
|
<setting-item-box name="圆角">
|
|
<setting-item>
|
|
<n-space>
|
|
<n-input-number
|
|
v-model:value="optionData.series[0].itemStyle.borderRadius"
|
|
size="small"
|
|
:min="0"
|
|
></n-input-number>
|
|
<n-text>圆角大小</n-text>
|
|
</n-space>
|
|
</setting-item>
|
|
<setting-item>
|
|
<n-space>
|
|
<n-input-number
|
|
v-model:value="optionData.series[0].itemStyle.borderWidth"
|
|
size="small"
|
|
:min="0"
|
|
></n-input-number>
|
|
<n-text>线条宽度</n-text>
|
|
</n-space>
|
|
</setting-item>
|
|
</setting-item-box>
|
|
</CollapseItem>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType, watch } from 'vue'
|
|
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
|
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
|
import { PieTypeObject, PieTypeEnum } from './config'
|
|
import { labelConfig } from '@/packages/chartConfiguration/echarts'
|
|
|
|
const props = defineProps({
|
|
optionData: {
|
|
type: Object as PropType<GlobalThemeJsonType>,
|
|
required: true
|
|
}
|
|
})
|
|
const fontWeightOptions = [
|
|
{
|
|
label: PieTypeEnum.NORMAL,
|
|
value: PieTypeObject[PieTypeEnum.NORMAL]
|
|
},
|
|
{
|
|
label: PieTypeEnum.RING,
|
|
value: PieTypeObject[PieTypeEnum.RING]
|
|
},
|
|
{
|
|
label: PieTypeEnum.ROSE,
|
|
value: PieTypeObject[PieTypeEnum.ROSE]
|
|
}
|
|
]
|
|
|
|
const labelFormatterOptions = [
|
|
{ label: '数据名', value: '{b}' },
|
|
{ label: '百分比', value: '{d}' },
|
|
{ label: '列名:百分比', value: '{b}:{d}%' }
|
|
]
|
|
</script>
|