本地无数据兼容

src/views/cultrue/index.vue

@@ -592,7 +592,7 @@ export default {
           return arr;
         }
 
-        console.log(getSymbolData(data), '-----');
+        // console.log(getSymbolData(data), '-----');
         option = {
           // backgroundColor: '#000000',
           grid: {

src/views/index.vue

@@ -502,164 +502,6 @@ export default {
       var chartDom = document.getElementById("kl-line");
       var option;
       
-      var xData = this.rsqsXData;
-      var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00']
-
-      var data = this.rsqsData_z;
-
-      var series = [];
-      for (var i = 0; i < data.length; i++) {
-        // console.log(gcolor[i])
-
-        series.push({
-          name: this.rsqsDataName[i],
-          type: "line",
-          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
-          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-          smooth: true, //是否平滑曲线显示
-          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: gcolor[i]
-              }, {
-                offset: 0.8,
-                 color: '#fff',
-              }], false),
-              // shadowColor: 'rgba(255,255,255, 0.1)',
-              shadowBlur: 10,
-              opacity: 0.3,
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: gcolor[i],
-              lineStyle: {
-                width: 1,
-                type: 'solid' //'dotted'虚线 'solid'实线
-              },
-              borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color
-              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
-              barBorderRadius: 0,
-              label: {
-                show: false,
-              },
-              opacity: 0.5,
-            }
-          },
-          data: data[i],
-
-        })
-      }
-
-      // setting option
-      option = {
-        // backgroundColor: "#141f56",
-        legend: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          itemGap: 15,
-          itemWidth: 15,
-          textStyle: {
-            color: '#fff',
-            fontSize: '14'
-          },
-          data: name
-        },
-        title: {
-          // text: "负面言论分领域趋势",
-          textStyle: {
-            color: '#fff',
-            fontSize: '22',
-            fontWeight: 'normal',
-          },
-          subtextStyle: {
-            color: '#90979c',
-            fontSize: '16',
-
-          },
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
-          backgroundColor: '#000', // 背景
-          padding: [8, 10], //内边距
-          extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影
-        },
-        grid: {
-          borderWidth: 0,
-          top: 10,
-          bottom: 20,
-          right: 0,
-          left: 50,
-          textStyle: {
-            color: "#fff"
-          }
-        },
-        xAxis: [{
-          type: "category",
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#0B0765',
-            }
-          },
-          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
-          axisTick: {
-            show: false
-          },
-          splitArea: {
-            show: false
-          },
-          axisLabel: {
-            inside: false,
-            textStyle: {
-              color: '#FFFFFF',
-              fontWeight: 'normal',
-              fontSize: '12',
-            },
-          },
-          data: xData,
-        }],
-        yAxis: {
-          type: 'value',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#0B0765',
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#0B0765',
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#0095FF',
-              fontWeight: 'normal',
-              fontSize: '12',
-            },
-            formatter: '{value}',
-          },
-        },
-        series: series,
-      }
       function run(myChart){
         // 获取新数据-处理
         that.getGcgNumDatas();
@@ -671,8 +513,6 @@ export default {
 
           var series = [];
           for (var i = 0; i < data.length; i++) {
-            // console.log(gcolor[i])
-
             series.push({
               name: that.rsqsDataName[i],
               type: "line",
@@ -714,18 +554,121 @@ export default {
 
             })
           }
-          myChart.setOption({
-            xAxis: [{data: xData}],
-            series: series
-          });
-        }, 2000);
+          // setting option
+          option = {
+            // backgroundColor: "#141f56",
+            legend: {
+              top: 0,
+              right: 0,
+              bottom: 0,
+              itemGap: 15,
+              itemWidth: 15,
+              textStyle: {
+                color: '#fff',
+                fontSize: '14'
+              },
+              data: name
+            },
+            title: {
+              // text: "负面言论分领域趋势",
+              textStyle: {
+                color: '#fff',
+                fontSize: '22',
+                fontWeight: 'normal',
+              },
+              subtextStyle: {
+                color: '#90979c',
+                fontSize: '16',
+
+              },
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+                lineStyle: {
+                  color: '#57617B'
+                }
+              },
+              formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
+              backgroundColor: '#000', // 背景
+              padding: [8, 10], //内边距
+              extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影
+            },
+            grid: {
+              borderWidth: 0,
+              top: 10,
+              bottom: 20,
+              right: 0,
+              left: 50,
+              textStyle: {
+                color: "#fff"
+              }
+            },
+            xAxis: [{
+              type: "category",
+              axisLine: {
+                show: false,
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: '#0B0765',
+                }
+              },
+              boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+              axisTick: {
+                show: false
+              },
+              splitArea: {
+                show: false
+              },
+              axisLabel: {
+                inside: false,
+                textStyle: {
+                  color: '#FFFFFF',
+                  fontWeight: 'normal',
+                  fontSize: '12',
+                },
+              },
+              data: xData,
+            }],
+            yAxis: {
+              type: 'value',
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#0B0765',
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: '#0B0765',
+                }
+              },
+              axisLabel: {
+                textStyle: {
+                  color: '#0095FF',
+                  fontWeight: 'normal',
+                  fontSize: '12',
+                },
+                formatter: '{value}',
+              },
+            },
+            series: series,
+          }
+          option && myChart.setOption(option);
+        }, 200);
       }
       setTimeout(()=>{
         var myChart = echarts.init(chartDom);
-        option && myChart.setOption(option);
+        run(myChart);
         setInterval(function () {
           myChart.clear();
-          option && myChart.setOption(option);
           run(myChart);
         }, 3000);
       }, 200)
