echarts样式

src/components/charts/Line.js

     const colorWithOpacity = op => `rgba(187,156,121, ${op})`
 
     const defaultOpt = {
-      color: [ colorWithOpacity(1) ],
-      xAxis: { type: 'category', boundaryGap: false },
-      yAxis: { type: 'value' },
+      color: [colorWithOpacity(1)],
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          textStyle: {
+            color: '#666'
+          }
+        }
+
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            color: '#666'
+          }
+        }
+      },
+      grid: {
+        left: '10%',
+        right: '8%',
+        bottom: '10%',
+        top: '6%',
+      },
       series: [],
     }
 
         symbolSize: 6,
         smooth: true,
         label: {
-            show: true,
-            formatter: '{@value}人'
+          show: true,
+          formatter: '{@value}人'
         },
         lineStyle: {
-            shadowColor: colorWithOpacity(0.5),
-            shadowBlur: 5,
-            shadowOffsetY: 7
+          shadowColor: colorWithOpacity(0.5),
+          shadowBlur: 5,
+          shadowOffsetY: 7
         },
         areaStyle: {
           color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [{
-                  offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
-              }, {
-                  offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
-              }],
-              global: false,
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
+            }, {
+              offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
+            }],
+            global: false,
           }
         },
       }],

src/components/charts/style.scss

 .map-container {
   position: absolute;
-  top: 0;
+  top: 80px;
   bottom: 0;
   left: 1vw;
   right: 0;
-  width:98vw;
-  height:600px;
+  width:100vw;
+  height:400px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/pages/person/customerAnalysis/analysis.js

       })
     })
   }
+  changeDailyMonth(inx) {
+    const { current } = this.state
+    const params = current == 0 ? 'new' : current == 1 ? 'follow' : 'visite'
+    if (inx == 0) {
+      getEchartDailyInfo(params).then(res => {
+        console.log(res, "res")
+        // let arr = []
+        // data.map((item, index) => {
+        //   arr.push({ img: item, sort: index })
+        // })
+        this.setState({
+        })
+      })
+    } else {
+      getEchartMonthInfo(params).then(res => {
+        console.log(res, "res")
+        this.setState({
+        })
+      })
+    }
+    this.setState({
+      checkedWhich: inx
+    })
+
+  }
 
   render() {
 
     const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
     const dailyMonth = ['日', '月']
-    const { sexInfo, chartInfo, checkedWhich } = this.state
+    const { sexInfo, chartInfo, checkedWhich, current } = this.state
 
     return (
       <View>
-        <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
-          <AtTabsPane current={this.state.current} index={0} >
+        <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+          <AtTabsPane current={current} index={0} >
             <View>
-              <View style="width:90vw;height:600rpx">
+              <View style="height:'40rpx;position: relative;">
                 <View className="daily-month" >
                   {
                     dailyMonth.map((item, index) => (
-                      <View className={checkedWhich == index ? 'checked' : 'item'}>
+                      <View className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
                         {item}
-                      </View>
-                    ))
+                      </View>))
                   }
-
                 </View>
+              </View>
+              <View style="width:100vw;height:530rpx">
                 <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 + '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>
-                  ))
+                {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>
-          <AtTabsPane current={this.state.current} index={1}>
+          <AtTabsPane current={current} index={1}>
             <View>
-              <LineChart />
+              <View style="height:'40rpx;position: relative;">
+                <View className="daily-month" >
+                  {
+                    dailyMonth.map((item, index) => (
+                      <View className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
+                        {item}
+                      </View>))
+                  }
+                </View>
+              </View>
+              <View style="width:100vw;height:520rpx">
+                <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 + '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>
-                  ))
+                {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>
-          <AtTabsPane current={this.state.current} index={2}>
+          <AtTabsPane current={current} index={2}>
             <View>
-              <LineChart />
+              <View style="height:'40rpx;position: relative;">
+                <View className="daily-month" >
+                  {
+                    dailyMonth.map((item, index) => (
+                      <View className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
+                        {item}
+                      </View>))
+                  }
+                </View>
+              </View>
+              <View style="width:100vw;height:520rpx">
+                <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 + '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>
-                  ))
+                {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>

src/pages/person/customerAnalysis/index.scss

   align-items: center;
   text-align: right;
   padding: 0 25px;
+  position: absolute;
+  right: 0;
   .item{
     width:76px;
     height:40px;
     font-size: 28px;
     text-align: center;
     margin: 0 15px;
+
   }
   .checked{
     width:76px;
     font-size: 28px;
     margin: 0 15px;
     text-align: center;
+  
   }
 }
 .tab-box{

src/pages/person/menus.js

       url: '/pages/person/customerAnalysis/index',
       icon: icons.homepage,
       extends: undefined,
-      userTypes: [ CONSULTANT],
+      userTypes: [CONSULTANT, CUSTOMER],
       style: '',
     },
     // {
       url: '/pages/agent/client/index',
       icon: icons.recommend,
       extends: undefined,
-      userTypes: [CUSTOMER,ESTATE_AGENT, CHANNEL_AGENT],
+      userTypes: [CUSTOMER, ESTATE_AGENT, CHANNEL_AGENT],
       style: '',
     },
     // {
       url: '/pages/agent/become/index',
       icon: icons.development,
       extends: undefined,
-      userTypes: [CUSTOMER,ESTATE_AGENT],
-      style: {color:'#888888'},
+      userTypes: [CUSTOMER, ESTATE_AGENT],
+      style: { color: '#888888' },
     },
     {
       name: '成为置业顾问',
       url: '',
       icon: icons.consultant,
       extends: undefined,
-      style: {color:'#888888'},
-      userTypes: [CUSTOMER,ESTATE_AGENT],
+      style: { color: '#888888' },
+      userTypes: [CUSTOMER, ESTATE_AGENT],
     },
 
   ]