Verified Commit 686aafc3 authored by jxtxzzw's avatar jxtxzzw

Feature: Income Basic Category

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 5a856ebc
......@@ -25,7 +25,6 @@ function getDataForBasicYear(rawData) {
})
}
}
console.log(data)
return data
}
......@@ -99,3 +98,77 @@ export function renderChartForBasicYear(that, rawData) {
// Step 4: 渲染图表
chart.render()
}
function getDataForBasicCategory(rawData) {
const dict = {}
let total = 0
for (const x of rawData) {
const category = x.category
const amount = parseFloat(x.amount)
if (!(category in dict)) {
dict[category] = 0
}
if (amount > 0) {
dict[category] += amount
total += amount
}
}
const data = []
for (const category in dict) {
const amount = dict[category]
if (amount > 0) {
data.push({
category,
amount,
percent: amount / total,
})
}
}
return data
}
export function renderChartForBasicCategory(that, rawData) {
const { Chart } = that.$g2
const data = getDataForBasicCategory(rawData)
const chart = new Chart({
container: 'basic-category',
autoFit: true,
height: 500,
})
chart.coordinate('theta', {
radius: 0.75,
})
chart.data(data)
chart.scale('percent', {
formatter: (val) => {
val = val * 100 + '%'
return val
},
})
chart.tooltip({
showTitle: false,
showMarkers: false,
})
chart
.interval()
.position('percent')
.color('category')
.label('percent', {
content: (data) => {
return `${data.category}: ${data.percent * 100}%`
},
})
.adjust('stack')
chart.interaction('element-active')
chart.render()
}
......@@ -193,5 +193,9 @@
},
"life": {
"event": "Event"
},
"income": {
"basic-year": "Income for each year",
"basic-category": "Income for categories"
}
}
......@@ -193,5 +193,9 @@
},
"life": {
"event": "事件"
},
"income": {
"basic-year": "每年收入",
"basic-category": "收入类型"
}
}
<template>
<div>
<Divider>{{ $t('income.basic-year') }} </Divider>
<div id="basic-year"></div>
<div id="basic-type"></div>
<Divider>{{ $t('income.basic-category') }} </Divider>
<div id="basic-category"></div>
<div id="basic-accumulated"></div>
<div id="advanced-year"></div>
<div id="advanced-platform"></div>
......@@ -16,6 +18,7 @@ export default {
name: 'Income',
mounted() {
incomeUtil.renderChartForBasicYear(this, income)
incomeUtil.renderChartForBasicCategory(this, income)
// Chart 都是 autoFit 的,所以强制触发一次 resize 就可以了
window.dispatchEvent(new Event('resize'))
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment