Skip to content

S
sfp-program
Commit ac914dee by kyle
Options

图表调整

parent fb2a816d
Showing with 109 additions and 54 deletions
common/common.ts
......@@ -34,5 +34,23 @@ export default {
}
}
});
},
// 小数处理
/*
num:源数据
digitNum:保留几位小数
type:向上(1)取还是向下(2)取
*/
formatFloat(num,digitNum=2,type=1){
if(num){
if(type===1){
return Math.ceil(num.toFixed(digitNum) * Math.pow(10,digitNum)) / Math.pow(10,digitNum);
}else{
return Math.floor(num.toFixed(digitNum) * Math.pow(10,digitNum)) / Math.pow(10,digitNum)
}
}
}
}
\ No newline at end of file
pages/housePurchase/housePurchase.vue
......@@ -150,6 +150,16 @@
测算结果及建议
</view>
</view>
<view class="chartsLegend">
<radio-group @change="radioChange" style="display: flex;width: 100%;justify-content: space-evenly;">
<label v-for="(item, index) in chartsLegends" :key="item.value" style="display: flex;">
<view style="display: flex;">
<radio :value="item.value" :checked="index === chartsLegendsCurrent" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view>
<view id="myEcharts" style="height: 430rpx;"></view>
<view style="text-align: center;color: #c3c1c1;font-size: 22rpx;">
差额 = 可实现的 - 你想要的
......@@ -157,11 +167,14 @@
<view style="background: rgba(36,255,0,3%);padding: 6rpx 10rpx;border-radius: 12rpx;line-height: 1.5;">
<view v-show="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;">
<text class="seriesNo">1</text>
<view>如您想实现<strong>{{resultInfos.nyear}}</strong>年后在<strong>{{resultInfos.provinceName}}-{{resultInfos.cityName}}</strong>地区购买<strong>{{resultInfos.preOrderSize}}</strong>㎡的房产，那么您还需要提高首付款到<strong>{{(resultInfos.pvDownPayment/10000).toFixed(2)}}</strong>万元，或您需提高年末预备投入房产资金到<strong>{{(resultInfos.houseSpecialPurpose/10000).toFixed(2)}}</strong>万元。 </view>
<view>如您想实现<strong>{{resultInfos.nyear}}</strong>年后在<strong>{{resultInfos.provinceName}}-{{resultInfos.cityName}}</strong>地区购买
<strong>{{resultInfos.preOrderSize}}</strong>㎡的房产，那么您还需要提高首付款到
<strong>{{formatFloat(resultInfos.pvDownPayment/10000,2,1)}}</strong>万元，或您需提高年末预备投入房产资金到
<strong>{{formatFloat(resultInfos.houseSpecialPurpose/10000)}}</strong>万元。 </view>
</view>
<view style="margin-top: 10rpx;display: flex;">
<text class="seriesNo">{{resultInfos.code == 'A001' || resultInfos.code =='A002'?'2':'1'}}</text>
<view>根据您的已备首付款和预备投入房产资金测算，您在<strong>{{resultInfos.nyear}}</strong>年后最高可实现购买房屋单价为<strong>{{(tipsPrice/10000).toFixed(2)}}</strong>万元/㎡，总价为<strong>{{(tipsTotalPrice/10000).toFixed(2)}}</strong>万元的房产。</view>
<view>根据您的已备首付款和预备投入房产资金测算，您在<strong>{{resultInfos.nyear}}</strong>年后最高可实现购买房屋单价为<strong>{{formatFloat(tipsPrice/10000)}}</strong>万元/㎡，总价为<strong>{{formatFloat(tipsTotalPrice/10000)}}</strong>万元的房产。</view>
</view>
</view>
......@@ -174,7 +187,7 @@
<view class="content">
<view class="left">
<view class="realizable">可实现的</view>
<view>{{housePurchaseInfo.nyear}}年后：{{(houseItem.fvPriceRealization/10000).toFixed(2)}}万元</view>
<view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceRealization/10000)}}万元</view>
<!-- <view class="now">
现值：{{numberConverter(houseItem.pvPriceRealization)}}元
</view> -->
......@@ -182,7 +195,7 @@
<img src="../../static/images/vs.png" alt="">
<view class="right">
<view class="realizable">你想要的</view>
<view>{{housePurchaseInfo.nyear}}年后：{{(houseItem.fvPriceDesired/10000).toFixed(2)}}万元</view>
<view>{{housePurchaseInfo.nyear}}年后：{{formatFloat(houseItem.fvPriceDesired/10000)}}万元</view>
<!-- <view class="now">
现值：{{numberConverter(houseItem.pvPriceDesired)}}元
</view> -->
......@@ -191,13 +204,13 @@
<view class="line_bottom" v-show="houseItem.fvDifference <= 0">
<strong style="font-size: 36rpx;">恭喜您!</strong>
<text>经过测算，</text>
<text v-if="houseItem.fvDifference < 0">您的{{getResultTitle(houseItem.priceType)}}已超出目标值{{Math.abs((houseItem.fvPriceRealization/10000).toFixed(2)-(houseItem.fvPriceDesired/10000).toFixed(2)).toFixed(2)}}万元，</text>
<text v-if="houseItem.fvDifference < 0">您的{{getResultTitle(houseItem.priceType)}}已超出目标值{{Math.abs(formatFloat(houseItem.fvPriceRealization/10000)-formatFloat((houseItem.fvPriceDesired/10000))).toFixed(2)}}万元，</text>
<text v-if="houseItem.fvDifference == 0">您的{{getResultTitle(houseItem.priceType)}}在</text>
<text>{{resultInfos.nyear}}年后可以达成您的目标.</text>
</view>
<view class="line_bottom fail" v-show="houseItem.fvDifference > 0">
<strong style="font-size: 36rpx;">很遗憾！</strong>
经过测算，距离实现您的{{getResultTitle(houseItem.priceType)}}目标还差{{Math.abs(houseItem.fvDifference/10000).toFixed(2)}}万元。您可以参考我们给出的建议进行调整。
经过测算，距离实现您的{{getResultTitle(houseItem.priceType)}}目标还差{{Math.abs(formatFloat(houseItem.fvDifference/10000))}}万元。您可以参考我们给出的建议进行调整。
</view>
</view>
</view>
......@@ -234,6 +247,19 @@
export default{
data(){
return{
chartsLegendsCurrent: 0,
chartsLegends:[{
value: '1',
name: '总房款',
checked: 'true'
},
{
value: '3',
name: '首付款'
},{
value: '4',
name: '总贷款'
}],
isNeedOfficialAccountQrcode:true,
tipsPrice:null,
tipsTotalPrice:null,
......@@ -267,6 +293,7 @@
commercialLoansParams:[],
downPaymentList:[],
totalLoanList:[],
totalPriceList:[],
resultInfos:{
nyear:null, //几年后购房
preOrderSize:null, //预购面积
......@@ -291,6 +318,23 @@
this.provCityQry();
},
methods:{
radioChange: function(evt) {
for (let i = 0; i < this.chartsLegends.length; i++) {
if (this.chartsLegends[i].value === evt.detail.value) {
this.chartsLegendsCurrent = i;
this.drawLine(evt.detail.value)
break;
}
}
},
/*
num:源数据
digitNum:保留几位小数
type:向上(1)取还是向下(2)取
*/
formatFloat(num,digitNum=2,type=1){
return common.formatFloat(num,digitNum=2,type=1)
},
viewPlanningParams(){
// 查看规划参数
this.paramsSelected=this.dialogIsShow=true;
......@@ -343,58 +387,48 @@
}
this.queryCommercialHousingPrice();
},
drawLine() {
this.downPaymentList = this.totalLoanList = [];
drawLine(type=1) {
// 1是总房价
// 3是首付
// 4是总贷款
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myEcharts'));
// 绘制图表
let list1;
let showLists;
if(this.housePurchasePrices.length){
const list1 = this.housePurchasePrices.filter((item)=>{
return item.priceType == 3
})[0];
this.downPaymentList = [].concat(list1.pvPriceRealization,list1.pvPriceDesired,-(list1.pvDifference))
const list2 = this.housePurchasePrices.filter((item)=>{
return item.priceType == 4
})[0];
this.totalLoanList = [].concat(list2.fvPriceRealization,list2.fvPriceDesired,-(list2.fvDifference))
if(type){
list1 = this.housePurchasePrices.filter((item)=>{
return item.priceType == type
})[0];
showLists = [].concat(this.formatFloat(list1.pvPriceRealization / 10000),this.formatFloat(list1.pvPriceDesired/10000),
{value:this.formatFloat(Math.abs(list1.pvDifference)/10000),itemStyle:{color:'#ff0000'}})
}
}
this.myChart.setOption({
legend: {
data: ['首付款(万元)', '总贷款金额(万元)']
},
grid: {
left: '20%', // 调整这个属性
},
xAxis: {
data: ['可实现的', '你想要的', '差额'],
axisTick:{//坐标轴刻度相关设置。
show: false,
},
},
yAxis: {},
series: [
{
name:'首付款(万元)',
data: this.downPaymentList.map(item=>(item/10000).toFixed(2)),
type: 'bar',
stack: 'x',
label:{
show:true,
position:'inside'
legend: {},
grid: {
left: '20%', // 调整这个属性
},
xAxis: {
data: ['可实现的', '你想要的', '差额'],
axisTick:{//坐标轴刻度相关设置。
show: false,
},
},
yAxis: {},
series: [
{
name:'',
data: showLists,
type: 'bar',
label:{
show:true,
position:'inside'
}
}
},
{
name:'总贷款金额(万元)',
data: this.totalLoanList.map(item=>(item/10000).toFixed(2)),
type: 'bar',
stack: 'x',
label:{
show:true,
position:'inside',
}
}
]
});
]
});
},
provCityQry(){
api.provCityQry({insurerId:888}).then((res)=>{
......@@ -570,9 +604,6 @@
this.planningParams = {};
this.resultFlag = false;
}
},
mounted(){
// this.drawLine();
}
}
</script>
......@@ -727,6 +758,11 @@
}
}
}
.chartsLegend{
button{
margin-right: 10rpx;
}
}
.mask{
position: fixed;
left: 0;
......
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