Verified Commit 96222042 authored by jxtxzzw's avatar jxtxzzw
Browse files

优化:可选显示得分范围和说明



Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent b81e8327
Pipeline #723 passed with stages
in 12 minutes and 31 seconds
......@@ -2,8 +2,135 @@
import { chartHeight } from './incomeUtil'
function showRangeAndAnnotations(credit, checkAllGroupRange, chart) {
// 计算并绘制分界线
let minD = '9999-12-31'
let maxD = '0000-01-01'
for (const c of credit) {
if (c.date > maxD) {
maxD = c.date
}
if (c.date < minD) {
minD = c.date
}
}
if (checkAllGroupRange.includes('芝麻信用')) {
const score = [350, 550, 600, 650, 700]
const text = ['较差', '中等', '良好', '优秀', '极好']
for (let i = 0; i < 5; i++) {
chart.annotation().line({
top: true,
start: [minD, score[i]],
end: [maxD, score[i]],
style: {
stroke: '#1574F7',
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'start',
style: {
fill: '#1574F7',
fontSize: 12,
fontWeight: 300,
},
content: `芝麻信用 - ${text[i]}`,
offsetY: -5,
},
})
}
}
if (checkAllGroupRange.includes('微信支付分')) {
const score = [350, 550, 600, 650, 700]
const text = ['较差', '中等', '良好', '优秀', '极好']
for (let i = 0; i < 5; i++) {
chart.annotation().line({
top: true,
start: [minD, score[i]],
end: [maxD, score[i]],
style: {
stroke: '#1AAD19',
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'end',
style: {
fill: '#1AAD19',
fontSize: 12,
fontWeight: 300,
},
content: `微信支付分 - ${text[i]}`,
offsetY: -5,
},
})
}
}
if (checkAllGroupRange.includes('VantageScore 3.0')) {
const score = [300, 500, 601, 661, 781]
const text = ['Very Poor', 'Poor', 'Fair', 'Good', 'Excellent']
for (let i = 0; i < 5; i++) {
chart.annotation().line({
top: true,
start: [minD, score[i]],
end: [maxD, score[i]],
style: {
stroke: '#F15F22',
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'end',
style: {
fill: '#F15F22',
fontSize: 12,
fontWeight: 300,
},
content: `VantageScore 3.0 - ${text[i]}`,
offsetY: -5,
},
})
}
}
if (checkAllGroupRange.includes('FICO Score 8')) {
const score = [300, 580, 670, 740, 800]
const text = ['Poor', 'Fair', 'Good', 'Very Good', 'Exceptional']
for (let i = 0; i < 5; i++) {
chart.annotation().line({
top: true,
start: [minD, score[i]],
end: [maxD, score[i]],
style: {
stroke: '#00609C',
lineWidth: 1,
lineDash: [3, 3],
},
text: {
position: 'start',
style: {
fill: '#00609C',
fontSize: 12,
fontWeight: 300,
},
content: `FICO Score 8 - ${text[i]}`,
offsetY: -5,
},
})
}
}
}
export function renderChartForCredit(that, credit, checkboxes) {
const [checkAllGroupSource, checkAllGroupModel] = checkboxes
const [checkAllGroupSource, checkAllGroupModel, checkAllGroupRange] =
checkboxes
credit = credit.filter((e) => {
return (
......@@ -51,8 +178,6 @@ export function renderChartForCredit(that, credit, checkboxes) {
lineWidth: 1,
})
chart.legend(false)
// chart.removeInteraction('legend-filter') // 移除默认的 legend-filter 数据过滤交互
// chart.interaction('legend-visible-filter') // 使用分类图例的图形过滤
......@@ -69,6 +194,7 @@ export function renderChartForCredit(that, credit, checkboxes) {
},
})
// 调整画布范围
let chartMin = 1000
let chartMax = 0
......@@ -94,6 +220,12 @@ export function renderChartForCredit(that, credit, checkboxes) {
max: chartMax,
})
// Show Range And Annotations
showRangeAndAnnotations(credit, checkAllGroupRange, chart)
chart.legend(true) // 仍然需要图例来看不同的颜色
chart.removeInteraction('legend-filter') // 但是禁用交互
chart.render()
return chart
}
......@@ -1051,6 +1051,7 @@ export function renderChartForBalance(that, rawData) {
$tooltip.innerHTML = getTooltipHTML(e.data)
})
// 计算并绘制均值线
let minD = '9999-12-31'
let maxD = '0000-01-01'
let sum = 0
......
......@@ -259,6 +259,7 @@
},
"credit": {
"source": "Source",
"model": "Model"
"model": "Model",
"range": "Show Range and Annotations"
}
}
......@@ -259,6 +259,7 @@
},
"credit": {
"source": "数据源",
"model": "模型"
"model": "模型",
"range": "显示得分范围和说明"
}
}
......@@ -10,6 +10,11 @@
<CheckboxGroup v-model="checkAllGroupModel" @on-change="renderAllCharts">
<Checkbox v-for="m in uniqueModel" :key="m" :label="m"></Checkbox>
</CheckboxGroup>
<Divider size="small" class="ivu-m-0" />
<p>{{ $t('credit.range') }}</p>
<CheckboxGroup v-model="checkAllGroupRange" @on-change="renderAllCharts">
<Checkbox v-for="m in uniqueModel" :key="m" :label="m"></Checkbox>
</CheckboxGroup>
</Alert>
<div id="credit-score"></div>
</div>
......@@ -27,6 +32,7 @@ export default {
uniqueModel: [],
checkAllGroupSource: [],
checkAllGroupModel: [],
checkAllGroupRange: [],
oldChart: {
creditScore: undefined,
},
......@@ -54,6 +60,7 @@ export default {
})
this.checkAllGroupSource = [...this.uniqueSource]
this.checkAllGroupModel = [...this.uniqueModel]
this.checkAllGroupRange = []
},
renderAllCharts() {
if (this.oldChart.creditScore) {
......@@ -62,7 +69,11 @@ export default {
this.oldChart.creditScore = creditUtil.renderChartForCredit(
this,
credit,
[this.checkAllGroupSource, this.checkAllGroupModel]
[
this.checkAllGroupSource,
this.checkAllGroupModel,
this.checkAllGroupRange,
]
)
// 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