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

modify chart style

Browse Source
This commit is contained in:
MaysWind
2021-01-26 01:02:51 +08:00
parent 78cef7c4c5
commit 102e2de733
2 changed files with 167 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/mobile-main.js
+2 -1
View File
@@ -48,8 +48,9 @@ import 'line-awesome/dist/line-awesome/css/line-awesome.css';
import 'echarts/lib/chart/line'; import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie'; import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/bar';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title'; import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/tooltip';
import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js'; import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
src/views/mobile/statistics/Transaction.vue
+165 -37
View File
@@ -51,82 +51,152 @@ export default {
return this.$store.state.transactionStatisticsFilter; return this.$store.state.transactionStatisticsFilter;
}, },
chartData() { chartData() {
if (!this.$store.state.transactionStatistics || const self = this;
!this.$store.state.transactionStatistics.items ||
!this.$store.state.transactionStatistics.items.length) { if (!self.$store.state.transactionStatistics ||
return null; !self.$store.state.transactionStatistics.items ||
!self.$store.state.transactionStatistics.items.length) {
return self.skeletonChart();
} }
const combinedData = {}; const combinedData = {};
const data = []; const allData = [];
for (let i = 0; i < this.$store.state.transactionStatistics.items.length; i++) { for (let i = 0; i < self.$store.state.transactionStatistics.items.length; i++) {
const item = this.$store.state.transactionStatistics.items[i]; const item = self.$store.state.transactionStatistics.items[i];
if (!item.account || !item.category) { if (!item.account || !item.category) {
continue; continue;
} }
if (item.category.type !== this.$constants.category.allCategoryTypes.Expense) { if (item.category.type !== self.$constants.category.allCategoryTypes.Expense) {
continue; continue;
} }
if (this.query.chartLegendType === this.$constants.statistics.allChartLegendTypes.Account) { if (self.query.chartLegendType === self.$constants.statistics.allChartLegendTypes.Account) {
if (this.$utilities.isNumber(item.amountInDefaultCurrency)) { if (self.$utilities.isNumber(item.amountInDefaultCurrency)) {
let totalAmount = combinedData[item.account.name]; let data = combinedData[item.account.name];
if (totalAmount) { if (data) {
totalAmount += totalAmount = item.amountInDefaultCurrency; data.totalAmount += item.amountInDefaultCurrency;
} else { } else {
totalAmount = item.amountInDefaultCurrency; data = {
totalAmount: item.amountInDefaultCurrency,
color: item.account.color || self.$constants.colors.defaultAccountColor
}
} }
combinedData[item.account.name] = totalAmount; combinedData[item.account.name] = data;
} }
} else if (this.query.chartLegendType === this.$constants.statistics.allChartLegendTypes.SecondaryCategory) { } else if (self.query.chartLegendType === self.$constants.statistics.allChartLegendTypes.SecondaryCategory) {
if (this.$utilities.isNumber(item.amountInDefaultCurrency)) { if (self.$utilities.isNumber(item.amountInDefaultCurrency)) {
let totalAmount = combinedData[item.category.name]; let data = combinedData[item.category.name];
if (totalAmount) { if (data) {
totalAmount += totalAmount = item.amountInDefaultCurrency; data.totalAmount += item.amountInDefaultCurrency;
} else { } else {
totalAmount = item.amountInDefaultCurrency; data = {
totalAmount: item.amountInDefaultCurrency,
color: item.category.color || self.$constants.colors.defaultCategoryColor
}
} }
combinedData[item.category.name] = totalAmount; combinedData[item.category.name] = data;
} }
} }
} }
let chartType = 'pie';
if (this.query.chartType === this.$constants.statistics.allChartTypes.Bar) {
chartType = 'bar';
}
for (let legendName in combinedData) { for (let legendName in combinedData) {
if (!Object.prototype.hasOwnProperty.call(combinedData, legendName)) { if (!Object.prototype.hasOwnProperty.call(combinedData, legendName)) {
continue; continue;
} }
data.push({ const totalAmount = Math.floor(combinedData[legendName].totalAmount) / 100;
const data = {
name: legendName, name: legendName,
value: combinedData[legendName] / 100 value: totalAmount,
itemStyle: {
color: `#${combinedData[legendName].color}`
}
};
allData.push(data);
}
if (self.query.chartType === self.$constants.statistics.allChartTypes.Bar) {
allData.sort(function (data1, data2) {
return data1.value - data2.value;
}); });
} }
return { const chartData = {
label: {
show: true,
overflow: 'truncate',
align: 'left',
formatter: params => {
return `${params.name} ${self.$options.filters.currency(params.value * 100, self.defaultCurrency)}`;
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
series: [ series: [
{ {
type: chartType, data: allData,
data: data, }
],
animation: false
};
if (this.query.chartType === this.$constants.statistics.allChartTypes.Bar) {
return this.$utilities.copyObjectTo({
grid: {
left: 30,
top: 30,
right: 50,
bottom: 50
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
series: [{
type: 'bar'
}]
}, chartData);
} else {
return this.$utilities.copyObjectTo({
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
label: { label: {
position: 'inside' position: 'inside'
}, },
animation: false, emphasis: {
} itemStyle: {
] shadowBlur: 10,
}; shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}, chartData);
}
} }
}, },
created() { created() {
@@ -184,6 +254,64 @@ export default {
this.$store.dispatch('updateTransactionStatisticsFilter', { this.$store.dispatch('updateTransactionStatisticsFilter', {
chartType: chartType chartType: chartType
}); });
},
skeletonChart() {
const skeletonChartData = {
series: [{
data: [{
value: 20,
itemStyle: {
color: '#7c7c7f'
}
},{
value: 20,
itemStyle: {
color: '#a5a5aa'
}
},{
value: 60,
itemStyle: {
color: '#c5c5c9'
}
}]
}],
animation: false
};
if (this.query.chartType === this.$constants.statistics.allChartTypes.Bar) {
return this.$utilities.copyObjectTo({
grid: {
left: 30,
top: 30,
right: 50,
bottom: 50
},
xAxis: {
type: 'value',
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category'
},
series: [{
type: 'bar'
}]
}, skeletonChartData);
} else {
return this.$utilities.copyObjectTo({
series: [{
type: 'pie',
label: {
position: 'inside'
}
}]
}, skeletonChartData);
}
} }
}, },
filters: { filters: {