github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!172 环形饼图增加轨道宽度设置，并优化数字显示（如无小数位，则不强制显示小数位）

Browse Source 
Merge pull request !172 from dodu/dev-commet
This commit is contained in:
奔跑的面条 2023-06-15 11:52:47 +00:00 committed by Gitee
commit 1a14b2932c
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/packages/components/Charts/Pies/PieCircle/config.vue
View File

@ -7,6 +7,22 @@
</n-input-number> </n-input-number>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<!-- 中心标题 -->
<SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number
v-model:value="config.title.textStyle.fontSize"
:min="0"
:step="1"
size="small"
placeholder="字体大小"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
<!-- Echarts 全局设置 --> <!-- Echarts 全局设置 -->
<SettingItemBox name="进度条"> <SettingItemBox name="进度条">
<SettingItem name="颜色"> <SettingItem name="颜色">
@ -31,24 +47,8 @@
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<!-- 中心标题 -->
<SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
</SettingItem>
<SettingItem name="字体大小">
<n-input-number
v-model:value="config.title.textStyle.fontSize"
:min="0"
:step="1"
size="small"
placeholder="字体大小"
>
</n-input-number>
</SettingItem>
</SettingItemBox>
<!-- 其他样式 --> <!-- 其他样式 -->
<SettingItemBox name="轨道样式"> <SettingItemBox name="轨道">
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker> <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
</SettingItem> </SettingItem>
@ -69,6 +69,18 @@
v-model:value="item.data[1].itemStyle.shadowColor" v-model:value="item.data[1].itemStyle.shadowColor"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="轨道宽度">
<n-select
v-model:value="item.radius[0]"
size="small"
:options="[
{ label: '窄', value: '75%' },
{ label: '中', value: '60%' },
{ label: '宽', value: '45%' },
{ label: '更宽', value: '30%' }
]"
/>
</SettingItem>
</SettingItemBox> </SettingItemBox>
</CollapseItem> </CollapseItem>
</template> </template>

4
src/packages/components/Charts/Pies/PieCircle/index.vue
View File

@ -41,7 +41,7 @@ const option = reactive({
const dataHandle = (newData: any) => { const dataHandle = (newData: any) => {
const d = parseFloat(`${newData}`) * 100 const d = parseFloat(`${newData}`) * 100
let config = props.chartConfig.option let config = props.chartConfig.option
config.title.text = d.toFixed(2) + '%' config.title.text = `${+d.toFixed(2)}%`
config.series[0].data[0].value[0] = d config.series[0].data[0].value[0] = d
config.series[0].data[1].value[0] = 100 - d config.series[0].data[1].value[0] = 100 - d
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes) option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@ -68,7 +68,7 @@ watch(
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => { useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
let d = parseFloat(`${resData}`) * 100 let d = parseFloat(`${resData}`) * 100
// @ts-ignore // @ts-ignore
option.value.title.text = d.toFixed(2) + '%' option.value.title.text = `${+d.toFixed(2)}%`
// @ts-ignore // @ts-ignore
option.value.series[0].data[0].value[0] = d option.value.series[0].data[0].value[0] = d
// @ts-ignore // @ts-ignore