update

lottery/jxs.html

@@ -744,11 +744,11 @@
         </div>
         <div class="box_connect">
           <div class="clientCharts_title">意向车型标签排名</div>
-          <div id="intentRankChart" style="width: 100%;height: 250px;"></div>
+          <div id="intentRankChart" style="width: 100%;height: 100%;"></div>
         </div>
         <div class="box_connect">
           <div class="clientCharts_title">已购车型标签排名</div>
-          <div id="buyRankChart" style="width: 100%;height: 250px;"></div>
+          <div id="buyRankChart" style="width: 100%;height: 100%;"></div>
         </div>
         <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
@@ -925,7 +925,7 @@
             <div class="clientCharts_title">聊天超时监测</div>
             <div class="clientCharts_title_right" @click="handleMemberReply">查看详情</div>
           </div>
-          <div id="timeOutTrendChart" style="width: 100%;height: 200px"></div>
+          <div id="timeOutTrendChart" style="width: 100%;height: 208px"></div>
         </div>
         <div class="box_connect">
           <div class="clientCharts_title">聊天排行榜</div>
@@ -981,7 +981,7 @@
         </div>
         <div class="box_connect">
           <div class="clientCharts_title">素材排行榜</div>
-          <div id="contentRank" style="width: 100%;;height: 250px;"></div>
+          <div id="contentRank" style="width: 100%;"></div>
         </div>
         <div class="data_tips">—— 每日5：00更新数据 ——</div>
       </div>
@@ -1019,7 +1019,7 @@
         pageTitle: '客户资产',
         showPicker: false,
         outletName: '全部', // 网点名称
-        outletId: this.outletId, // 网点id
+        outletId: null, // 网点id
 
         clientIndicators: [], // 客户资产-总数据
         pageStartTime: '',
@@ -1259,6 +1259,7 @@
         headers.append('token', this.token)
         headers.append('tenancyId', this.tenancyId)
         this.outletsList = []
+        this.outletsData = []
         if (this.noDealerIds()) {
           return
         }
@@ -1270,13 +1271,15 @@
         }).then(result => {
           let { data, code, msg } = result
           if (code === 1) {
+            this.outletsList = data || []
             this.outletsData = data && data.length > 0 ? data.map(item => item.name) : []
-            this.outletsData.unshift('全部')
           } else if (code === 10001) {
             this.loginOut()
           } else {
             vant.Toast.fail(msg)
           }
+        }).finally(() => {
+          this.outletsData.unshift('全部')
         })
       },
       onConfirm (val) {
@@ -1287,7 +1290,7 @@
         if (this.outletName === '全部') {
           this.outletId = null
         } else {
-          this.outletId = this.outletsList.find(item => item.name === this.outletName)?.id || null
+          this.outletId = this.outletsList.find(item => item.name === this.outletName).id || null
         }
         this.showPicker = false
         if (this.pageTitle === '客户资产') {
@@ -1320,7 +1323,7 @@
             this.getSaleIndicators() // 员工监测 - 销售进程
             this.getSaleRank() // 员工监测 - 销售统计排名
             this.getTimeOutTrendChart() // 员工监测 - 聊天超时监测
-            this.getChatRank // 员工监测 - 聊天统计排名
+            this.getChatRank() // 员工监测 - 聊天统计排名
             break
           case 4:
             this.pageTitle = '运营任务'
@@ -1369,7 +1372,11 @@
       // 客户资产-总数据（梯形图）
       funnelDraw() {
         let clientIndicators = this.clientIndicators
-        let funnelChart = echarts.init(document.getElementById('funnelChart'))
+        let funnelChart = echarts.getInstanceByDom(document.getElementById('funnelChart'))
+        if (funnelChart == null) {
+          funnelChart = echarts.init(document.getElementById('funnelChart'))
+        }
+
         window.addEventListener('resize', function () {
           funnelChart.resize()
         })
@@ -1572,7 +1579,11 @@
       },
       // 互动客户数、留资/报名客户数、邀约到店客户数、成交客户数（趋势图）
       labelChart() {
-          let labelChart = echarts.init(document.getElementById('labelChart'))
+          let labelChart = echarts.getInstanceByDom(document.getElementById('labelChart'))
+          if (labelChart == null) {
+            labelChart = echarts.init(document.getElementById('labelChart'))
+          }
+
           window.addEventListener('resize', function () {
               labelChart.resize()
           })
@@ -1620,6 +1631,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.lineDate,
           },
           yAxis: [
@@ -1627,12 +1643,14 @@
               type: 'value',
               min: 0,
               max: Math.max(...labelData),
-
               splitNumber: 5,
               interval: Math.max(...labelData) / 5,
 
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -1653,10 +1671,8 @@
               color: '#1677FF ',
               data: labelData,
               itemStyle: {
-                normal: {
-                  // 设置柱形图圆角 [左上角，右上角，右下角，左下角]
-                  barBorderRadius: [5, 5, 0, 0]
-                }
+                // 设置柱形图圆角 [左上角，右上角，右下角，左下角]
+                borderRadius: [5, 5, 0, 0]
               }
             }
           ],
@@ -1664,7 +1680,11 @@
       },
       // 销售顾问+服务顾问（趋势图）
       adviserChart() {
-        let adviserChart = echarts.init(document.getElementById('adviserChart'))
+        let adviserChart = echarts.getInstanceByDom(document.getElementById('adviserChart'))
+        if (adviserChart == null) {
+          adviserChart = echarts.init(document.getElementById('adviserChart'))
+        }
+
         window.addEventListener('resize', function () {
           adviserChart.resize()
         })
@@ -1698,6 +1718,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: '#666666',
+                fontSize: '8',
+            },
             data: this.lineDate,
           },
           yAxis: [
@@ -1705,12 +1730,14 @@
               type: 'value',
               min: 0,
               max: Math.max(...this.saleAdd, ...this.serveAdd) * 2,
-
               splitNumber: 5,
               interval: Math.max(...this.saleAdd, ...this.serveAdd) * 2 / 5,
 
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: '#222222',
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -1738,10 +1765,8 @@
               color: '#5CE56E ',
               data: this.serveAdd,
               itemStyle: {
-                normal: {
                   // 设置柱形图圆角 [左上角，右上角，右下角，左下角]
-                  barBorderRadius: [5, 5, 0, 0]
-                }
+                  borderRadius: [5, 5, 0, 0]
               }
             }
           ],
