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

perf: 优化饼图展示

Browse Source
This commit is contained in:
奔跑的面条 2022-12-16 11:01:02 +08:00
parent 6aee7846d9
commit f62526c026
3 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/packages/chartConfiguration/echarts/index.ts
View File

@ -1,2 +1,3 @@
export * from './axis'
export * from './line'
export * from './line'
export * from './label'

7
src/packages/chartConfiguration/echarts/label.ts Normal file
View File

@ -0,0 +1,7 @@
export const labelConfig = {
position: [
{ label: '外侧', value: 'outside' },
{ label: '内部', value: 'inside' },
{ label: '中心', value: 'center' }
]
}

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

@ -14,41 +14,37 @@
<n-text>展示标签</n-text>
</n-space>
</SettingItem>
<SettingItem name="位置">
<n-select v-model:value="optionData.series[0].label.position" :options="[
{ label: '外侧', value: 'outside' },
{ label: '内部', value: 'inside' },
{ label: '中心', value: 'center' }
]" />
</SettingItem>
</SettingItemBox>
<setting-item-box name="标签数据">
<setting-item>
<n-select v-model:value="optionData.series[0].label.formatter" :options="[
{ label: '数据名', value: '{b}' },
{ label: '百分比', value: '{d}' },
{ label: '列名:百分比', value: '{b}:{d}%' },
]" />
</setting-item>
</setting-item-box>
<setting-item-box name="引导线">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
<n-text>展示引导线</n-text>
<n-text>引导线</n-text>
</n-space>
</setting-item>
</setting-item-box>
<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-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-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>
@ -61,6 +57,7 @@ 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: {
@ -82,4 +79,10 @@ const fontWeightOptions = [
value: PieTypeObject[PieTypeEnum.ROSE]
}
]
const labelFormatterOptions = [
{ label: '数据名', value: '{b}' },
{ label: '百分比', value: '{d}' },
{ label: '列名:百分比', value: '{b}:{d}%' }
]
</script>