Verified Commit 094b94f1 authored by jxtxzzw's avatar jxtxzzw
Browse files

优化:全新信用分页面



Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent be752a64
......@@ -38,6 +38,8 @@ export function renderChartForCredit(that, credit) {
lineWidth: 1,
})
chart.legend(false)
// chart.removeInteraction('legend-filter') // 移除默认的 legend-filter 数据过滤交互
// chart.interaction('legend-visible-filter') // 使用分类图例的图形过滤
......
......@@ -2,26 +2,31 @@
{
"date": "2022-01-01",
"source": "Experian",
"model": "FICO Score 8",
"score": "400"
},
{
"date": "2022-02-01",
"source": "Experian",
"model": "VantageScore 3.0",
"score": 500
},
{
"date": "2022-01-05",
"source": "芝麻信用",
"model": "芝麻信用",
"score": "400"
},
{
"date": "2022-02-01",
"source": "芝麻信用",
"model": "芝麻信用",
"score": "400"
},
{
"date": "2022-03-01",
"source": "微信支付分",
"model": "微信支付分",
"score": "600"
}
]
......@@ -256,5 +256,9 @@
"advanced-platform": "Advanced Income for Platforms",
"balance": "Balance",
"no-negative": "Negative amounts (e.g., tax, re-bill) are not included."
},
"credit": {
"source": "Source",
"model": "Model"
}
}
......@@ -256,5 +256,9 @@
"advanced-platform": "被动收入平台",
"balance": "可用资产",
"no-negative": "负数金额(例如税收、再分配)没有被统计。"
},
"credit": {
"source": "数据源",
"model": "模型"
}
}
<template>
<div>
<Alert>
<p>{{ $t('credit.source') }}</p>
<CheckboxGroup v-model="checkAllGroupSource" @on-change="renderAllCharts">
<Checkbox v-for="s in uniqueSource" :key="s" :label="s"></Checkbox>
</CheckboxGroup>
<Divider size="small" class="ivu-m-0" />
<p>{{ $t('credit.model') }}</p>
<CheckboxGroup v-model="checkAllGroupModel" @on-change="renderAllCharts">
<Checkbox v-for="m in uniqueModel" :key="m" :label="m"></Checkbox>
</CheckboxGroup>
</Alert>
<div id="credit-score"></div>
</div>
</template>
......@@ -12,22 +23,51 @@ export default {
name: 'Credit',
data() {
return {
uniqueSource: [],
uniqueModel: [],
checkAllGroupSource: [],
checkAllGroupModel: [],
oldChart: {
creditScore: undefined,
},
}
},
mounted() {
this.prepareData()
this.renderAllCharts()
},
methods: {
renderAllCharts(charts = ['credit-score']) {
if (charts.includes('credit-score')) {
this.oldChart.creditScore = creditUtil.renderChartForCredit(
this,
credit
)
prepareData() {
this.uniqueSource = credit
.map((e) => {
return e.source
})
.filter((value, index, self) => {
return self.indexOf(value) === index
})
this.uniqueModel = credit
.map((e) => {
return e.model
})
.filter((value, index, self) => {
return self.indexOf(value) === index
})
this.checkAllGroupSource = [...this.uniqueSource]
this.checkAllGroupModel = [...this.uniqueModel]
},
renderAllCharts() {
if (this.oldChart.creditScore) {
this.oldChart.creditScore.destroy()
}
this.oldChart.creditScore = creditUtil.renderChartForCredit(
this,
credit.filter((e) => {
return (
this.checkAllGroupSource.includes(e.source) &&
this.checkAllGroupModel.includes(e.model)
)
})
)
// Chart 都是 autoFit 的,所以强制触发一次 resize 就可以了
window.dispatchEvent(new Event('resize'))
},
......
Supports Markdown
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