chart-prediction-bar.vue
3.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<view class="chart-prediction-bar">
<f2 v-if="rendered" :init="onInitChart" :bindvalue="value"></f2>
</view>
</template>
<script>
export default {
name: 'chart-prediction-bar',
props: {
value: Object,
},
data() {
return {
rendered: true,
};
},
watch: {},
methods: {
onInitChart: (F2, config, ref) => {
const self = ref.$parent;
let predictResponseObj = self.value || {};
let predictResponse = predictResponseObj.predictResponse || {};
let systemConfirmPrice = predictResponseObj.systemConfirmPrice || '';
let marketPriceList = [
{ type: '预测价', value: predictResponse.predictPrice, name: 'market', per: predictResponse.paidMeanAcc },
{ type: '前1日\n\n市场价', value: predictResponse.paidMean1, name: 'market', per: predictResponse.paidMean1Acc },
{ type: '前3日\n\n市场价', value: predictResponse.paidMean3, name: 'market', per: predictResponse.paidMean3Acc },
{ type: '前7日\n\n市场价', value: predictResponse.paidMean7, name: 'market', per: predictResponse.paidMean7Acc },
{ type: '前14日\n\n市场价', value: predictResponse.paidMean14, name: 'market', per: predictResponse.paidMean14Acc },
{ type: '前30日\n\n市场价', value: predictResponse.paidMean30, name: 'market', per: predictResponse.paidMean30Acc },
{ type: '同行价', value: predictResponse.paidMeanN, name: 'market', per: predictResponse.paidMeanNAcc },
];
let otherConfig = {
autoFit: true,
padding: [20, 10, 60, 10],
};
const chart = new F2.Chart({ ...config, ...otherConfig });
chart.source(marketPriceList);
chart.legend(false);
chart.axis('value', {
label: null,
});
// 添加辅助文本
marketPriceList.forEach((item) => {
if (item.per && item.per.length >= 5) {
let list = item.per.split('');
let str1 = list[0] + list[1];
let str2 = list.slice(2).join('');
item.per = str1 + '\n' + str2;
}
chart.guide().text({
content: item.value,
position: [item.type, item.value],
style: {
textAlign: 'center',
},
offsetY: -15,
});
chart.guide().text({
content: item.per,
position: [item.type, item.value],
style: {
textAlign: 'center',
fill: '#fff',
},
offsetY: 15,
});
});
if (systemConfirmPrice) {
chart.guide().line({
start: ['min', systemConfirmPrice],
end: ['max', systemConfirmPrice],
style: {
stroke: '#FF2F17',
lineWidth: 2,
lineCap: 'round',
lineDash: [3, 3, 3],
},
});
chart.guide().text({
content: `${systemConfirmPrice} \n 定标价`,
position: [marketPriceList[marketPriceList.length - 1].type, systemConfirmPrice],
style: {
textAlign: 'center',
fill: '#FF2F17',
},
offsetY: 3,
});
}
chart
.interval()
.adjust('dodge', { marginRatio: 0.05 })
.position('type*value')
.color('name', function () {
return '#5088EB';
});
chart
.line()
.adjust('dodge', { marginRatio: 0.05 })
.position('type*value')
.color('name', function () {
return '#FFC260';
});
chart
.point()
.adjust('dodge', { marginRatio: 0.05 })
.position('type*value')
.color('name', function () {
return '#FFC260';
});
chart.render();
return chart;
},
},
};
</script>
<style lang="scss" scoped>
.chart-prediction-bar {
width: 100%;
height: 570rpx;
display: inline-block;
}
</style>