@@ -1822,7 +1847,12 @@
       },
       intentRankChart() {
         let intentRankData = this.intentRankData.sort((a, b) => a.clientNum - b.clientNum)
-        let rankChart = echarts.init(document.getElementById('intentRankChart'))
+        let rankChart = echarts.getInstanceByDom(document.getElementById('intentRankChart'))
+        if (rankChart == null) {
+          rankChart = echarts.init(document.getElementById('intentRankChart'))
+        }
+
+        rankChart.resize({ height: this.intentRankData.length * 50 + 20 })
         window.addEventListener('resize', function () {
           rankChart.resize()
         })
@@ -1840,11 +1870,18 @@
             bottom: '10%',
           },
           grid: {
-            left: '3%',
+            bottom: "0",
+            top: "0",
+            left: "0",
             containLabel: true,
           },
           xAxis: {
             type: 'value',
+            axisLabel: {
+                show: true,
+                color: '#666666',
+                fontSize: '8',
+            },
             splitLine: {
               show: true,
               lineStyle: {
@@ -1854,6 +1891,29 @@
           },
           yAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
+              formatter: (val) => {
+                let c = document.createElement("canvas");
+                const ctx = c.getContext("2d");
+                ctx.font = "8px"; // 设置画布内的字体，与设置的textStyle一致
+                const arr = val.split("");
+                arr.map((item) => ctx.measureText(item).width)
+                  .reduce((pre, next, index) => {
+                    const nLen = pre + next;
+                    if (nLen > 60) {
+                      arr[index - 1] += "\n";
+                      return next;
+                    } else {
+                      return nLen;
+                    }
+                  });
+                c = null;
+                return arr.join("");
+              }
+            },
             data: this.intentRankData.map(item => {
               return item.tagName
             }) || [],
@@ -1861,9 +1921,13 @@
           series: [
             {
               type: 'bar',
+              barWidth: 24,
+              barGap: 12,
               itemStyle: {
                 color: function (p) {
-                  return `hsl(215, 100%, ${54 + p.dataIndex * 8}%)`
+                  // 亮度随索引递增实现渐变
+                  const lightness = 94 - p.dataIndex * 8;
+                  return `hsl(127.9, 72.5%, ${Math.min(100, lightness)}%)`;
                 }
               },
               data: this.intentRankData.map(item => {
@@ -1908,8 +1972,12 @@
       },
       buyRankChart() {
         let buyRankData = this.buyRankData.sort((a, b) => a.clientNum - b.clientNum)
-        let rankChart = echarts.init(document.getElementById('buyRankChart'))
+        let rankChart = echarts.getInstanceByDom(document.getElementById('buyRankChart'))
+        if (rankChart == null) {
+          rankChart = echarts.init(document.getElementById('buyRankChart'))
+        }
 
+        rankChart.resize({ height: this.buyRankData.length * 50 + 20 })
         window.addEventListener('resize', function () {
           rankChart.resize()
         })
@@ -1927,11 +1995,18 @@
             bottom: '10%',
           },
           grid: {
-            left: '3%',
+            bottom: "0",
+            top: "0",
+            left: "0",
             containLabel: true,
           },
           xAxis: {
             type: 'value',
+            axisLabel: {
+                show: true,
+                color: '#666666',
+                fontSize: '8',
+            },
             splitLine: {
               show: true,
               lineStyle: {
@@ -1941,6 +2016,29 @@
           },
           yAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
+              formatter: (val) => {
+                let c = document.createElement("canvas");
+                const ctx = c.getContext("2d");
+                ctx.font = "8px"; // 设置画布内的字体，与设置的textStyle一致
+                const arr = val.split("");
+                arr.map((item) => ctx.measureText(item).width)
+                  .reduce((pre, next, index) => {
+                    const nLen = pre + next;
+                    if (nLen > 60) {
+                      arr[index - 1] += "\n";
+                      return next;
+                    } else {
+                      return nLen;
+                    }
+                  });
+                c = null;
+                return arr.join("");
+              }
+            },
             data: this.buyRankData.map(item => {
               return item.tagName
             }) || [],
@@ -1948,12 +2046,12 @@
           series: [
             {
               type: 'bar',
+              barWidth: 24,
+              barGap: 12,
               itemStyle: {
                 color: function (p) {
-                  const baseLightness = 54; // 基准亮度（最深色）
-                  const step = 8;           // 亮度步长
                   // 亮度随索引递增实现渐变
-                  const lightness = baseLightness + p.dataIndex * step;
+                  const lightness = 87 - p.dataIndex * 8;
                   return `hsl(215, 100%, ${Math.min(100, lightness)}%)`;
                 }
               },
@@ -2119,7 +2217,10 @@
       },
       // 聊天分析-总数据趋势图数据
       interactChart () {
-        let interactChart = echarts.init(document.getElementById('interactChart'))
+        let interactChart = echarts.getInstanceByDom(document.getElementById('interactChart'))
+        if (interactChart == null) {
+          interactChart = echarts.init(document.getElementById('interactChart'))
+        }
         window.addEventListener('resize', function () {
           interactChart.resize()
         })
@@ -2148,6 +2249,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.interactDate,
           },
           yAxis: [
@@ -2158,6 +2264,9 @@
               splitNumber: 5,
               interval: Math.max(...this.proactiveServe) / 5,
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2176,6 +2285,9 @@
               splitNumber: 5,
               interval: Math.max(...this.privateChat) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2194,6 +2306,9 @@
               splitNumber: 5,
               interval: Math.max(...this.groupMsgNum) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2241,7 +2356,11 @@
       },
       // 聊天分析-员工服务趋势图数据
       staffChart () {
-        let staffChart = echarts.init(document.getElementById('staffChart'))
+        let staffChart = echarts.getInstanceByDom(document.getElementById('staffChart'))
+        if (staffChart == null) {
+          staffChart = echarts.init(document.getElementById('staffChart'))
+        }
+
         window.addEventListener('resize', function () {
           staffChart.resize()
         })
@@ -2270,6 +2389,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.interactDate,
           },
           yAxis: [
@@ -2280,6 +2404,9 @@
               splitNumber: 5,
               interval: Math.max(...this.proactiveServe) / 5,
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2298,6 +2425,9 @@
               splitNumber: 5,
               interval: Math.max(...this.clientReply) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2316,6 +2446,9 @@
               splitNumber: 5,
               interval: Math.max(...this.clientReplyPercent) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2368,7 +2501,11 @@
       },
       // 聊天分析-客户咨询趋势图数据
       clientChart() {
-        let clientChart = echarts.init(document.getElementById('clientChart'))
+        let clientChart = echarts.getInstanceByDom(document.getElementById('clientChart'))
+        if (clientChart == null) {
+          clientChart = echarts.init(document.getElementById('clientChart'))
+        }
+
         window.addEventListener('resize', function () {
           clientChart.resize()
         })
@@ -2397,6 +2534,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.interactDate,
           },
           yAxis: [
@@ -2407,6 +2549,9 @@
               splitNumber: 5,
               interval: Math.max(...this.proactiveConsult) / 5,
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2425,6 +2570,9 @@
               splitNumber: 5,
               interval: Math.max(...this.memberReply) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2443,6 +2591,9 @@
               splitNumber: 5,
               interval: Math.max(...this.avgReplyDuration) / 5,
               axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2495,7 +2646,11 @@
       },
       // 聊天分析-消息舆情分析
       opinionChart () {
-        let opinionChart = echarts.init(document.getElementById('opinionChart'))
+        let opinionChart = echarts.getInstanceByDom(document.getElementById('opinionChart'))
+        if (opinionChart == null) {
+          opinionChart = echarts.init(document.getElementById('opinionChart'))
+        }
+
         window.addEventListener('resize', function () {
           opinionChart.resize()
         })
@@ -2528,24 +2683,20 @@
                   value: this.totalMsg,
                   name: '全部消息',
                   itemStyle: {
-                    normal: {
                       color: '#1677FF',
                       lineStyle: {
                         color: '#1677FF',
                       },
-                    },
                   },
                 },
                 {
                   value: this.privateMsg,
                   name: '单聊消息',
                   itemStyle: {
-                    normal: {
                       color: '#5CE56E',
                       lineStyle: {
                         color: '#5CE56E',
                       },
-                    },
                   },
 
                 },
@@ -2553,12 +2704,10 @@
                   value: this.groupMsg,
                   name: '群聊消息',
                   itemStyle: {
-                    normal: {
                       color: '#FFA64E',
                       lineStyle: {
                         color: '#FFA64E',
                       },
-                    },
                   },
 
                 }
@@ -2603,7 +2752,11 @@
         })
       },
       wordCloudChart () {
-        let wordCloudChart = echarts.init(document.getElementById('wordCloudChart'))
+        let wordCloudChart = echarts.getInstanceByDom(document.getElementById('wordCloudChart'))
+        if (wordCloudChart == null) {
+          wordCloudChart = echarts.init(document.getElementById('wordCloudChart'))
+        }
+
         window.addEventListener('resize', function () {
           wordCloudChart.resize()
         })
@@ -2694,7 +2847,11 @@
 
       },
       clientStepChart() {
-        let clientStepChart = echarts.init(document.getElementById('clientStepChart'))
+        let clientStepChart = echarts.getInstanceByDom(document.getElementById('clientStepChart'))
+        if (clientStepChart == null) {
+          clientStepChart = echarts.init(document.getElementById('clientStepChart'))
+        }
+
         window.addEventListener('resize', function () {
           clientStepChart.resize()
         })
@@ -2713,6 +2870,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.clientStepDate,
           },
           yAxis: [
@@ -2724,6 +2886,9 @@
               interval: Math.max(...this.clientStepNum) / 5,
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2741,12 +2906,10 @@
               type: 'line',
               color: '#1677FF',
               areaStyle: {
-                normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: 'rgba(22,119,255,0.43)' },
                     { offset: 1, color: 'rgba(22,119,255,0)' }
                   ])
-                }
               }, //填充区域样式
               data: this.clientStepNum,
               symbol: 'none', //去掉折线图中的节点
