图表优化

src/util/theme.color.js

@@ -0,0 +1,22 @@
+let colorArr = [
+  "#5B8FF9",
+  "#E6625B",
+  "#FF981E",
+  "#F6BD16",
+  "#07B79D",
+  "#9B6BDF",
+  "#FF99C3",
+  "#1E9493",
+  "#BA3FB7",
+  "#54BEF3",
+  "#3C21F7",
+  "#F87148",
+  "#3EB171"
+]
+let colorTemp = Math.floor(Math.random() * colorArr.length + 1) - 1
+
+let a = {
+  randomColor:colorArr[colorTemp],
+  colorArr
+}
+export default a;

src/views/Equipment/equipmentDetailList.vue

@@ -548,6 +548,7 @@
 import * as echarts from "echarts";
 import { mapGetters } from "vuex";
 import { exportMethodPost } from "@/util/util";
+import colorTheme from "@/util/theme.color"
 export default {
   data() {
     return {
@@ -1187,29 +1188,7 @@ export default {
         var option;
 
         option = {
-          color: [
-            "#66AFF5",
-            "#FABD2B",
-            "#6F8EDC",
-            "#FFCF8F",
-            "#F98120",
-            "#1CC99E",
-            "#9474FB",
-            "#657292",
-            "#7A6A99",
-            "#BF5D52",
-            "#EE6666",
-            "#77B7E4",
-            "#E6A065",
-            "#9D5139",
-            "#C1AA88",
-            "#F87F7A",
-            "#F6CF74",
-            "#7F5506",
-            "#88BB9B",
-            "#6E99AA",
-            "#5789D0",
-          ],
+          color: colorTheme.colorArr,
           tooltip: {
             trigger: "axis",
           },
@@ -1298,35 +1277,13 @@ export default {
         var myChart = echarts.init(chartDom);
         var option;
         option = {
-          color: [
-            "#66AFF5",
-            "#FABD2B",
-            "#6F8EDC",
-            "#FFCF8F",
-            "#F98120",
-            "#1CC99E",
-            "#9474FB",
-            "#657292",
-            "#7A6A99",
-            "#BF5D52",
-            "#EE6666",
-            "#77B7E4",
-            "#E6A065",
-            "#9D5139",
-            "#C1AA88",
-            "#F87F7A",
-            "#F6CF74",
-            "#7F5506",
-            "#88BB9B",
-            "#6E99AA",
-            "#5789D0",
-          ],
+          color: colorTheme.colorArr[0],
           tooltip: {
             trigger: "axis",
           },
           legend: {
             data: [str1],
-            bottom: "10",
+            top: "10",
           },
           grid: {
             left: 10,
@@ -1382,6 +1339,16 @@ export default {
               data: arr1,
               type: "line",
               smooth: true,
+              areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
             },
           ],
         };
@@ -1479,29 +1446,7 @@ export default {
           var myChart = echarts.init(document.getElementById("mane"));
           var myChart1 = echarts.init(document.getElementById("mane2"));
           var option = {
-            color: [
-              "#66AFF5",
-              "#FABD2B",
-              "#6F8EDC",
-              "#FFCF8F",
-              "#F98120",
-              "#1CC99E",
-              "#9474FB",
-              "#657292",
-              "#7A6A99",
-              "#BF5D52",
-              "#EE6666",
-              "#77B7E4",
-              "#E6A065",
-              "#9D5139",
-              "#C1AA88",
-              "#F87F7A",
-              "#F6CF74",
-              "#7F5506",
-              "#88BB9B",
-              "#6E99AA",
-              "#5789D0",
-            ],
+            color: colorTheme.colorArr,
             tooltip: {
               trigger: "item",
             },
@@ -1520,29 +1465,7 @@ export default {
             ],
           };
           var option1 = {
-            color: [
-              "#66AFF5",
-              "#FABD2B",
-              "#6F8EDC",
-              "#FFCF8F",
-              "#F98120",
-              "#1CC99E",
-              "#9474FB",
-              "#657292",
-              "#7A6A99",
-              "#BF5D52",
-              "#EE6666",
-              "#77B7E4",
-              "#E6A065",
-              "#9D5139",
-              "#C1AA88",
-              "#F87F7A",
-              "#F6CF74",
-              "#7F5506",
-              "#88BB9B",
-              "#6E99AA",
-              "#5789D0",
-            ],
+            color: colorTheme.colorArr,
             tooltip: {
               trigger: "item",
             },

src/views/Statistics/BuildingContrast.vue

@@ -15,17 +15,9 @@
         </div>
       </div>
       <div style="margin-left: 26px">
-        <el-date-picker
-          v-model="customtime"
-          @change="confirmtime()"
-          type="daterange"
-          :clearable="false"
-          range-separator="-"
-          :default-time="['00:00:00', '23:59:59']"
-          value-format="yyyy-MM-dd"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
+        <el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"
+          range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
+          start-placeholder="开始日期" end-placeholder="结束日期">
         </el-date-picker>
       </div>
       <!-- <el-select
@@ -42,10 +34,7 @@
           >
           </el-option>
       </el-select> -->
-      <div
-        style="margin-left: auto; margin-right: 10px"
-        v-if="sta_bui_downLoad"
-      >
+      <div style="margin-left: auto; margin-right: 10px" v-if="sta_bui_downLoad">
         <el-button @click="downLoad">导出</el-button>
       </div>
     </div>
@@ -69,52 +58,22 @@
         </el-table-column>
         <el-table-column prop="activeCustomer" label="有效接待" align="center" width="100" sortable>
         </el-table-column>
-        <el-table-column
-          prop="prohibitedCustomer"
-          label="违禁接待次数"
-          align="center"
-          sortable
-          width="140"
-        >
+        <el-table-column prop="prohibitedCustomer" label="违禁接待次数" align="center" sortable width="140">
         </el-table-column>
-        <el-table-column
-          prop="sumDuration"
-          label="接待时长(分钟)"
-          align="center"
-          sortable
-          width="140"
-        >
+        <el-table-column prop="sumDuration" label="接待时长(分钟)" align="center" sortable width="140">
           <template slot-scope="scope">
             {{ Math.floor(scope.row.sumDuration / 60) || 0 }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="prohibitedZb"
-          label="违禁接待占比"
-          align="center"
-          sortable
-           width="140"
-        >
+        <el-table-column prop="prohibitedZb" label="违禁接待占比" align="center" sortable width="140">
           <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
         </el-table-column>
-        <el-table-column
-          prop="addtodigestCount"
-          label="优秀案例数"
-          align="center"
-          sortable
-          width="140"
-        ></el-table-column>
+        <el-table-column prop="addtodigestCount" label="优秀案例数" align="center" sortable width="140"></el-table-column>
       </el-table>
       <div style="display: flex; justify-content: flex-end; margin-top: 10px">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="page"
-          :page-sizes="[10, 30, 50]"
-          :page-size="pagesize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
+          :page-sizes="[10, 30, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
         </el-pagination>
       </div>
     </div>
@@ -125,29 +84,41 @@
           <div class="text1">接待量（TOP10）</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">接待合计</div>
             <div class="text1-2">{{ objList1.sum }}次</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">项目总数</div>
             <div class="text1-2">{{ objList1.num }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">平均接待</div>
             <div class="text1-2">{{ objList1.avg }}次</div>
           </div>
         </div>
-        <div
-          style="height: 300px; width: 94%; margin: 0 auto"
-        >
+        <div style="height: 300px; width: 94%; margin: 0 auto">
           <div class="jinbox" v-for="(item, i) in objList1.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+              </div>
+
             </div>
             <div class="jinboxbott">{{ item.zxl }}</div>
           </div>
@@ -158,25 +129,37 @@
           <div class="text1">平均执行率（TOP10）</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;;text-align: center;">
             <div class="text1-1">项目总数</div>
             <div class="text1-2">{{ objList2.num }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;;text-align: center;">
             <div class="text1-1">平均执行率</div>
             <div class="text1-2">{{ objList2.avg }}%</div>
           </div>
         </div>
-        <div
-          style="height: 300px; width: 94%; margin: 0 auto"
-        >
+        <div style="height: 300px; width: 94%; margin: 0 auto">
           <div class="jinbox" v-for="(item, i) in objList2.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
+              </div>
+
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -190,29 +173,40 @@
           <div class="text1">违禁接待次数（TOP10）</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">合计</div>
             <div class="text1-2">{{ objList3.sum }}次</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">项目总数</div>
             <div class="text1-2">{{ objList3.num }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">平均违规</div>
             <div class="text1-2">{{ objList3.avg }}次</div>
           </div>
         </div>
-        <div
-          style="height: 300px; width: 94%; margin: 0 auto"
-        >
+        <div style="height: 300px; width: 94%; margin: 0 auto">
           <div class="jinbox" v-for="(item, i) in objList3.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+              </div>
+
             </div>
             <div class="jinboxbott">{{ item.zxl }}</div>
           </div>
@@ -223,29 +217,41 @@
           <div class="text1">接待时长（分钟）（TOP10）</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">时长合计</div>
             <div class="text1-2">{{ objList4.sum }}分钟</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">项目总数</div>
             <div class="text1-2">{{ objList4.num }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">平均时长</div>
             <div class="text1-2">{{ objList4.avg }}分钟</div>
           </div>
         </div>
-        <div
-          style="height: 300px; width: 94%; margin: 0 auto"
-        >
+        <div style="height: 300px; width: 94%; margin: 0 auto">
           <div class="jinbox" v-for="(item, i) in objList4.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+              </div>
+
             </div>
             <div class="jinboxbott">{{ item.zxl }}</div>
           </div>
@@ -329,38 +335,38 @@ export default {
   },
   methods: {
     getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '合计';
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+
+        const values = data.map(item => Number(item[column.property]));
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          // sums[index] += ' 元';
+          if (index === 2) {
+            sums[index] += '%';
             return;
           }
-          
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-            // sums[index] += ' 元';
-            if (index === 2) {
-              sums[index] += '%';
-              return;
-            }
-            if (index === 8) {
-              sums[index] += '%';
-              return;
-            }
+          if (index === 8) {
+            sums[index] += '%';
+            return;
           }
-        });
-        sums[1] = ' ';
-        return sums;
-      },
+        }
+      });
+      sums[1] = ' ';
+      return sums;
+    },
     downLoad() {
       let pamaet = {
         orgType: this.role,
@@ -613,22 +619,36 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
+.sequenceNum {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  background: #E5F0FF;
+  border-radius: 15px;
+  color: #333333;
+}
+
 .box-center {
   width: 100%;
   padding: 15px;
   min-width: 1000px;
   padding-bottom: 100px;
 }
+
 .cen-tab {
   width: 100%;
   padding: 15px;
   background: #ffffff;
   margin-top: 15px;
 }
+
 .tophove {
   color: #ffffff;
   background: #2671e2;
 }
+
 .app-titel {
   width: 100%;
   height: 70px;
@@ -637,6 +657,7 @@ export default {
   border-radius: 4px;
   display: flex;
   align-items: center;
+
   .titel-text {
     height: 100%;
     font-size: 18px;
@@ -645,6 +666,7 @@ export default {
     line-height: 70px;
     margin-left: 30px;
   }
+
   .toptimeqhuan {
     width: 190px;
     height: 32px;
@@ -657,6 +679,7 @@ export default {
     margin-left: 20px;
     cursor: pointer;
   }
+
   .toptimeqhuan div {
     flex: 1;
     text-align: center;
@@ -670,18 +693,21 @@ export default {
   min-height: 400px;
   display: flex;
   margin-top: 15px;
+
   .zuo {
     flex: 1;
     height: 100%;
     margin-right: 15px;
     background: #ffffff;
     border-radius: 4px;
+
     .title {
       width: 100%;
       height: 55px;
       border-bottom: 1px solid #e0e0e0;
       display: flex;
       align-content: center;
+
       .text1 {
         flex: 2;
         line-height: 55px;
@@ -690,6 +716,7 @@ export default {
         font-size: 16px;
         color: #333333;
       }
+
       .text2 {
         flex: 1;
         height: 55px;
@@ -698,17 +725,20 @@ export default {
       }
     }
   }
+
   .you {
     height: 100%;
     flex: 1;
     background: #ffffff;
     border-radius: 4px;
+
     .title {
       width: 100%;
       height: 55px;
       border-bottom: 1px solid #e0e0e0;
       display: flex;
       align-content: center;
+
       .text1 {
         flex: 2;
         line-height: 55px;
@@ -717,6 +747,7 @@ export default {
         font-size: 16px;
         color: #333333;
       }
+
       .text2 {
         flex: 1;
         height: 55px;
@@ -733,12 +764,15 @@ export default {
   display: flex;
   padding-top: 10px;
   padding-bottom: 10px;
+
   .text1-1 {
     color: #666666;
   }
+
   .text1-2 {
     color: #333333;
     margin-top: 10px;
+    font-weight: bold;
   }
 }
 
@@ -751,6 +785,7 @@ export default {
   font-size: 16px;
   color: #2c3542;
   margin-top: 10px;
+
   .jinboxtit {
     width: 14%;
     height: 18px;
@@ -758,22 +793,45 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    .sequenceNum {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      background: #E5F0FF;
+      border-radius: 15px;
+      margin-right: 10px;
+      color: #333333;
+    }
+
+    .name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-left: 10px;
+    }
   }
+
   .jinbox-box {
     width: 75%;
     height: 100%;
     border-radius: 8px;
     background: #f2f2f2;
   }
+
   .boxbaifenbi {
     height: 100%;
     background: #60d7a0;
     border-radius: 8px;
   }
+
   .boxbaifenbi2 {
     height: 100%;
     background: #5b8ff9;
   }
+
   .jinboxbott {
     width: 16%;
     text-indent: 16px;

src/views/Statistics/ConsultantBrand.vue

@@ -179,15 +179,15 @@
           <div class="text1">接待量排名（TOP10）</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">接待合计</div>
             <div class="text1-2">{{ sum1 }}次</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">顾问人数</div>
             <div class="text1-2">{{ num1 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">人均接待</div>
             <div class="text1-2">{{ avg1 }}次</div>
           </div>
@@ -197,12 +197,24 @@
           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
         >
           <div class="jinbox" v-for="(item, i) in echarlist" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}次</div>
           </div>
@@ -224,15 +236,15 @@
         </div>
 
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">接待时长合计</div>
             <div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">顾问人数</div>
             <div class="text1-2">{{ num2 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>
           </div>
@@ -242,12 +254,24 @@
           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
         >
           <div class="jinbox" v-for="(item, i) in echarlist2" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.percentage + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.percentage + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}分钟</div>
           </div>
@@ -287,11 +311,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">顾问人数</div>
             <div class="text1-2">{{ num3 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">平均执行</div>
             <div class="text1-2">{{ avg3 }}%</div>
           </div>
@@ -301,12 +325,24 @@
           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
         >
           <div class="jinbox" v-for="(item, i) in echarlist1" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -343,15 +379,15 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 35%">
+          <div class="sanbox1" style="width: 35%;text-align: center;">
             <div class="text1-1">违禁合计</div>
             <div class="text1-2">{{ sum4 }}次</div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;text-align: center;">
             <div class="text1-1">顾问人数</div>
             <div class="text1-2">{{ num4 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 25%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ avg4 }}次</div>
           </div>
@@ -361,12 +397,24 @@
           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
         >
           <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}次</div>
           </div>
@@ -815,6 +863,17 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
+.sequenceNum {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      background: #E5F0FF;
+      border-radius: 15px;
+      color: #333333;
+      margin-right: 10px;
+    }
 .box-center {
   width: 100%;
   padding: 15px;
@@ -981,6 +1040,7 @@ export default {
   .text1-2 {
     color: #333333;
     margin-top: 10px;
+    font-weight: bold;
   }
 }
 

src/views/Statistics/MentoringAbility.vue

@@ -99,11 +99,11 @@
             </div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ consultantname }}</div>
               <div class="text1-2">{{ datalistobj1.avgA }}次</div>
             </div>
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ Packname }}</div>
               <div class="text1-2">{{ datalistobj1.avgB }}次</div>
             </div>
@@ -117,11 +117,11 @@
             <div class="text1">接待时长</div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ consultantname }}</div>
               <div class="text1-2">{{ datalistobj2.avgA }}分钟</div>
             </div>
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ Packname }}</div>
               <div class="text1-2">{{ datalistobj2.avgB }}分钟</div>
             </div>
@@ -154,11 +154,11 @@
             </div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ consultantname }}</div>
               <div class="text1-2">{{ datalistobj3.avgA }}%</div>
             </div>
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ Packname }}</div>
               <div class="text1-2">{{ datalistobj3.avgB }}%</div>
             </div>
@@ -172,7 +172,7 @@
             <div class="text1">销讲能力雷达图</div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">&nbsp;</div>
               <div class="text1-2">&nbsp;</div>
             </div>
@@ -213,11 +213,11 @@
             </div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ consultantname }}</div>
               <div class="text1-2">{{ datalistobj5.avgA }}次</div>
             </div>
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">{{ Packname }}</div>
               <div class="text1-2">{{ datalistobj5.avgB }}次</div>
             </div>
@@ -231,7 +231,7 @@
             <div class="text1">违禁话术雷达图</div>
           </div>
           <div class="hejisan">
-            <div class="sanbox1" style="width: 50%">
+            <div class="sanbox1" style="width: 50%;text-align: center;">
               <div class="text1-1">&nbsp;</div>
               <div class="text1-2">&nbsp;</div>
             </div>
@@ -386,6 +386,9 @@
 import * as echarts from "echarts";
 import { mapGetters } from "vuex";
 import { exportMethodPost } from "@/util/util";
+
+import colorTheme from "../../util/theme.color"
+import color from "../../mixins/color";
 export default {
   data() {
     return {
@@ -935,29 +938,7 @@ export default {
 
       var option;
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         legend: {
           data: [this.consultantname, this.Packname],
           top: "6",
@@ -991,12 +972,32 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
           {
             name: this.Packname,
             data: arr2,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[1] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ],
       };
@@ -1099,29 +1100,7 @@ export default {
       // }
       var option;
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         tooltip: {
           trigger: "axis",
         },
@@ -1363,6 +1342,7 @@ export default {
   .text1-2 {
     color: #333333;
     margin-top: 10px;
+    font-weight: bold;
   }
 }
 

src/views/Statistics/ReceptionOverview.vue

@@ -175,11 +175,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">合计接待</div>
             <div class="text1-2">{{ Pinspeak.sum || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ Pinspeak.avg || 0 }}%</div>
           </div>
@@ -199,11 +199,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">合计接待</div>
             <div class="text1-2">{{ Pinspeak2.sum || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 25%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ Pinspeak2.avg || 0 }}%</div>
           </div>
@@ -227,7 +227,7 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 30%">
+          <div class="sanbox1" style="width: 30%;    text-align: center;">
             <div class="text1-1">
               {{ activeName == "3" ? "平均执行率" : "合计" }}
             </div>
@@ -235,12 +235,12 @@
               {{ ceratelist.avg || 0 }}{{ activeName | company }}
             </div>
           </div>
-          <div class="sanbox1" style="width: 40%">
+          <div class="sanbox1" style="width: 40%;    text-align: center;">
             <div class="text1-1">顾问</div>
             <div class="text1-2">{{ ceratelist.num || 0 }}个</div>
           </div>
           <template v-if="activeName != '3'">
-            <div class="sanbox1" style="width: 30%">
+            <div class="sanbox1" style="width: 30%;    text-align: center;">
               <div class="text1-1">{{ activeName | comName }}</div>
               <div class="text1-2">
                 {{ ceratelist.avg || 0 }}{{ activeName | company }}
@@ -248,29 +248,41 @@
             </div>
           </template>
         </div>
-        <div v-if="ceratelist.list.length != 0" style="
+        <div v-if="activeName !== '0'">
+          <div v-if="ceratelist.list.length != 0" style="
             height: 360px;
             width: 94%;
             margin: 0 auto;
             margin-top: 15px;
             margin-bottom: 16px;
           ">
-          <div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
-            <div class="jinbox-box">
-              <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>
-            </div>
-            <div class="jinboxbott">
-              {{ item.zxl || 0 }}{{ activeName | company }}
+            <div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i">
+              <div class="jinboxtit">
+                <span class="sequenceNum" :style="{
+                  'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                  'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                  'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+                }">{{ i + 1 }}</span>
+                <span class="name">{{ item.name }}</span>
+              </div>
+              <div class="jinbox-box">
+                <div class="boxbaifenbi"
+                  :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+                </div>
+              </div>
+              <div class="jinboxbott">
+                {{ item.zxl || 0 }}{{ activeName | company }}
+              </div>
             </div>
           </div>
-        </div>
-        <div class="nulllist" v-if="ceratelist.list.length == 0">
-          <div class="imgboxc">
-            <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
-            <div class="nulltext">暂无数据</div>
+          <div class="nulllist" v-if="ceratelist.list.length == 0">
+            <div class="imgboxc">
+              <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
+              <div class="nulltext">暂无数据</div>
+            </div>
           </div>
         </div>
+        <div v-else id="xxx" style="width:100%;height:400px"></div>
       </div>
       <!-- <div class="you">
         <div class="title">
@@ -355,9 +367,24 @@
             margin-bottom: 16px;
           ">
           <div class="jinbox" v-for="(item, i) in Zxllist" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
+              <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> -->
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
+              </div>
+
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -396,9 +423,24 @@
             margin-bottom: 16px;
           ">
           <div class="jinbox" v-for="(item, i) in Zxllistchildren" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }">
+              </div>
+
+              <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> -->
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -416,6 +458,7 @@
 
 <script>
 import * as echarts from "echarts";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -474,6 +517,16 @@ export default {
       activeIndex: localStorage.getItem("activeIndex") || "", // 系统访问来源的下标
     };
   },
+  watch: {
+    ceratelist: {
+      handler(newVal) {
+        this.barStatistics(newVal.list)
+        console.log(newVal.list)
+      },
+      immediate: true,
+      deep: true // 表示开启深度监听
+    }
+  },
   mounted() {
     this.role = localStorage.getItem("orgType");
     if (this.role == 3) {
@@ -638,7 +691,132 @@ export default {
         };
       });
     },
+    barStatistics(e) {
+      let names = []
+      e.map(i => {
+        names.push(i.name)
+      })
+      let values = []
+      e.map(i => {
+        values.push(i.zxl1)
+      })
+      values = values.map((i, k) => {
+        switch (k) {
+          case 0:
+            return {
+              value: values[0],
+              itemStyle: {
+                color: '#E6625B'
+              }
+            }
+            break;
+          case 1:
+            return {
+              value: values[1],
+              itemStyle: {
+                color: '#FF981E'
+              }
+            }
+          case 2:
+            return {
+              value: values[2],
+              itemStyle: {
+                color: '#FFCC00'
+              }
+            }
+
+          default:
+            return {
+              value: values[2],
+              itemStyle: {
+                color: '#07B79D'
+              }
+            }
+            break;
+        }
+      })
+      // values[0] = {
+      //   value: values[0],
+      //   itemStyle: {
+      //     color: '#E6625B'
+      //   }
+      // }
+      // values[1] = {
+      //   value: values[1],
+      //   itemStyle: {
+      //     color: '#FF981E'
+      //   }
+      // }
+      // values[2] = {
+      //   value: values[2],
+      //   itemStyle: {
+      //     color: '#FFCC00'
+      //   }
+      // }
+
+      console.log(names)
+      console.log(values)
+
+
+      echarts.init(document.getElementById("xxx")).dispose(); // 销毁实例
+      let chartDom = document.getElementById('xxx');
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: names,
+          splitLine: { show: false },
+          axisTick: {
+            alignWithLabel: true
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: 'top'
+            },
+            data: values,
+            type: 'bar',
+            barCategoryGap: '70%',
+            itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                { offset: 0, color: '#9837dd' },                   //柱图渐变色
+                                { offset: 1, color: '#e23af5' },                   //柱图渐变色
+                            ]
+                        )
+                    },
+                },
+          }
+        ]
+      };
 
+      option && myChart.setOption(option);
+
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
     // 格式化时间
     formatDate(t) {
       if (!t) return;
@@ -878,32 +1056,10 @@ export default {
       var option;
 
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         legend: {
           data: [Strname],
-          bottom: "10",
+          top: true,
         },
         grid: {
           left: 10,
@@ -934,6 +1090,16 @@ export default {
             data: newline,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ],
       };
@@ -1025,29 +1191,7 @@ export default {
       let chartDom = document.getElementById("Pinspeak1");
       let myChart = echarts.init(chartDom);
       let option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         tooltip: {
           trigger: "axis",
           formatter: "{b0}: {c0}" + "%",
@@ -1113,6 +1257,16 @@ export default {
             data: newline,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ],
       };
@@ -1130,29 +1284,7 @@ export default {
       let chartDom = document.getElementById("Pinspeak2");
       let myChart = echarts.init(chartDom);
       let option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         tooltip: {
           trigger: "axis",
           formatter: "{b0}: {c0}" + "%",
@@ -1218,6 +1350,16 @@ export default {
             data: newline,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ],
       };
@@ -1335,14 +1477,26 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
+.sequenceNum {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  background: #E5F0FF;
+  border-radius: 15px;
+  color: #333333;
+}
+
 .box-center {
   width: 100%;
   padding: 15px;
   min-width: 1000px;
   padding-bottom: 100px;
 }
-.tabcard{
-    /deep/ .el-card__body {
+
+.tabcard {
+  /deep/ .el-card__body {
     padding: 8px;
     cursor: pointer;
   }
@@ -1425,6 +1579,7 @@ export default {
     color: #666 !important;
   }
 }
+
 .container {
   display: grid;
   grid-template-columns: repeat(5, 19%);
@@ -1442,14 +1597,35 @@ export default {
   font-size: 16px;
   color: #2c3542;
   margin-top: 20px;
+  padding-left: 4px;
 
   .jinboxtit {
-    width: 14%;
+    width: 12%;
     height: 18px;
     padding-right: 6px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+
+    .sequenceNum {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      background: #E5F0FF;
+      border-radius: 15px;
+      margin-right: 10px;
+      color: #333333;
+    }
+
+    .name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-left: 10px;
+    }
+
   }
 
   .jinbox-box {
@@ -1618,9 +1794,6 @@ export default {
   background: #2671e2;
 }
 
-.tophovese {
-  // color: #2671e2;
-}
 
 .app-top {
   width: 100%;
@@ -1678,6 +1851,7 @@ export default {
   .text1-2 {
     color: #333333;
     margin-top: 10px;
+    font-weight: bold;
   }
 }
 

src/views/Statistics/TheTeamCompared.vue

@@ -123,11 +123,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">团队总数</div>
             <div class="text1-2">{{ teamobj1.num || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ teamobj1.avg || 0 }}个</div>
           </div>
@@ -137,12 +137,24 @@
           style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj1.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}个</div>
           </div>
@@ -162,11 +174,11 @@
           <div class="text1">接待时长排名</div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">团队总数</div>
             <div class="text1-2">{{ teamobj2.num || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">
               {{ Math.floor(teamobj2.avg / 60) || 0 }}分钟
@@ -178,12 +190,25 @@
           style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj2.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}分钟</div>
           </div>
@@ -222,11 +247,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">团队总数</div>
             <div class="text1-2">{{ teamobj3.num || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ teamobj3.avg || 0 }}%</div>
           </div>
@@ -236,12 +261,25 @@
           style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj3.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -297,11 +335,11 @@
           </div>
         </div>
         <div class="hejisan">
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">团队总数</div>
             <div class="text1-2">{{ teamobj5.num || 0 }}个</div>
           </div>
-          <div class="sanbox1" style="width: 50%">
+          <div class="sanbox1" style="width: 50%;text-align: center;">
             <div class="text1-1">均值</div>
             <div class="text1-2">{{ teamobj5.avg || 0 }}次</div>
           </div>
@@ -311,12 +349,25 @@
           style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj5.list" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+                'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+              }">{{ i + 1 }}</span>
+             <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div
+              <!-- <div
                 class="boxbaifenbi"
                 :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              ></div> -->
+              <div class="boxbaifenbi" :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }"> </div>
+             
             </div>
             <div class="jinboxbott">{{ item.zxl }}次</div>
           </div>
@@ -933,6 +984,18 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
+
+.sequenceNum {
+      display: flex;
+      width: 24px;
+      height: 24px;
+      justify-content: center;
+      align-items: center;
+      background: #E5F0FF;
+      border-radius: 15px;
+      color: #333333;
+      margin-right: 10px;
+    }
 /* 添加table滚动条 */
 table {
   border-collapse: collapse;
@@ -1085,6 +1148,7 @@ tbody tr {
   .text1-2 {
     color: #333333;
     margin-top: 10px;
+    font-weight: bold;
   }
 }
 

src/views/Statistics/TrendAnalysis.vue

@@ -343,6 +343,8 @@
 import * as echarts from "echarts";
 import { mapGetters } from "vuex";
 import { exportMethodPost } from "@/util/util";
+
+import color from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -955,32 +957,10 @@ export default {
           trigger: "axis",
           formatter: "{b0}: {c0}" + "%",
         },
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: color.randomColor,
         legend: {
           data: ["起始时间"],
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,
@@ -1039,6 +1019,16 @@ export default {
             data: newline,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: color.randomColor },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ],
       };
@@ -1075,32 +1065,10 @@ export default {
             return src;
           },
         },
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: color.colorArr,
         legend: {
           data: ["起始时间", "对比时间"],
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,
@@ -1181,29 +1149,7 @@ export default {
       var myChart = echarts.init(chartDom);
       var option;
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: color.colorArr,
         tooltip: {
           trigger: "axis",
         },
@@ -1256,29 +1202,7 @@ export default {
       var myChart = echarts.init(chartDom);
       var option;
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: color.colorArr,
         tooltip: {
           trigger: "axis",
         },

src/views/Statistics/dataScreeAge.vue

@@ -561,6 +561,7 @@
 
 <script>
 import * as echarts from "echarts";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -998,6 +999,16 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
 
         ];
@@ -1081,6 +1092,16 @@ export default {
           data: arr1,
           type: "line",
           smooth: true,
+          areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
         }
       ];
       this.SwitchCARDS(arr, "echar2", timeDate, Strname);

src/views/Statistics/dataScreeOrg.vue

@@ -617,6 +617,7 @@
 
 <script>
 import * as echarts from "echarts";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -1053,6 +1054,16 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
 
         ];
@@ -1133,6 +1144,16 @@ export default {
           data: arr1,
           type: "line",
           smooth: true,
+          areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
         },
       ];
       this.SwitchCARDS(arr, "echar2", timeDate, Strname);
@@ -1190,35 +1211,13 @@ export default {
       var option;
 
       option = {
-        color: [
-          "#6F8EDC",
-          "#EE6666",
-          "#F98120",
-          "#1CC99E",
-          "#9474FB",
-          "#66AFF5",
-          "#FABD2B",
-          "#FFCF8F",
-          "#657292",
-          "#7A6A99",
-          "#BF5D52",
-          "#77B7E4",
-          "#E6A065",
-          "#9D5139",
-          "#C1AA88",
-          "#F87F7A",
-          "#F6CF74",
-          "#7F5506",
-          "#88BB9B",
-          "#6E99AA",
-          "#5789D0",
-        ],
+        color: colorTheme.colorArr,
         tooltip: {
           trigger: "axis",
         },
         legend: {
           data: Strname,
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,

src/views/Statistics/dataScreeSys.vue

@@ -713,6 +713,7 @@
 <script>
 import * as echarts from "echarts";
 import { getStore, setStore } from "@/util/store";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -1174,6 +1175,16 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
 
         ];
@@ -1263,6 +1274,16 @@ export default {
           data: arr1,
           type: "line",
           smooth: true,
+          areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
         },
       ];
       this.SwitchCARDS(arr, "echar2", timeDate, Strname);
@@ -1347,7 +1368,7 @@ export default {
         },
         legend: {
           data: Strname,
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,

src/views/Statistics/houseDataSys.vue

@@ -232,6 +232,7 @@
 <script>
 import * as echarts from "echarts";
 import { getStore, setStore } from "@/util/store";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -409,6 +410,16 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ];
         this.SwitchCARDS(arr, "main", timeDate, Strname);
@@ -656,7 +667,7 @@ export default {
         },
         legend: {
           data: Strname,
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,

src/views/Statistics/index.vue

@@ -164,6 +164,8 @@
 
 <script>
 import * as echarts from "echarts";
+
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -294,32 +296,14 @@ export default {
             objoptlis.push({ value: ice.total, name: ice.name });
           });
           var option = {
-            color: [
-              "#66AFF5",
-              "#FABD2B",
-              "#6F8EDC",
-              "#FFCF8F",
-              "#F98120",
-              "#1CC99E",
-              "#9474FB",
-              "#657292",
-              "#7A6A99",
-              "#BF5D52",
-              "#EE6666",
-              "#77B7E4",
-              "#E6A065",
-              "#9D5139",
-              "#C1AA88",
-              "#F87F7A",
-              "#F6CF74",
-              "#7F5506",
-              "#88BB9B",
-              "#6E99AA",
-              "#5789D0",
-            ],
+            color: colorTheme.colorArr,
             tooltip: {
               trigger: "item",
             },
+            legend:{
+              show:true,
+              bottom: "0",
+            },
             graphic: [
               {
                 type: "text",

src/views/Statistics/trend.vue

@@ -370,6 +370,7 @@
 <script>
 import * as echarts from "echarts";
 import topLogsVue from "../../page/index/top/top-logs.vue";
+import colorTheme from "../../util/theme.color"
 export default {
   data() {
     return {
@@ -521,6 +522,16 @@ export default {
             data: arr1,
             type: "line",
             smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: colorTheme.colorArr[0] },
+                  { offset: 1, color: "#fff" }
+                ]
+              ),
+              opacity: 0.1
+            }
           },
         ];
         this.SwitchCARDS(arr, "main", timeDate, Strname);
@@ -751,7 +762,7 @@ export default {
             ],
         legend: {
           data: Strname,
-          bottom: "10",
+          top: "10",
         },
         grid: {
           left: 10,

src/views/houseData/analyse.vue

@@ -46,7 +46,7 @@
           </el-select>
         </div>
         <!-- 项目 -->
-        <div style="margin-left: 26px" v-else-if="selValue == 2">
+        <div style="margin-left: 20px" v-else-if="selValue == 2">
           <el-select
             v-model="choicValue"
             @change="valuechange"
@@ -63,7 +63,7 @@
             </el-option>
           </el-select>
         </div>
-        <div style="margin-left: 26px" v-else>
+        <div style="margin-left: 20px" v-else>
           <el-select
             v-model="choicValue"
             @change="valuechange"
@@ -153,12 +153,22 @@
           style="min-height: 350px;padding: 0 0 20px 0; width: 94%; margin: 0 auto;"
         >
           <div class="jinbox" v-for="(item, i) in objList" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div
-                class="boxbaifenbi"
-                :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+              </div>
             </div>
             <div class="jinboxbott">{{ item.zxl }}</div>
           </div>
@@ -218,12 +228,22 @@
           style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in objList1" :key="i">
-            <div class="jinboxtit">{{ item.name }}</div>
+            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
+            <span class="sequenceNum" :style="{
+              'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#E5F0FF',
+              'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
+              'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
+            }">{{ i + 1 }}</span>
+            <div class="jinboxtit">
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
+                <span class="name">{{ item.name }}</span>
+              </el-tooltip>
+              <!-- <span class="name">{{ item.name }}</span> -->
+            </div>
             <div class="jinbox-box">
-              <div
-                class="boxbaifenbi"
-                :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              <div class="boxbaifenbi"
+                :style="{ 'background': i + 1 == 1 ? '#F54D3F' : i + 1 == 2 ? '#FF981E' : i + 1 == 3 ? '#FFCC00' : '#7BB1FF', 'width': item.zxl1 + '%' }">
+              </div>
             </div>
             <div class="jinboxbott">{{ item.zxl }}</div>
           </div>
@@ -1038,6 +1058,16 @@ export default {
 </script>
 
 <style lang="scss" scoped >
+.sequenceNum {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  background: #E5F0FF;
+  border-radius: 15px;
+  color: #333333;
+}
 .box-center {
   width: 100%;
   padding: 15px;
@@ -1223,6 +1253,12 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    .name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-left: 10px;
+    }
   }
   .jinbox-box {
     width: 75%;

vue.config.js

@@ -11,8 +11,8 @@
 // const url = 'http://81.70.55.170:9999' // 新测试服务器IP
 // const url = 'http://192.168.31.89:9999' //sh
 // const url = 'https://zanyong.hfju.com' // 正式域名
-// const url = 'http://81.70.55.170:9999' // 新测试
-const url = 'http://82.156.35.22:9999' // 新正式ip
+const url = 'http://81.70.55.170:9999' // 新测试
+// const url = 'http://82.156.35.22:9999' // 新正式ip
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']
 module.exports = {