tiip_from

src/libs/util.js

@@ -383,6 +383,112 @@ util.getDate = (type) => {
           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(){
 //    /*微信自带返回按钮，不刷新，刷新页面start*/
 //   if (util.isIos()) {

src/view/tiip/IntReportForms/Repayment.vue

@@ -33,7 +33,7 @@
             }
             >tr{
                 >td{
-                    padding:5px 2px;
+                    padding:5px 3px;
                 }
                 >td:not(:first-child){
                     border-left:1px solid #ddd;
@@ -42,7 +42,7 @@
                     border-bottom:1px solid #ddd;
                 }
             }
-            >tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
+            // >tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
         }
     }
 </style>
@@ -161,9 +161,6 @@ export default {
         })
     },
     methods:{
-        renderChart(){
-            
-        },
         number(val){
             return (Math.round((val||0)*100)/100).toLocaleString()
         },
@@ -177,10 +174,16 @@ export default {
             value.set1[0]&&(this.value1=value.set1[0])
             this.value2=value.set2||[]
             this.value3=value.set3||[]
-            var isOver=false
+            var isOver=0
             this.value2.forEach(v=>{
-                if(v["回款金额"]>10000||v["回款目标"]>10000||v["回款金额"]<-10000||v["回款目标"]<-10000){
-                    isOver=true
+                if(Math.abs(v["回款金额"])>10000||Math.abs(v["回款目标"])>10000){
+                    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 {
                 yAxis :{
                     type : 'value',
                     boundaryGap: [0, 0.01],
-                    name:isOver?'(万元)':'',
+                    name:isOver?`(${String(isOver).replace('2','十').replace('3','百')}万元)`:'',
                     axisLabel:{
                         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 {
                     name:'回款金额',
                     type:'bar',
                     data:this.value2.map(v=>v["回款金额"]),
+                    itemStyle:{
+                        color:"#1F12F7"
+                    }
                 },
                 {
                     name:'回款目标',
                     type:'bar',
                     data:this.value2.map(v=>v["回款目标"]),
+                    itemStyle:{
+                        color:"#3BA5EF"
+                    }
                 } ]
             },this.option))
         },

src/view/tiip/IntReportForms/revenue.vue

 <style lang="less">
     @import url("../../../styles/common.less");
+    #revenue{
         .DATA{
             width:100%;
             >tr{
@@ -32,19 +33,23 @@
                         width:20px;
                         height:20px;
                         font-size:10px;
-                    background:#F56860;
-                    box-shadow: 2px 2px 3px rgba(245, 104, 96,0.3);
+                        background:rgb(var(--color,'245, 104, 96'));
+                        box-shadow: 2px 2px 3px rgba(var(--color,'245, 104, 96'),0.3);
                     }
                     &:nth-child(n+3){
                         color:#777;
                     }
                 }
+                &.active{
+                    background:#f2f2f2;
+                }
+            }
         }
     }
 </style>
 <template>
     <div id="revenue">
-        <tab>
+        <tab active-color="#708BF6">
             <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>
@@ -58,8 +63,8 @@
                     <td><div></div></td>
                     <td><div> <span>{{allPay.toLocaleString()}}</span> </div></td>
                 </tr>
-                <tr v-for="(v,k) in list" :key="k">
-                    <td><div> <span>{{v.name.slice(0,1)}}</span> </div></td>
+                <tr v-for="(v,k) in list" :key="k" @click="select(k)" :class="{active:selectIndex==k}">
+                    <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.percent}}%</span> </div></td>
                     <td><div> <span>{{v.value.toLocaleString()}}</span> </div></td>
@@ -87,12 +92,14 @@ export default {
 
             chart:null,
             list:[],
+            colorList:[],
             allPay:0,
+            selectIndex:-1,
         }
     },
     mounted(){
         this.$nextTick(()=>{
-            this.chart=this.$echarts.init(this.$refs.chart)
+            this.init()
             this.searchData()
         })
 
@@ -102,6 +109,16 @@ export default {
         })
     },
     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(){
             var value=await this.request(this.tabIndex,{
                 data:{
@@ -113,23 +130,24 @@ export default {
                 this.list=value.set1.filter(v=>v.nAmount!=0&&v.sReceivableType).map(v=>{
                     return{
                         name:v.sReceivableType,
-                        value:v.nAmount
+                        value:v.nAmount,
                     }
                 })
             }else{
                 this.list=value.set1.filter(v=>v.nAmount!=0&&v.sPayableType).map(v=>{
                     return{
                         name:v.sPayableType,
-                        value:v.nAmount
+                        value:v.nAmount,
                     }
                 })
             }
+            this.colorList=new Util.Colors(this.list.length).rgbArray()
 
             this.allPay=0
             this.list.forEach(v=> this.allPay+=v.value )
             this.allPay=Math.round(this.allPay*100)/100
             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({
                 tooltip:{
@@ -137,6 +155,7 @@ export default {
                     formatter: "{a} <br/>{b} : {c} ({d}%)",
                     position:[10,10],
                 },
+                color:this.colorList.map(v=>v.hex),
                 series:[
                     {
                         name:'访问来源',
@@ -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:{
         tabIndex(){