@@ -2829,11 +2992,15 @@
         })
       },
       timeOutTrendChart () {
-        let timeOutTrendChart = echarts.init(document.getElementById('timeOutTrendChart'))
-            window.addEventListener('resize', function () {
+        let timeOutTrendChart = echarts.getInstanceByDom(document.getElementById('timeOutTrendChart'))
+        if (timeOutTrendChart == null) {
+          timeOutTrendChart = echarts.init(document.getElementById('timeOutTrendChart'))
+        }
+
+        window.addEventListener('resize', function () {
           timeOutTrendChart.resize()
         })
-            timeOutTrendChart.setOption({
+        timeOutTrendChart.setOption({
           legend: {
             show: false,
           },
@@ -2848,6 +3015,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.timeOutDate,
           },
           yAxis: [
@@ -2859,6 +3031,9 @@
               interval: Math.max(...this.timeOutMember) / 5,
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -2876,12 +3051,10 @@
               type: 'line',
               color: '#FF4E4E',
               areaStyle: {
-                normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: 'rgba(255, 78, 78,0.43)' },
                     { offset: 1, color: 'rgba(255, 78, 78,0)' }
                   ])
-                }
               }, //填充区域样式
               data: this.timeOutMember,
               symbol: 'none', //去掉折线图中的节点
@@ -3190,11 +3363,14 @@
         })
       },
       taskCompleteChart() {
-        let timeOutTrendChart = echarts.init(document.getElementById('timeOutTrendChart'))
+        let taskCompleteChart = echarts.getInstanceByDom(document.getElementById('taskCompleteChart'))
+        if (taskCompleteChart == null) {
+          taskCompleteChart = echarts.init(document.getElementById('taskCompleteChart'))
+        }
         window.addEventListener('resize', function () {
-          timeOutTrendChart.resize()
+          taskCompleteChart.resize()
         })
-        timeOutTrendChart.setOption({
+        taskCompleteChart.setOption({
           legend: {
             show: false,
           },
@@ -3209,6 +3385,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.taskCompleteDate,
           },
           yAxis: [
@@ -3220,6 +3401,9 @@
               interval: Math.max(...this.taskCompletePercent) / 5,
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -3237,12 +3421,10 @@
               type: 'line',
               color: '#1677FF',
               areaStyle: {
-                normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: 'rgba(22,119,255,0.43)' },
                     { offset: 1, color: 'rgba(22,119,255,0)' }
                   ])
-                }
               }, //填充区域样式
               data: this.taskCompletePercent,
               symbol: 'none', //去掉折线图中的节点
@@ -3293,7 +3475,11 @@
         })
       },
       opInteractChart () {
-        let opInteractChart = echarts.init(document.getElementById('opInteractChart'))
+        let opInteractChart = echarts.getInstanceByDom(document.getElementById('opInteractChart'))
+        if (opInteractChart == null) {
+          opInteractChart = echarts.init(document.getElementById('opInteractChart'))
+        }
+
         window.addEventListener('resize', function () {
           opInteractChart.resize()
         })
@@ -3312,6 +3498,11 @@
           },
           xAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#666666",
