客户分析无数据时给出默认图

src/pages/person/customerAnalysis/analysis.js

@@ -10,6 +10,7 @@ import { savePoint, updatePoint } from '@services/common'
 import { querySexInfo, getEchartDailyInfo, getEchartMonthInfo } from '@services/person'
 import { connect } from '@tarojs/redux'
 import LineChart from "../../../components/charts/Line";
+const nothing = require('@assets/person/nothing.png')
 
 
 @connect(({ user, city }) => ({ user, city }))
@@ -136,7 +137,7 @@ export default class analysis extends Taro.Component {
       } else if (params == 'follow') {
         getEchartMonthInfo(params).then(res => {
           this.setState({
-            chartInfo2:  res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
+            chartInfo2: res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
           })
         })
       } else {
@@ -165,77 +166,136 @@ export default class analysis extends Taro.Component {
         <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)} swipeable="false">
           <AtTabsPane current={current} index={0} >
             <View>
-              <View style="height:40rpx;position: relative;margin-top:20rpx">
-                <View className="daily-month" >
-                  {
-                    dailyMonth.map((item, index) => (
-                      <View key={index + 'daily'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
-                        {item}
-                      </View>))
-                  }
+              {
+                chartInfo.length &&
+                <View>
+                  <View style="height:40rpx;position: relative;margin-top:20rpx">
+                    <View className="daily-month" >
+                      {
+                        dailyMonth.map((item, index) => (
+                          <View key={index + 'daily'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
+                            {item}
+                          </View>))
+                      }
+                    </View>
+                  </View>
+                  <View style="width:100vw;height:530rpx;position: relative;">
+                    <LineChart source={chartInfo} />
+                  </View>
                 </View>
-              </View>
-              <View style="width:100vw;height:530rpx;position: relative;">
-                <LineChart source={chartInfo} />
-              </View>
-              <View style="height:20rpx;background:#f5f5f5;"> </View>
-              <View style="padding: 40rpx;">
-                <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
-                {sexInfo.map((item, index) => (
-                  <View key={index + 'sex1'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
-                ))
-                }
-              </View>
+              }
+              {
+                !chartInfo.length &&
+                <View >
+                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
+                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
+                    暂无数据展示
+                </View>
+                </View>
+              }
+
+              {
+                sexInfo.length &&
+                <View>
+                  <View style="height:20rpx;background:#f5f5f5;"> </View>
+                  <View style="padding: 40rpx;">
+                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
+                    {sexInfo.map((item, index) => (
+                      <View key={index + 'sex1'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
+                    ))
+                    }
+                  </View>
+                </View>
+              }
+
             </View>
           </AtTabsPane>
           <AtTabsPane current={current} index={1}>
             <View>
-              <View style="height:40rpx;position: relative;margin-top:20rpx">
-                <View className="daily-month" >
-                  {
-                    dailyMonth.map((item, index) => (
-                      <View key={index + 'month'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
-                        {item}
-                      </View>))
-                  }
+              {chartInfo2.length &&
+                <View>
+                  <View style="height:40rpx;position: relative;margin-top:20rpx">
+                    <View className="daily-month" >
+                      {
+                        dailyMonth.map((item, index) => (
+                          <View key={index + 'month'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
+                            {item}
+                          </View>))
+                      }
+                    </View>
+                  </View>
+                  <View style="width:100vw;height:530rpx;position: relative;">
+                    <LineChart source={chartInfo2} />
+                  </View>
+                </View>
+              }
+              {
+                !chartInfo2.length &&
+                <View >
+                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
+                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
+                    暂无数据展示
                 </View>
-              </View>
-              <View style="width:100vw;height:530rpx;position: relative;">
-                <LineChart source={chartInfo2} />
-              </View>
-              <View style="height:20rpx;background:#f5f5f5;"> </View>
-              <View style="padding: 40rpx;">
-                <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
-                {sexInfo.map((item, index) => (
-                  <View key={index + 'sex2'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
-                ))
-                }
-              </View>
+                </View>
+              }
+
+              {
+                sexInfo.length &&
+                <View>
+                  <View style="height:20rpx;background:#f5f5f5;"> </View>
+                  <View style="padding: 40rpx;">
+                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
+                    {sexInfo.map((item, index) => (
+                      <View key={index + 'sex2'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
+                    ))
+                    }
+                  </View>
+                </View>
+              }
             </View>
           </AtTabsPane>
           <AtTabsPane current={current} index={2}>
             <View>
-              <View style="height:40rpx;position: relative;margin-top:20rpx">
-                <View className="daily-month" >
-                  {
-                    dailyMonth.map((item, index) => (
-                      <View key={index + 'day'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
-                        {item}
-                      </View>))
-                  }
+              {
+                chartInfo3.length &&
+                <View>
+                  <View style="height:40rpx;position: relative;margin-top:20rpx">
+                    <View className="daily-month" >
+                      {
+                        dailyMonth.map((item, index) => (
+                          <View key={index + 'day'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
+                            {item}
+                          </View>))
+                      }
+                    </View>
+                  </View>
+                  <View style="width:100vw;height:530rpx;position: relative;">
+                    <LineChart source={chartInfo3} />
+                  </View>
+                </View>
+              }
+              {
+                !chartInfo3.length &&
+                <View >
+                  <Image style="width: 320rpx;height: 260rpx;margin: 60rpx auto 20rpx auto;display:block" src={nothing} />
+                  <View style="text-align:center;color:#999;font-size:30rpx;margin-bottom:100rpx;">
+                    暂无数据展示
+                </View>
+                </View>
+              }
+              {
+                sexInfo.length &&
+                <View>
+                  <View style="height:20rpx;background:#f5f5f5;"> </View>
+                  <View style="padding: 40rpx;">
+                    <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
+                    {sexInfo.map((item, index) => (
+                      <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
+                    ))
+                    }
+                  </View>
                 </View>
-              </View>
-              <View style="width:100vw;height:530rpx;position: relative;">
-                <LineChart source={chartInfo3} />
-              </View>
-              <View style="height:20rpx;background:#f5f5f5;"> </View>
-              <View style="padding: 40rpx;">
-                <View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
-                {sexInfo.map((item, index) => (
-                  <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
-                ))
-                }
-              </View>
+              }
             </View>
           </AtTabsPane>
         </AtTabs>