mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-20 01:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

modify pie chart text when no data

Browse Source
This commit is contained in:
MaysWind
2021-01-31 21:53:29 +08:00
parent 79dacba6d6
commit 4cbf956b91
3 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en.js
+1
View File
@@ -514,6 +514,7 @@ export default {
'Settings': 'Settings', 'Settings': 'Settings',
'Back': 'Back', 'Back': 'Back',
'Load More': 'Load More', 'Load More': 'Load More',
'No data': 'No data',
'Change Language': 'Change Language', 'Change Language': 'Change Language',
'Date is too early': 'Date is too early', 'Date is too early': 'Date is too early',
'Unlock': 'Unlock', 'Unlock': 'Unlock',
src/locales/zh_Hans.js
+1
View File
@@ -514,6 +514,7 @@ export default {
'Settings': '设置', 'Settings': '设置',
'Back': '返回', 'Back': '返回',
'Load More': '加载更多', 'Load More': '加载更多',
'No data': '没有数据',
'Change Language': '修改语言', 'Change Language': '修改语言',
'Date is too early': '日期过早', 'Date is too early': '日期过早',
'Unlock': '解锁', 'Unlock': '解锁',
src/views/mobile/statistics/Transaction.vue
+20 -7
View File
@@ -26,6 +26,7 @@
<pie-chart <pie-chart
:items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]" :items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
:show-center-text="true" :show-center-text="true"
class="statistics-pie-chart"
value-field="value" value-field="value"
color-field="color" color-field="color"
center-text-background="#cccccc" center-text-background="#cccccc"
@@ -35,16 +36,20 @@
:items="statisticsData.items" :items="statisticsData.items"
:min-valid-percent="0.0001" :min-valid-percent="0.0001"
:show-center-text="true" :show-center-text="true"
class="statistics-pie-chart"
name-field="name" name-field="name"
value-field="totalAmount" value-field="totalAmount"
color-field="color" color-field="color"
v-else-if="!loading" v-else-if="!loading"
> >
<text class="statistics-pie-chart-total-amount-title" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory">{{ $t('Total Expense') }}</text> <text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length && (query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory)">{{ $t('Total Expense') }}</text>
<text class="statistics-pie-chart-total-amount-title" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory">{{ $t('Total Income') }}</text> <text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length && (query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory)">{{ $t('Total Income') }}</text>
<text class="statistics-pie-chart-total-amount-value"> <text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length">
{{ statisticsData.totalAmount | currency(defaultCurrency) }} {{ statisticsData.totalAmount | currency(defaultCurrency) }}
</text> </text>
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length">
{{ $t('No data') }}
</text>
</pie-chart> </pie-chart>
</f7-card-content> </f7-card-content>
</f7-card> </f7-card>
@@ -609,9 +614,12 @@ export default {
</script> </script>
<style> <style>
.statistics-pie-chart-total-amount-title { .statistics-pie-chart .pie-chart-text-group {
fill: #f8f8f8; fill: #fff;
text-anchor: middle; text-anchor: middle;
}
.statistics-pie-chart-total-amount-title {
-moz-transform: translateY(0.35em); -moz-transform: translateY(0.35em);
-ms-transform: translateY(0.35em); -ms-transform: translateY(0.35em);
-webkit-transform: translateY(0.35em); -webkit-transform: translateY(0.35em);
@@ -619,14 +627,19 @@ export default {
} }
.statistics-pie-chart-total-amount-value { .statistics-pie-chart-total-amount-value {
fill: #fff;
text-anchor: middle;
-moz-transform: translateY(2em); -moz-transform: translateY(2em);
-ms-transform: translateY(2em); -ms-transform: translateY(2em);
-webkit-transform: translateY(2em); -webkit-transform: translateY(2em);
transform: translateY(2em); transform: translateY(2em);
} }
.statistics-pie-chart-total-no-data {
-moz-transform: translateY(1em);
-ms-transform: translateY(1em);
-webkit-transform: translateY(1em);
transform: translateY(1em);
}
.statistics-list-item-overview { .statistics-list-item-overview {
padding-top: 12px; padding-top: 12px;
margin-bottom: 6px; margin-bottom: 6px;