+                fontSize: '8',
+            },
             data: this.opInteractDate,
           },
           yAxis: [
@@ -3323,6 +3514,9 @@
               interval: Math.max(...this.opInteractClient) / 5,
               position: 'left',
               axisLabel: {
+                  show: true,
+                  color: "#222222",
+                  fontSize: '8',
                 formatter: function (v) {
                   return v.toFixed(0) //0表示小数为0位，1表示1位小数，2表示2位小数
                 }
@@ -3340,12 +3534,10 @@
               type: 'line',
               color: '#FFA64E',
               areaStyle: {
-                normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: 'rgba(255, 166, 78 ,0.43)' },
                     { offset: 1, color: 'rgba(255, 166, 78 ,0)' }
                   ])
-                }
               }, //填充区域样式
               data: this.opInteractClient,
               symbol: 'none', //去掉折线图中的节点
@@ -3391,7 +3583,11 @@
       },
       contentRankChart() {
         let contentRankData = this.contentRankData.sort((a, b) => a.clientNum - b.clientNum)
-        let rankChart = echarts.init(document.getElementById('contentRank'))
+        let rankChart = echarts.getInstanceByDom(document.getElementById('contentRank'))
+        if (rankChart == null) {
+          rankChart = echarts.init(document.getElementById('contentRank'))
+        }
+        rankChart.resize({ height: this.contentRankData.length * 50 + 20 })
         window.addEventListener('resize', function () {
           rankChart.resize()
         })
@@ -3409,11 +3605,18 @@
             bottom: '10%',
           },
           grid: {
-            left: '3%',
+            bottom: "0",
+            top: "0",
+            left: "0",
             containLabel: true,
           },
           xAxis: {
             type: 'value',
+            axisLabel: {
+                show: true,
+                color: '#666666',
+                fontSize: '8',
+            },
             splitLine: {
               show: true,
               lineStyle: {
@@ -3423,6 +3626,29 @@
           },
           yAxis: {
             type: 'category',
+            axisLabel: {
+                show: true,
+                color: "#222222",
+                fontSize: '8',
+              formatter: (val) => {
+                let c = document.createElement("canvas");
+                const ctx = c.getContext("2d");
+                ctx.font = "8px"; // 设置画布内的字体，与设置的textStyle一致
+                const arr = val.split("");
+                arr.map((item) => ctx.measureText(item).width)
+                  .reduce((pre, next, index) => {
+                    const nLen = pre + next;
+                    if (nLen > 60) {
+                      arr[index - 1] += "\n";
+                      return next;
+                    } else {
+                      return nLen;
+                    }
+                  });
+                c = null;
+                return arr.join("");
+              }
+            },
             data: this.contentRankData.map(item => {
               return item.title
             }) || [],
@@ -3430,9 +3656,13 @@
           series: [
             {
               type: 'bar',
+              barWidth: 24,
+              barGap: 12,
               itemStyle: {
                 color: function (p) {
-                  return `hsl(215, 100%, ${54 + p.dataIndex * 8}%)`
+                  // 亮度随索引递增实现渐变
+                  const lightness = 87 - p.dataIndex * 8;
+                  return `hsl(215, 100%, ${Math.min(100, lightness)}%)`;
                 }
               },
               data: this.contentRankData.map(item => {