Skip to content

W
WX_h5
Commit b4b5d774 authored by godwithdh's avatar godwithdh
Browse files
Options

tiip_from

parent 1fa63f99
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 51 deletions
src/libs/util.js
View file @ b4b5d774
...@@ -383,6 +383,112 @@ util.getDate = (type) => { ...@@ -383,6 +383,112 @@ util.getDate = (type) => {
break; break;
} }
} }
//自动生成颜色
util.Colors=function(hslLength){
this.hslLength = hslLength?hslLength:1;
this.cArray = [ "0","1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
this.hslArray = [];
};
//返回颜色数组
util.Colors.prototype.rgbArray=function() {
var self = this;
this.hslArray = this.getHslArray();
if(!self.hslArray.length) return [];
var rgbArray = self.hslArray.map(function(item) {
return self.hslToRgb.apply(this, item);
});
return rgbArray.map(function(item) {
return {
//三原色值
value: item,
//16进制的颜色
hex: self.rgbToHexadecimal(item),
//rgb颜色
rgb: item.toString(),
}
});
};
/**
* RGB颜色转为16进制
* @param {Object} item rgb颜色数组
*/
util.Colors.prototype.rgbToHexadecimal = function(item) {
if(item && item.length == 3){
var a = item[0], b = item[1], c = item[2], d="#", cArray = this.cArray;
d += cArray[Math.floor(a/16)] + "" + cArray[a%16] + "";
d += cArray[Math.floor(b/16)] + "" + cArray[b%16] + "";
d += cArray[Math.floor(c/16)] + "" + cArray[c%16] + "";
return d;
}
};
/**
* HSL颜色值转换为RGB
* H，S，L 设定在 [0, 1] 之间
* R，G，B 返回在 [0, 255] 之间
*
* @param H 色相
* @param S 饱和度
* @param L 亮度
* @returns Array RGB色值
*/
util.Colors.prototype.hslToRgb = function(H, S, L) {
var R, G, B;
if(+S === 0) {
R = G = B = L; // 饱和度为0 为灰色
} else {
var hue2Rgb = function(p, q, t) {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1 / 6) return p + (q - p) * 6 * t;
if(t < 1 / 2) return q;
if(t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
var P = 2 * L - Q;
R = hue2Rgb(P, Q, H + 1 / 3);
G = hue2Rgb(P, Q, H);
B = hue2Rgb(P, Q, H - 1 / 3);
}
return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];
};
// 获取随机HSL
util.Colors.prototype.randomHsl = function() {
var H = Math.random();
var S = Math.random();
var L = Math.random();
return [H, S, L];
},
// 获取HSL数组
util.Colors.prototype.getHslArray= function() {
var HSL = [];
var hslLength = this.hslLength ? this.hslLength : 1;
for(var i = 0; i < hslLength; i++) {
var ret = this.randomHsl();
// 颜色相邻颜色差异须大于 0.25
if(i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {
i--;
continue; // 重新获取随机色
}
ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色
ret[2] = 0.4 + (ret[2] * 0.3); // [0.4 - 0.8] 排除过亮过暗色
// 数据转化到小数点后两位
ret = ret.map(function(item) {
return parseFloat(item.toFixed(2));
});
HSL.push(ret);
}
return HSL;
};
// util.pageReturn = function(){ // util.pageReturn = function(){
// /*微信自带返回按钮，不刷新，刷新页面start*/ // /*微信自带返回按钮，不刷新，刷新页面start*/
// if (util.isIos()) { // if (util.isIos()) {
......
src/view/tiip/IntReportForms/Repayment.vue
View file @ b4b5d774
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
} }
>tr{ >tr{
>td{ >td{
padding:5px 2px; padding:5px 3px;
} }
>td:not(:first-child){ >td:not(:first-child){
border-left:1px solid #ddd; border-left:1px solid #ddd;
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
border-bottom:1px solid #ddd; border-bottom:1px solid #ddd;
} }
} }
>tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; } // >tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
} }
} }
</style> </style>
...@@ -161,9 +161,6 @@ export default { ...@@ -161,9 +161,6 @@ export default {
}) })
}, },
methods:{ methods:{
renderChart(){
},
number(val){ number(val){
return (Math.round((val||0)*100)/100).toLocaleString() return (Math.round((val||0)*100)/100).toLocaleString()
}, },
...@@ -177,10 +174,16 @@ export default { ...@@ -177,10 +174,16 @@ export default {
value.set1[0]&&(this.value1=value.set1[0]) value.set1[0]&&(this.value1=value.set1[0])
this.value2=value.set2||[] this.value2=value.set2||[]
this.value3=value.set3||[] this.value3=value.set3||[]
var isOver=false var isOver=0
this.value2.forEach(v=>{ this.value2.forEach(v=>{
if(v["回款金额"]>10000||v["回款目标"]>10000||v["回款金额"]<-10000||v["回款目标"]<-10000){ if(Math.abs(v["回款金额"])>10000||Math.abs(v["回款目标"])>10000){
isOver=true isOver=isOver<=1?1:isOver
}
if(Math.abs(v["回款金额"])>100000||Math.abs(v["回款目标"])>100000){
isOver=isOver<=2?2:isOver
}
if(Math.abs(v["回款金额"])>1000000||Math.abs(v["回款目标"])>1000000){
isOver=3
} }
}) })
...@@ -196,10 +199,10 @@ export default { ...@@ -196,10 +199,10 @@ export default {
yAxis :{ yAxis :{
type : 'value', type : 'value',
boundaryGap: [0, 0.01], boundaryGap: [0, 0.01],
name:isOver?'(万元)':'', name:isOver?`(${String(isOver).replace('2','十').replace('3','百')}万元)`:'',
axisLabel:{ axisLabel:{
formatter(v){ formatter(v){
return isOver?Math.round(v/100)/100:v; return isOver?Math.round(v/(isOver==1?100:(isOver==2?1000:10000)))/100:v;
} }
}, },
}, },
...@@ -207,11 +210,17 @@ export default { ...@@ -207,11 +210,17 @@ export default {
name:'回款金额', name:'回款金额',
type:'bar', type:'bar',
data:this.value2.map(v=>v["回款金额"]), data:this.value2.map(v=>v["回款金额"]),
itemStyle:{
color:"#1F12F7"
}
}, },
{ {
name:'回款目标', name:'回款目标',
type:'bar', type:'bar',
data:this.value2.map(v=>v["回款目标"]), data:this.value2.map(v=>v["回款目标"]),
itemStyle:{
color:"#3BA5EF"
}
} ] } ]
},this.option)) },this.option))
}, },
......
src/view/tiip/IntReportForms/revenue.vue
View file @ b4b5d774
<style lang="less"> <style lang="less">
@import url("../../../styles/common.less"); @import url("../../../styles/common.less");
.DATA{ #revenue{
width:100%; .DATA{
>tr{ width:100%;
>td{ >tr{
padding:8px 4px; >td{
&:first-child{ padding:8px 4px;
width:50px; &:first-child{
&>div>span{ width:50px;
background: rgb(146, 190, 7); &>div>span{
box-shadow: 2px 2px 3px rgba(146, 190, 7,0.3); background: rgb(146, 190, 7);
color: #fff; box-shadow: 2px 2px 3px rgba(146, 190, 7,0.3);
border-radius: 50%; color: #fff;
width: 30px; border-radius: 50%;
height: 30px; width: 30px;
display: flex; height: 30px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
margin: 0 auto; align-items: center;
padding: 0 5px; margin: 0 auto;
font-size: 17px; padding: 0 5px;
font-size: 17px;
}
}
&:last-child{
text-align: right;
} }
} }
&:last-child{ &:not(:first-child)>td{
text-align: right; border-bottom:1px solid #ddd;
} &:first-child>div>span{
} width:20px;
&:not(:first-child)>td{ height:20px;
border-bottom:1px solid #ddd; font-size:10px;
&:first-child>div>span{ background:rgb(var(--color,'245, 104, 96'));
width:20px; box-shadow: 2px 2px 3px rgba(var(--color,'245, 104, 96'),0.3);
height:20px; }
font-size:10px; &:nth-child(n+3){
background:#F56860; color:#777;
box-shadow: 2px 2px 3px rgba(245, 104, 96,0.3); }
} }
&:nth-child(n+3){ &.active{
color:#777; background:#f2f2f2;
} }
} }
} }
...@@ -44,7 +49,7 @@ ...@@ -44,7 +49,7 @@
</style> </style>
<template> <template>
<div id="revenue"> <div id="revenue">
<tab> <tab active-color="#708BF6">
<tab-item :selected="tabIndex=='getTiipReceiveinfo'" @on-item-click="tabIndex='getTiipReceiveinfo'">收入</tab-item> <tab-item :selected="tabIndex=='getTiipReceiveinfo'" @on-item-click="tabIndex='getTiipReceiveinfo'">收入</tab-item>
<tab-item :selected="tabIndex=='getTiipPayinfo'" @on-item-click="tabIndex='getTiipPayinfo'">支出</tab-item> <tab-item :selected="tabIndex=='getTiipPayinfo'" @on-item-click="tabIndex='getTiipPayinfo'">支出</tab-item>
</tab> </tab>
...@@ -58,8 +63,8 @@ ...@@ -58,8 +63,8 @@
<td><div></div></td> <td><div></div></td>
<td><div> <span>{{allPay.toLocaleString()}}</span> </div></td> <td><div> <span>{{allPay.toLocaleString()}}</span> </div></td>
</tr> </tr>
<tr v-for="(v,k) in list" :key="k"> <tr v-for="(v,k) in list" :key="k" @click="select(k)" :class="{active:selectIndex==k}">
<td><div> <span>{{v.name.slice(0,1)}}</span> </div></td> <td><div> <span :style="{'--color':colorList[k].rgb}">{{v.name.slice(0,1)}}</span> </div></td>
<td><div> <span>{{v.name}}</span> </div></td> <td><div> <span>{{v.name}}</span> </div></td>
<td><div> <span>{{v.percent}}%</span> </div></td> <td><div> <span>{{v.percent}}%</span> </div></td>
<td><div> <span>{{v.value.toLocaleString()}}</span> </div></td> <td><div> <span>{{v.value.toLocaleString()}}</span> </div></td>
...@@ -87,12 +92,14 @@ export default { ...@@ -87,12 +92,14 @@ export default {
chart:null, chart:null,
list:[], list:[],
colorList:[],
allPay:0, allPay:0,
selectIndex:-1,
} }
}, },
mounted(){ mounted(){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.chart=this.$echarts.init(this.$refs.chart) this.init()
this.searchData() this.searchData()
}) })
...@@ -102,6 +109,16 @@ export default { ...@@ -102,6 +109,16 @@ export default {
}) })
}, },
methods:{ methods:{
init(){
this.chart=this.$echarts.init(this.$refs.chart)
this.chart.getZr().on("click",v=>{
if(v.target){
this.select(v.target.dataIndex)
}else{
this.select(-1)
}
})
},
async searchData(){ async searchData(){
var value=await this.request(this.tabIndex,{ var value=await this.request(this.tabIndex,{
data:{ data:{
...@@ -113,23 +130,24 @@ export default { ...@@ -113,23 +130,24 @@ export default {
this.list=value.set1.filter(v=>v.nAmount!=0&&v.sReceivableType).map(v=>{ this.list=value.set1.filter(v=>v.nAmount!=0&&v.sReceivableType).map(v=>{
return{ return{
name:v.sReceivableType, name:v.sReceivableType,
value:v.nAmount value:v.nAmount,
} }
}) })
}else{ }else{
this.list=value.set1.filter(v=>v.nAmount!=0&&v.sPayableType).map(v=>{ this.list=value.set1.filter(v=>v.nAmount!=0&&v.sPayableType).map(v=>{
return{ return{
name:v.sPayableType, name:v.sPayableType,
value:v.nAmount value:v.nAmount,
} }
}) })
} }
this.colorList=new Util.Colors(this.list.length).rgbArray()
this.allPay=0 this.allPay=0
this.list.forEach(v=> this.allPay+=v.value ) this.list.forEach(v=> this.allPay+=v.value )
this.allPay=Math.round(this.allPay*100)/100 this.allPay=Math.round(this.allPay*100)/100
this.list.forEach(v=>{ this.list.forEach(v=>{
v.percent=Math.round(v.value/this.allPay*100) v.percent=Math.round(v.value/this.allPay*10000)/100
}) })
this.chart.setOption({ this.chart.setOption({
tooltip:{ tooltip:{
...@@ -137,6 +155,7 @@ export default { ...@@ -137,6 +155,7 @@ export default {
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
position:[10,10], position:[10,10],
}, },
color:this.colorList.map(v=>v.hex),
series:[ series:[
{ {
name:'访问来源', name:'访问来源',
...@@ -174,6 +193,21 @@ export default { ...@@ -174,6 +193,21 @@ export default {
], ],
}) })
}, },
select(index){
this.selectIndex=index
this.list.forEach((v,i)=>{
this.chart.dispatchAction({
type:"downplay",
seriesIndex:i
})
})
if(index>=0){
this.chart.dispatchAction({
type:"highlight",
dataIndex:index
})
}
},
}, },
watch:{ watch:{
tabIndex(){ tabIndex(){
......
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