@@ -786,19 +729,19 @@ export default {
       let that = this
       homeApi.allInfoDatas().then(res => {
         // return;//Cannot read properties of undefined (reading 'returnData')
-        that.ssjgNumDatas = res.data.returnData
-        console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
-        that.ssjgNumDatas.forEach(item => {
-          let proportion = parseInt(item.proportion)
-          if (proportion >= 80 && proportion <= 90) {
-            this.$refs.proportionbox.addClass('rbrate2')
-          }
-          if (proportion > 90) {
-            this.$refs.proportionbox.addClass('rbrate3')
-          }
-        })
-
-
+        if(res.data){
+          that.ssjgNumDatas = res.data.returnData
+          console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
+          that.ssjgNumDatas.forEach(item => {
+            let proportion = parseInt(item.proportion)
+            if (proportion >= 80 && proportion <= 90) {
+              this.$refs.proportionbox.addClass('rbrate2')
+            }
+            if (proportion > 90) {
+              this.$refs.proportionbox.addClass('rbrate3')
+            }
+          })
+        }
       });
     },
 

src/views/ty/index.vue

@@ -62,11 +62,11 @@
           <div class="c_title">24小时进馆人数</div>
           <div class="c_l" id="animationA"></div>
           <div class="c_r">
-            <span class="c_r_num">{{ cgdata[0].gval }}</span>
+            <span class="c_r_num">{{ cgdata[0]&&cgdata[0].gval }}</span>
             <span class="c_r_txt">体育场</span>
-            <span class="c_r_num">{{ cgdata[1].gval }}</span>
+            <span class="c_r_num">{{ cgdata[1]&&cgdata[1].gval }}</span>
             <span class="c_r_txt">体育馆</span>
-            <span class="c_r_num">{{ cgdata[2].gval }}</span>
+            <span class="c_r_num">{{ cgdata[2]&&cgdata[2].gval }}</span>
             <span class="c_r_txt">游泳场馆</span>
           </div>
 
@@ -96,7 +96,7 @@
                   </span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <span> {{ cgdata[0].gname }}</span>
+                  <span> {{ cgdata[0]&&cgdata[0].gname }}</span>
                 </div>
               </div>
               <div class="venue_proportion">
@@ -111,7 +111,7 @@
                   </span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <span>{{ cgdata[1].gname }}</span>
+                  <span>{{ cgdata[1]&&cgdata[1].gname }}</span>
                 </div>
               </div>
               <div class="venue_proportion">
@@ -126,7 +126,7 @@
                   </span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <span>{{ cgdata[2].gname }}</span>
+                  <span>{{ cgdata[2]&&cgdata[2].gname }}</span>
                 </div>
               </div>
 
@@ -441,17 +441,18 @@ export default {
     },
 
     ty_bar3() {
+      let that = this;
       var chartDom = document.getElementById("pcgchart2");
 
       var option
-      var xData = this.rsqsXData;
+      var xData = that.rsqsXData;
       var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
-      var name = this.rsqsDataName
-      // console.log(this.rsqsDataName, 'this.rsqsDataName')
+      var name = that.rsqsDataName
+      // console.log(that.rsqsDataName, 'that.rsqsDataName')
       //  = ['体育场', '体育馆', '游泳场馆'];
-      var data = this.rsqsDataAll;
+      var data = that.rsqsDataAll;
       let iconData = [];
-      this.rsqsDataName.forEach((item, index)=>{
+      that.rsqsDataName.forEach((item, index)=>{
         if(index==0){
           iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]})
         }else if(index==1){
@@ -619,12 +620,11 @@ export default {
         series: series,
       }
       function run(myChart){
-        let that = this;
         // 获取新数据-处理
         // that.getGcgNumDatas();
         setTimeout(() => {
           // var xData = this.rsqsXData;
-          var data = this.rsqsDataAll;
+          var data = that.rsqsDataAll;
 
           var series = [];
           for (var i = 0; i < data.length; i++) {