Feature: Income Basic

Signed-off-by: jxtxzzw <jxtxzzw@126.com>

assets/data-sample/income.json

+[
+  {
+    "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": "科研津贴"
+  }
+]

assets/incomeUtil.js

+// 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()
+}

assets/reader.js

@@ -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')

pages/income.vue

+<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>