From 4f59ed78dba62ec92a892dc02dbbb2eee905b4fa Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Fri, 5 Nov 2021 10:03:37 +0800
Subject: [PATCH] cxw-010203

---
 src/components/index.js                       |   6 +-
 src/components/v-percent/index.vue            | 193 ++++++++++++++++++
 .../weiboTonalDistribution/index.vue          |  55 ++++-
 3 files changed, 247 insertions(+), 7 deletions(-)
 create mode 100644 src/components/v-percent/index.vue

diff --git a/src/components/index.js b/src/components/index.js
index 08c9540..ae23eca 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 10:28:00
- * @LastEditTime: 2021-10-21 13:21:05
+ * @LastEditTime: 2021-11-04 18:31:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/index.js
@@ -16,6 +16,7 @@ import vLabelCtx from "@/components/v-label-ctx"
 import vPagination from "@/components/v-pagination"
 import vRanking from "@/components/v-ranking";
 import vEcharsMap from "@/components/v-echars-map"
+import vPercent from "@/components/v-percent"
 export default {
     install(Vue) {
         Vue.mixin({
@@ -29,7 +30,8 @@ export default {
                 vLabelCtx,
                 vPagination,
                 vRanking,
-                vEcharsMap
+                vEcharsMap,
+                vPercent
             }
         })
     }
diff --git a/src/components/v-percent/index.vue b/src/components/v-percent/index.vue
new file mode 100644
index 0000000..50dce65
--- /dev/null
+++ b/src/components/v-percent/index.vue
@@ -0,0 +1,193 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-04 18:13:45
+ * @LastEditTime: 2021-11-05 09:56:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-percent/index.vue
+-->
+<template>
+    <div class="v-p-outter">
+        <span class="v-p-item" v-for="(item,index) in colorArr" :key="index" :style="{background: showColor[index] || '#051a33' }"></span>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "v-percent",
+    props: {
+        color: {
+            type: String,
+            default: "#3373CC",
+        },
+        num: {
+            type: Number,
+            default: 10,
+        },
+        percentage: {
+            type: Number,
+            default: 1,
+        },
+        reverse: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        prarmObj() {
+            return {
+                color: this.color,
+                num: this.num,
+                percentage: this.percentage,
+                reverse: this.reverse,
+            };
+        },
+    },
+    watch: {
+        prarmObj: {
+            handler() {
+                let a = []
+                if (this.reverse) {
+                   a  = this.gradientColor(
+                        "#05182e",
+                         this.color,
+                        this.num
+                    );
+                } else {
+                    a = this.gradientColor(
+                        this.color,
+                        "#05182e",
+                        this.num
+                    );
+                }
+                this.colorArr = a
+                let n = Math.floor(this.percentage * this.colorArr.length);
+                let cArr = [];
+                for (let i = 0; i < this.num; i++) {
+                    let ele = "#051a33";
+                    if (i >=this.num - n && !this.reverse) {
+                        ele = this.colorArr[i];
+                    } 
+                    if(this.reverse && i < n) {
+                        ele = this.colorArr[i];
+                    }
+                    cArr.push(ele);
+                }
+                this.showColor = cArr;
+            },
+            immediate: true,
+        },
+    },
+    data() {
+        return {
+            colorArr: [],
+            showColor: [],
+        };
+    },
+    methods: {
+        colorRgb(sColor) {
+            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+            let color = sColor.toLowerCase();
+            if (color && reg.test(color)) {
+                if (color.length === 4) {
+                    let sColorNew = "#";
+                    for (var i = 1; i < 4; i += 1) {
+                        sColorNew += color
+                            .slice(i, i + 1)
+                            .concat(color.slice(i, i + 1));
+                    }
+                    color = sColorNew;
+                }
+                //处理六位的颜色值
+                let sColorChange = [];
+                for (let i = 1; i < 7; i += 2) {
+                    sColorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+                }
+                return sColorChange;
+            } else {
+                return color;
+            }
+        },
+        colorHex(rgb) {
+            let _this = rgb;
+            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+            if (/^(rgb|RGB)/.test(_this)) {
+                let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
+                let strHex = "#";
+                for (let i = 0; i < aColor.length; i++) {
+                    let hex = Number(aColor[i]).toString(16);
+                    hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
+                    if (hex === "0") {
+                        hex += hex;
+                    }
+                    strHex += hex;
+                }
+                if (strHex.length !== 7) {
+                    strHex = _this;
+                }
+                return strHex;
+            } else if (reg.test(_this)) {
+                let aNum = _this.replace(/#/, "").split("");
+                if (aNum.length === 6) {
+                    return _this;
+                } else if (aNum.length === 3) {
+                    let numHex = "#";
+                    for (let i = 0; i < aNum.length; i += 1) {
+                        numHex += aNum[i] + aNum[i];
+                    }
+                    return numHex;
+                }
+            } else {
+                return _this;
+            }
+        },
+        gradientColor(startColor, endColor, step) {
+            let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
+            let startR = startRGB[0];
+            let startG = startRGB[1];
+            let startB = startRGB[2];
+
+            let endRGB = this.colorRgb(endColor);
+            let endR = endRGB[0];
+            let endG = endRGB[1];
+            let endB = endRGB[2];
+
+            let sR = (endR - startR) / step; //总差值
+            let sG = (endG - startG) / step;
+            let sB = (endB - startB) / step;
+
+            let colorArr = [];
+            for (let i = 0; i < step; i++) {
+                //计算每一步的hex值
+                let hex = this.colorHex(
+                    "rgb(" +
+                        parseInt(sR * i + startR) +
+                        "," +
+                        parseInt(sG * i + startG) +
+                        "," +
+                        parseInt(sB * i + startB) +
+                        ")"
+                );
+                colorArr.push(hex);
+            }
+            return colorArr;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.v-p-outter {
+    width: 160px;
+    display: flex;
+    justify-content: flex-start;
+}
+.v-p-item {
+    width: 10px;
+    height: 16px;
+    display: inline-block;
+    background-color: #051a33;
+    margin-right: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/WeiboDetails/weiboTonalDistribution/index.vue b/src/views/WeiboDetails/weiboTonalDistribution/index.vue
index b6d128d..4b196c5 100644
--- a/src/views/WeiboDetails/weiboTonalDistribution/index.vue
+++ b/src/views/WeiboDetails/weiboTonalDistribution/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-14 19:41:24
- * @LastEditTime: 2021-10-14 20:04:50
+ * @LastEditTime: 2021-11-05 10:02:09
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
@@ -11,18 +11,52 @@
         <v-label-div title="调性分布">
         </v-label-div>
         <div class="wtd-inner">
-            <v-echarts :opt="opt"></v-echarts>
+            <div class="wtd-item">
+                <v-percent :percentage="0.9" ></v-percent>
+                <span class="s1">个人大V</span>
+                <v-percent color="#b78e11" :percentage="0.9" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.8" ></v-percent>
+                <span class="s1">媒体</span>
+                <v-percent color="#b78e11" :percentage="0.8" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.7" ></v-percent>
+                <span class="s1">企业</span>
+                <v-percent color="#b78e11" :percentage="0.7" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.6" ></v-percent>
+                <span class="s1">政府</span>
+                <v-percent color="#b78e11" :percentage="0.6" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.5" ></v-percent>
+                <span class="s1">名人博主</span>
+                <v-percent color="#b78e11" :percentage="0.5" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.4" ></v-percent>
+                <span class="s1">非认证</span>
+                <v-percent color="#b78e11" :percentage="0.4" reverse></v-percent>
+            </div>
+            <div class="wtd-item">
+                <v-percent :percentage="0.3" ></v-percent>
+                <span class="s1">已认证</span>
+                <v-percent color="#b78e11" :percentage="0.3" reverse></v-percent>
+            </div>
         </div>
+        
     </div>
 </template>
 
 <script>
-import createOpt from "./opt"
 export default {
     name: "wtd-outter",
     data() {
         return {
-           opt: createOpt()
+          
         }
     }
 }
@@ -36,7 +70,18 @@ export default {
     margin-left: 16px;
     .wtd-inner {
         width: 100%;
-        height: calc(100% - 48px);
+        padding: 20px 16px;
+        .wtd-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 36px;
+            .s1 {
+                display: block;
+                color: #fff;
+                font-size: 14px;
+                font-weight: 500;
+            }
+        }
     }
 }
 </style>