修正图标id 重复不能渲染的故障

src/views/WhView.vue

@@ -54,18 +54,18 @@
         <!-- 24小时总服务人次趋势 -->
         <div class="gcins">
             <div class="gcins_title">24小时总服务人次趋势</div>
-            <div id="gcins_charts" style="height:16rem"></div>
+            <div ref="wgcins_charts" id="wgcins_charts" style="height:16rem"></div>
         </div>
 
         <!-- 各场馆服务人次趋势 -->
         <div class="gcgrs">
             <div class="gcgrs_title">各场馆服务人次趋势</div>
-            <div id="gc_charts" class="gcgrs_charts"></div>
+            <div ref="wgc_charts" id="wgc_charts" class="gcgrs_charts"></div>
         </div>
         <!-- 各场馆人数趋势 -->
         <div class="tsgbox">
             <div class="tsg_title">图书馆数据统计</div>
-            <div id="tsgchart" class="tsgc_charts"></div>
+            <div ref="tsgchart" id="tsgchart" class="tsgc_charts"></div>
         </div>
     </div>
 </template>
@@ -328,6 +328,7 @@ import * as echarts from 'echarts';
 import * as homeApi from '@/api/home'
 import { ecMaxVal, numGrow } from '@/utils/comm';
 
+let hws = null;
 export default {
     name: 'TycView',
     data() {
@@ -353,9 +354,6 @@ export default {
             zxlindata: [],
             // 图书馆借阅
             libleaData: [],
-            // ws
-            ws:null,
-
         }
     },
     mounted() {
@@ -366,12 +364,11 @@ export default {
         this.getWh24hdata()
         //
         this.whtdrs()
-        // this.gc_line()
+
         // 图书借阅信息
         this.libinfoData()
 
         // websocket 
-        this.ws = new WebSocket(publicConfig.WS_URL_WH);
         this.getsckdata()
 
     },
@@ -394,27 +391,18 @@ export default {
                 this.gkwhg = sgdata[2].incount
             });
         },
+        
         //  24 小时总服务人次趋势
         getWh24hdata() {
             homeApi.wh24ServiceTrends().then(res => {
-                // const whtdata = res.data.data
+                const temcgData = res.data.data   
-                // this.wh24xdata = whtdata.dkeys
+                
-                // this.wh24ydata = whtdata.dvalue
-                const temcgData = res.data.data
-                // 24 小时
                 const vkdata = new Array;
-                const vvdata = new Array;
-                // 
-                const dkeys = temcgData.dkeys
-                dkeys.forEach(function(item,idx){
-                    vvdata.push( item)
-                });
-
                 vkdata.push({
-                     xname: dkeys,
+                    xname: temcgData.dkeys.slice(-8, temcgData.dkeys.length),
-                    xval:  vvdata
+                    xval:  temcgData.dvalue.slice(-8, temcgData.dvalue.length),
+                    mxarr: ecMaxVal(temcgData.dvalue.slice(-8, temcgData.dvalue.length))
                 })
-
                 this.ecbardata = vkdata
                 // do line
                 this.cgsf_line()
@@ -423,7 +411,8 @@ export default {
         // 山峰图---24小时总服务人次趋势
         // 24H 服务人次绘制柱形图
         cgsf_line() {
-            var chartDom = document.getElementById('gcins_charts');
+            //var chartDom = document.getElementById('wgcins_charts');
+            var chartDom = this.$refs.wgcins_charts
             var myChart = echarts.init(chartDom);
             var option;
 
@@ -446,9 +435,6 @@ export default {
                 },
                 xAxis: [{
                     data: this.ecbardata[0].xname,
-                    // data: [
-                    //   '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
-                    // ],
                     axisLine: {
                         lineStyle: {
                             color: '#0095FF',
@@ -538,7 +524,9 @@ export default {
                     type: 'bar',
                     barWidth: '10%',
                     barGap: '-100%',
-                    data: ecMaxVal(this.ecbardata[0].xval),
+                    //data: ecMaxVal(Object.values(this.ecbardata[0].xval)),
+                    data: this.ecbardata[0].mxarr,
+                    //data: ecMaxVal(this.ecbardata[0].xval),
                     //data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
                     itemStyle: {
                         normal: {
@@ -563,7 +551,6 @@ export default {
         // 今日人流
         whtdrs() {
             homeApi.whtdrs().then(res => {
-                console.log("whtd", res)
                 // get allTimeData
                 const tmpdata = res.data.data
                 // X 轴的名称字段
@@ -574,7 +561,6 @@ export default {
                     const list = item.list
                     darr.push(list.dvalue)
                 })
-                // console.log(darr)
 
                 this.zxlindata = xarr
                 this.zxliddata = darr
@@ -593,7 +579,8 @@ export default {
         },
         // 图书馆
         tsg_line() {
-            var chartDom = document.getElementById("tsgchart");
+            var chartDom = this.$refs.tsgchart;
+            // var chartDom = document.getElementById("tsgchart");
             var myChart = echarts.init(chartDom);
             var option;
 
@@ -839,15 +826,17 @@ export default {
         // 场馆人流趋势绘制线图
         // 场馆人流趋势绘制线图
         cg_line() {
+
             let that = this;
-            var chartDom = document.getElementById("gc_charts");
+            var chartDom = this.$refs.wgc_charts;
+            // var chartDom = document.getElementById("wgc_charts");
             var myChart = echarts.init(chartDom);
 
             var option
             var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
             var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
-            var name = this.zxlindata.slice(-10, this.zxlindata.length)
+            var name = that.zxlindata.slice(-10, that.zxlindata.length)
-            var data = this.zxliddata.slice(-10, this.zxliddata.length)
+            var data = that.zxliddata.slice(-10, that.zxliddata.length)
 
             var series = [];
             for (var i = 0; i < data.length; i++) {
@@ -988,14 +977,14 @@ export default {
         // 从ws 中实时获取数据
         getsckdata() {
             let that = this;
-
+            hws = new WebSocket(publicConfig.WS_URL_WH);
-            this.ws.onopen = function () {
+            hws.onopen = function () {
                 // console.log("ws connected success!")
             };
-            this.ws.onclose = function (event) {
+            hws.onclose = function (event) {
                 // console.log('WebSocket连接已关闭');
             };
-            this.ws.onmessage = (e) => {
+            hws.onmessage = (e) => {
                 var jstr = JSON.parse(e.data);
                 if (!jstr) {
                     return;
@@ -1054,7 +1043,7 @@ export default {
 
     },
     beforeUnmount() {
-        this.ws.close();
+        hws.close();
     }
 }
 </script>