Verified Commit 5a856ebc authored by jxtxzzw's avatar jxtxzzw

Feature: Income Basic

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent 17278d3e
[
{
"id": "1",
"year": "2019",
"amount": "30",
"type": "酬金",
"category": "科研津贴"
},
{
"id": "2",
"year": "2019",
"amount": "20",
"type": "酬金",
"category": "项目津贴"
},
{
"id": "3",
"year": "2019",
"amount": "-30",
"type": "税务",
"category": "税务"
},
{
"id": "4",
"year": "2020",
"amount": "30",
"type": "酬金",
"category": "科研津贴"
},
{
"id": "5",
"year": "2020",
"amount": "30",
"type": "酬金2",
"category": "科研津贴"
}
]
// nuxt 下不能用 import 引入整个依赖,只能用 plugin 的方式引入
function getDataForBasicYear(rawData) {
const dict = {}
for (const x of rawData) {
const year = x.year
const amount = parseFloat(x.amount)
const type = x.type
if (!(year in dict)) {
dict[year] = {}
}
if (!(type in dict[year])) {
dict[year][type] = 0
}
dict[year][type] += amount
}
const data = []
for (const year in dict) {
for (const type in dict[year]) {
data.push({
year,
type,
amount: dict[year][type],
})
}
}
console.log(data)
return data
}
export function renderChartForBasicYear(that, rawData) {
const { Chart } = that.$g2
const data = getDataForBasicYear(rawData)
// Step 1: 创建 Chart 对象
const chart = new Chart({
container: 'basic-year',
autoFit: true,
height: 500,
})
// Step 2: 载入数据源
chart.data(data)
// Step 3: 创建图形语法,绘制柱状图
chart.scale('amount', {
alias: '金额(元)',
})
chart.axis('year', {
tickLine: null,
})
chart.axis('amount', {
title: {
offset: 80,
style: {
fill: '#aaaaaa',
},
},
})
chart.legend()
chart.tooltip({
shared: true,
showMarkers: false,
})
chart.interaction('active-region')
chart
.interval()
.adjust('stack')
.position('year*amount')
.color('type', [
'#FF6B3B',
'#5B8FF9',
'#FFC100',
'#61DDAA',
'#76523B',
'#0E8E89',
'#E19348',
'#F383A2',
'#247FEA',
])
.label('value', () => {
return {
position: 'middle',
offset: 0,
content: (originData) => {
return originData.amount
},
style: {
stroke: '#fff',
},
}
})
// Step 4: 渲染图表
chart.render()
}
......@@ -34,3 +34,4 @@ export const introduction = require('./data/introduction.json')
export const food = require('./data/food.json')
export const footprint = require('./data/footprint.json')
export const exam = require('./data/exam.json')
export const income = require('./data/income.json')
<template>
<div>
<div id="basic-year"></div>
<div id="basic-type"></div>
<div id="basic-accumulated"></div>
<div id="advanced-year"></div>
<div id="advanced-platform"></div>
<div id="advanced-accumulated"></div>
</div>
</template>
<script>
import * as incomeUtil from 'assets/incomeUtil'
import { income } from 'assets/reader'
export default {
name: 'Income',
mounted() {
incomeUtil.renderChartForBasicYear(this, income)
// Chart 都是 autoFit 的,所以强制触发一次 resize 就可以了
window.dispatchEvent(new Event('resize'))
},
}
</script>
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