test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-01 19:28:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 优化饼图标签模糊的问题

Browse Source
This commit is contained in:
奔跑的面条 2024-08-06 21:07:40 +08:00
parent ef912f91b2
commit 2201c09219
3 changed files with 82 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/packages/chartConfiguration/echarts/label.ts
View File

@ -3,5 +3,11 @@ export const labelConfig = {
{ label: '外侧', value: 'outside' },
{ label: '内部', value: 'inside' },
{ label: '中心', value: 'center' }
],
fontWeight: [
{ label: '正常', value: 'normal' },
{ label: '普通加粗', value: 'bold' },
{ label: '加粗', value: 'bolder' },
{ label: '细体', value: 'lighter' }
]
}

6
src/packages/components/Charts/Pies/PieCommon/config.ts
View File

@ -52,7 +52,11 @@ const option = {
show: false,
position: 'center',
formatter: '{b}',
fontSize:12
fontWeight: 'normal',
fontSize: 14,
color: '#454E54',
textBorderColor: '#ffffff',
textBorderWidth: 1
},
emphasis: {
label: {

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

@ -18,6 +18,20 @@
<n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="图形">
<setting-item name="内圈范围">
<n-input v-model:value="optionData.series[0].radius[0]" size="small"></n-input>
</setting-item>
<setting-item name="外圈范围">
<n-input v-model:value="optionData.series[0].radius[1]" size="small"></n-input>
</setting-item>
<setting-item name="X轴中心">
<n-input v-model:value="optionData.series[0].center[0]" size="small"></n-input>
</setting-item>
<setting-item name="Y轴中心">
<n-input v-model:value="optionData.series[0].center[1]" size="small"></n-input>
</setting-item>
</SettingItemBox>
<SettingItemBox name="标签">
<SettingItem>
<n-space>
@ -38,28 +52,67 @@
<n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
</setting-item>
</SettingItemBox>
<setting-item-box name="字体">
<setting-item name="大小">
<n-input-number v-model:value="optionData.series[0].label.fontSize" size="small" :min="0"></n-input-number>
</setting-item>
<setting-item name="颜色" v-if="optionData.series[0].label.color">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.series[0].label.color"></n-color-picker>
</setting-item>
<SettingItem name="文字加粗" v-if="optionData.series[0].label.fontWeight">
<n-select
v-model:value="optionData.series[0].label.fontWeight"
size="small"
:options="labelConfig.fontWeight"
/>
</SettingItem>
<setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
<n-input-number
v-model:value="optionData.series[0].label.textBorderWidth"
size="small"
:min="0"
></n-input-number>
</setting-item>
<setting-item name="文字边框色" v-if="optionData.series[0].label.textBorderColor">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.series[0].label.textBorderColor"
></n-color-picker>
</setting-item>
</setting-item-box>
<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 name="圆角大小">
<n-input-number
v-model:value="optionData.series[0].itemStyle.borderRadius"
size="small"
:min="0"
></n-input-number>
</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 name="线条宽度">
<n-input-number
v-model:value="optionData.series[0].itemStyle.borderWidth"
size="small"
:min="0"
></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="鼠标聚焦">
<setting-item name="文字大小">
<n-input-number
v-model:value="optionData.series[0].emphasis.label.fontSize"
size="small"
:min="0"
></n-input-number>
</setting-item>
<SettingItem name="文字加粗" v-if="optionData.series[0].emphasis.label.fontWeight">
<n-select
v-model:value="optionData.series[0].emphasis.label.fontWeight"
size="small"
:options="labelConfig.fontWeight"
/>
</SettingItem>
</setting-item-box>
</CollapseItem>
</template>