echarts

src/app.scss

     transform: translateY(0);
     opacity: 1;
   }
+}
+.at-progress{
+  display: flex;
+  align-items: center;
+  margin-top:20px;
+  .at-progress__outer{
+    width: 480px;
+    background-color: #f5f5f5;
+    border-radius:8px;
+    height: 12px;
+    margin-right: 20px;
+    .at-progress__outer-inner-background{
+      border-radius:8px;
+    }
+    .at-progress__content{
+      font-size: 32px;
+      color: #666;
+    }
+  }
 }

src/components/AddChart.js

-import Taro, { Component } from "@tarojs/taro";
-import * as echarts from "./ec-canvas/echarts";
-function setChartData(chart, data) {
-  let option = {
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "shadow",
-        textStyle: {
-          color: "#fff"
-        }
-      },
-    },
-    grid: {
-        "borderWidth": 0,
-        "top": 110,
-        "bottom": 95,
-        textStyle: {
-            color: "#fff"
-        }
-    },
-    dataZoom: [
-      {
-        type: 'slider',
-        start: 0,
-        show: false,
-        end: 60,
-      },
-      {
-        type: 'inside',
-        start: 0,
-        end: 60,
-        filterMode: 'filter',
-      },
-    ],
-    xAxis: [{
-        type: "category",
-        axisLine: {
-          lineStyle: {
-            color: '#90979c'
-          }
-        },
-        splitLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        splitArea: {
-          show: false
-        },
-        axisLabel: {
-          interval: 0,
-        },
-        data: [1,2,3,4,5,6,7,8,9,10,11,12],
-    }],
-    yAxis: [{
-      type: "value",
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#90979c'
-        }
-      },
-      axisTick: {
-          show: false
-      },
-      axisLabel: {
-          interval: 0,
-      },
-      splitArea: {
-          show: false
-      },
-    }],
-    series: [
-      {
-        name: "女",
-        type: "bar",
-        stack: "总量",
-        barWidth: 10,
-        label: {
-          normal: {
-            show: false,
-            position: 'top',
-            color: '#000'
-          }
-        },
-        itemStyle: {
-          normal: {
-            barBorderRadius: 20,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: '#00cefc'
-            }, {
-              offset: 1,
-              color: '#00cefc'
-            }]),
-          }
-        },
-        data: data.barData,
-      },
-      {
-        name: "男",
-        type: "line",
-        stack: "总量",
-        symbolSize: 10,
-        symbol:'circle',
-        itemStyle: {
-          normal: {
-            color: "green",
-            barBorderRadius: 0,
-            label: {
-              show: false,
-              position: "bottom",
-            }
-          }
-        },
-        data: data.lineData
-      },
-    ]
-  }
-  chart.setOption(option);
-}
-
-export default class AddChart extends Component {
-  config = {
-    usingComponents: {
-      "ec-canvas": "./ec-canvas/ec-canvas"
-    }
-  };
-
-  constructor(props) {
-    super(props);
-  }
-
-  state = {
-    ec: {
-      lazyLoad: true
-    }
-  };
-
-  refresh(data) {
-    this.Chart.init((canvas, width, height) => {
-      const chart = echarts.init(canvas, null, {
-        width: width,
-        height: height
-      });
-      setChartData(chart, data);
-      return chart;
-    });
-  }
-
-  refChart = node => (this.Chart = node);
-
-  render() {
-    return (
-      <ec-canvas
-        ref={this.refChart}
-        canvas-id="mychart-area"
-        ec={this.state.ec}
-      />
-    );
-  }
-}

src/components/LineChart.js

-import Taro, { Component } from "@tarojs/taro";
-import * as echarts from "./ec-canvas/echarts";
-
-function setChartData(chart, data) {
-  let option = {
-    color: ['#3398DB'],
-    xAxis : [
-      {
-        type: 'category',
-        data: [],
-        axisTick: {
-          alignWithLabel: true
-        }
-      }
-    ],
-    yAxis : [
-      {
-        type : 'value'
-      }
-    ],
-    series : []
-  };
-  if (data && data.dimensions && data.measures) {
-    option.xAxis[0].data = data.dimensions.data
-    option.series = data.measures.map(item => {
-      return {
-        ...item,
-        type:'line',
-      }
-    })
-  }
-  chart.setOption(option);
-}
-
-export default class LineChart extends Component {
-  config = {
-    usingComponents: {
-      "ec-canvas": "./ec-canvas/ec-canvas"
-    }
-  };
-
-  constructor(props) {
-    super(props);
-  }
-
-  state = {
-    ec: {
-      lazyLoad: true
-    }
-  };
-
-  refresh(data) {
-    this.Chart.init((canvas, width, height) => {
-      const chart = echarts.init(canvas, null, {
-        width: width,
-        height: height
-      });
-      setChartData(chart, data);
-      return chart;
-    });
-  }
-
-  refChart = node => (this.Chart = node);
-
-  render() {
-    return (
-      <ec-canvas
-        ref={this.refChart}
-        canvas-id="mychart-area"
-        ec={this.state.ec}
-      />
-    );
-  }
-}

src/components/MoveChart.js

-import Taro, { Component } from "@tarojs/taro";
-import * as echarts from "./ec-canvas/echarts";
-
-function setChartData(chart, data) {
-  let option = {
-    tooltip: {
-    },
-    color: ['#3398DB'],
-    xAxis : [
-      {
-        type: 'category',
-        data: [],
-        axisTick: {
-          alignWithLabel: true
-        }
-      }
-    ],
-    dataZoom: [
-      {
-        type: 'slider',
-        start: 0,
-        show: false,
-        end: 50,
-      },
-      {
-        type: 'inside',
-        start: 0,
-        end: 50,
-        filterMode: 'filter',
-      },
-    ],
-    yAxis : [
-      {
-        type : 'value'
-      }
-    ],
-    series : []
-  };
-  if (data && data.dimensions && data.measures) {
-    option.xAxis[0].data = data.dimensions.data
-    option.series = data.measures.map(item => {
-      return {
-        ...item,
-        type:'bar',
-      }
-    })
-  }
-  chart.setOption(option);
-}
-
-export default class MoveChart extends Component {
-  config = {
-    usingComponents: {
-      "ec-canvas": "./ec-canvas/ec-canvas"
-    }
-  };
-
-  constructor(props) {
-    super(props);
-  }
-
-  state = {
-    ec: {
-      lazyLoad: true
-    }
-  };
-
-  refresh(data) {
-    this.Chart.init((canvas, width, height) => {
-      const chart = echarts.init(canvas, null, {
-        width: width,
-        height: height
-      });
-      setChartData(chart, data);
-      return chart;
-    });
-  }
-
-  refChart = node => (this.Chart = node);
-
-  render() {
-    return (
-      <ec-canvas
-        ref={this.refChart}
-        canvas-id="mychart-area"
-        ec={this.state.ec}
-      />
-    );
-  }
-}

src/constants/api.js

 export const API_VISIT_RECORD = resolvePath('taPersonVisitRecord')
 export const API_ACTIVITY_LIST_CUSTOMER = resolvePath('customer/activity/list')
 export const API_FOLLOW_LIST = resolvePath('taCustomerFollowUpRecord')
+export const API_SEX_INFO = resolvePath('genderStatistic')

src/pages/Line/Line.js

-import Taro, { Component } from "@tarojs/taro";
-import { View } from "@tarojs/components";
-import LineChart from '../../components/LineChart'
-import "./index.scss";
-
-export default class Line extends Component {
-  config = {
-    navigationBarTitleText: "折线图示例"
-  };
-  componentDidMount() {
-    const chartData = {
-      dimensions: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      measures: [{
-        data: [10, 52, 200, 334, 390, 330, 220]
-      }]
-    }
-    this.lineChart.refresh(chartData);
-  }
-  refLineChart = (node) => this.lineChart = node
-
-  render() {
-    return (
-      <View className="line-chart">
-        <LineChart ref={this.refLineChart} />
-      </View>
-    );
-  }
-}

src/pages/Line/index.scss

-.line-chart {
-  width: 100%;
-  height: 100vh;
-}

src/pages/More/More.js

-import Taro, { Component } from "@tarojs/taro";
-import { View } from "@tarojs/components";
-import MoveChart from '../../components/MoveChart'
-import LineChart from '../../components/LineChart'
-import "./index.scss";
-
-
-export default class More extends Component {
-  config = {
-    navigationBarTitleText: "可移动图表示例"
-  };
-  componentDidMount() {
-    const chartData = {
-      dimensions: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      },
-      measures: [{
-        data: [10, 52, 200, 334, 390, 330, 220, 334, 390, 330, 220, 10, 52, 200,]
-      }]
-    }
-    this.moveChart.refresh(chartData);
-    this.lineChart.refresh(chartData);
-  }
-  refMoveChart = (node) => this.moveChart = node
-
-  refLineChart = (node) => this.lineChart = node
-
-  render() {
-    return (
-      <View className='container'>
-        <View className="move-chart">
-          <MoveChart ref={this.refMoveChart} />
-        </View>
-        <View className="move-chart">
-          <LineChart ref={this.refLineChart} />
-        </View>
-      </View>
-    );
-  }
-}

src/pages/More/index.scss

-.text {
-  text-align: center;
-}
-.move-chart {
-  width: 100%;
-  height: 50vh;
-}

src/pages/person/customerAnalysis/analysis.js

 import Taro, { Component } from '@tarojs/taro';
 import Authorize from '@components/authorize'
 import { View } from "@tarojs/components";
-// import MoveChart from '../../More/More'
-// import LineChart from '../../components/LineChart'
 import './index.scss'
 import { AtTabs, AtTabsPane, AtProgress } from 'taro-ui'
 import "taro-ui/dist/style/components/tabs.scss"
 import "taro-ui/dist/style/components/progress.scss";
 import { savePoint, updatePoint } from '@services/common'
+import { querySexInfo } from '@services/person'
 import { connect } from '@tarojs/redux'
+import PieChart from "../../../components/PieChart";
 
 
 @connect(({ user, city }) => ({ user, city }))
   state = {
     current: 0,
     recordId: undefined, // 埋点ID
+    sexInfo: [],
   }
 
   componentWillUnmount() {
   }
 
   handleClick(value) {
+    if (value == '0') {
+      querySexInfo('new').then(res => {
+        this.setState({
+          sexInfo: res || []
+        })
+      })
+    } else if (value == '1') {
+      querySexInfo('follow').then(res => {
+        this.setState({
+          sexInfo: res || []
+        })
+      })
+    } else {
+      querySexInfo('visite ').then(res => {
+        this.setState({
+          sexInfo: res || []
+        })
+      })
+    }
+
     this.setState({
       current: value
-    }, )
+    })
+
   }
 
+  componentDidMount() {
+    querySexInfo('new').then(res => {
+      this.setState({
+        sexInfo: res || []
+      })
+    })
+    const chartData = [
+      { value: 335, name: '直接访问' },
+      { value: 310, name: '邮件营销' },
+      { value: 234, name: '联盟广告' },
+      { value: 135, name: '视频广告' },
+      { value: 1548, name: '搜索引擎' }
+    ];
+    this.pieChart.refresh(chartData);
+  }
+  refPieChart = (node) => this.pieChart = node
 
   render() {
 
     const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
+    const { sexInfo } = 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} >
             <View>
-              {/* <MoveChart/> */}
-              {/* <View className="sex-box">
-                <View className="sex">性别</View>
-                <AtProgress percent={25} strokeWidth={6} color='#FF4949' />
-              </View> */}
+              <PieChart ref={this.refPieChart} />
+              <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 => (
+                    <View 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}>
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
+            <View>
+              <PieChart ref={this.refPieChart} />
+              <View style="padding: 40rpx;">
+                <View style="font-size: 32rpx;color: #666;">性别</View>
+                {
+                  sexInfo.map(item => (
+                    <View style="display: flex;align-items: center;">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}<AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color='#FF4949' /></View>
+                  ))
+                }
+              </View>
+            </View>
           </AtTabsPane>
           <AtTabsPane current={this.state.current} index={2}>
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
+            <View>
+              <PieChart ref={this.refPieChart} />
+              <View style="padding: 40rpx;">
+                <View style="font-size: 32rpx;color: #666;">性别</View>
+                {
+                  sexInfo.map(item => (
+                    <View style="display: flex;align-items: center;">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}<AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color='#FF4949' /></View>
+                  ))
+                }
+              </View>
+            </View>
           </AtTabsPane>
         </AtTabs>
       </View>

src/pages/person/customerAnalysis/index.scss

   }
 }
 
+
 .user_con{
   margin: 0 20px 40px 20px;
   height:256px;
         align-items: center;
         justify-content: space-between;
         width:456px;
-        padding: 16px;
+        height:48px ;
+        line-height: 48px;
+        padding: 0 16px;
         background-color: #f4f4f4;
+        .picker{
+          width: 400px;
+        }
       }
       .right-icon{
         width:18px;
         border-top: 2px solid #999;
         border-right: 2px solid #999;
         transform:rotate(45deg);
+        float: right;
       }
       .bottom-btn{
         margin: 30px auto 0 auto;
           border-radius:12px;
           border:2px solid $primary-color;
         }
-      }
-      
+      } 
     }
-  
-  
-   
   }

src/pages/person/customerAnalysis/myCustomer.js

 import { AtTabs, AtTabsPane } from 'taro-ui'
 import "taro-ui/dist/style/components/tabs.scss"
 import { savePoint, updatePoint } from '@services/common'
-import { getCustomerDetail, getVisitRecord, getActivityList, getFollowRecord, addFollowRecord } from '@services/person'
+import { getCustomerDetail, getVisitRecord, getActivityList, getFollowRecord, addFollowRecord, commitCustomerInfo } from '@services/person'
 import { connect } from '@tarojs/redux'
 import './index.scss'
 import ActivityItem from './item'
       baseInfo: this.state.customerDetail,
     })
   }
+  // 保存
   baseSaveBtn() {
+    const { customerId } = this.$router.params
+    const { baseInfo } = this.state
+    commitCustomerInfo(customerId, baseInfo).then(res => {
+      this.setState({
+        customerDetail: res || {}
+      })
+    })
     this.setState({
       baseVisible: false,
     })
   }
+  // 取消
   baseCancelBtn() {
     this.setState({
       baseVisible: false,
     })
   }
-  onPriceRangeChange(e) {
+  onNameChange(e) {
     this.setState({
       baseInfo: {
-        ...baseInfo,
-        priceRange: e.target.value
+        ...this.state.baseInfo,
+        name: e.target.value
       }
     })
   }
-  onBaseTextareaChange(e) {
+  onSexChange = e => {
+
+    let sex = e.detail.value == '0' ? '1' : e.detail.value == '1' ? '2' : ''
     this.setState({
       baseInfo: {
-        ...baseInfo,
-        describe: e.target.value
+        ...this.state.baseInfo,
+        sex,
+      }
+    })
+  }
+  onManageTypeChange(e) {
+    this.setState({
+      baseInfo: {
+        ...this.state.baseInfo,
+        realtyManageType: e.target.value
+      }
+    })
+  }
+  onPriceRangeChange(e) {
+    this.setState({
+      baseInfo: {
+        ...this.state.baseInfo,
+        priceRange: e.target.value
       }
     })
   }
+
+
+
   onChange = e => {
     this.setState({
       baseInfo: {
-        ...baseInfo,
-        sex: this.state.selector[e.detail.value]
+        ...this.state.baseInfo,
+        demandType: this.state.selector[e.detail.value]
       }
     })
   }
-  onSexChange = e => {
-    console, log(e, "eeeeeeeeeeeeeee")
+
+  onBaseTextareaChange(e) {
     this.setState({
       baseInfo: {
-        ...baseInfo,
-        sex: this.state.sexSelector[e.detail.value]
+        ...this.state.baseInfo,
+        describe: e.target.value
       }
     })
   }
     })
   }
   renderBaseBox() {
-    const { baseInfo, desc, selector, selectorChecked, sexSelector, sexSelectorChecked } = this.state
+    const { baseInfo, desc, selector, sexSelector } = this.state
     return (
       <View className="mask">
         <View className="base-con">
               <View>
                 <Picker mode='selector' range={sexSelector} onChange={this.onSexChange}>
                   <View className='picker'>
-                    {baseInfo.sex == '1' ? '男' : baseInfo.sex == '1' ? '女' : ''}
+                    {baseInfo.sex == '1' ? '男' : baseInfo.sex == '2' ? '女' : '　'}
                   </View>
                 </Picker>
               </View>
               <View>
                 <Picker mode='selector' range={selector} onChange={this.onChange}>
                   <View className='picker'>
-                    {baseInfo.demandType || ''}
+                    {baseInfo.demandType || '　'}
                   </View>
                 </Picker>
               </View>
               {visitRecord.length && visitRecord.map(item => (
                 <View className="record-item">
                   <View className="title" >{item.activity}</View>
-                  <View className="time">{dayjs(item.visitTime).format('YYYY年MM月DD日 HH:mm:ss') || ''}</View>
+                  <View className="time">{dayjs(item.visitTime).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
                 </View>
               ))
               }
                 <View>
                   <View style=" display:flex;justify-content: space-between;align-items: center;color: #333;font-size: 16px; margin-bottom:20rpx;">
                     <View style=" display: flex;align-items: center;"><View style="width:8px;height:8px;margin-right:20rpx;display:inline-block;background:rgba(246,182,29,1);border-radius: 50%;"></View>{item.recordType}</View>
-                    <View classNam="time" style=" font-size: 26rpx;color: #999;">{dayjs(item.createDate).format('YYYY年MM月DD日 HH:mm:ss') || ''}</View>
+                    <View classNam="time" style=" font-size: 26rpx;color: #999;">{dayjs(item.createDate).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
                   </View>
                   {
                     item.recordContent &&

src/services/person.js

   API_CUSTOMER_DETAIL,
   API_VISIT_RECORD,
   API_ACTIVITY_LIST_CUSTOMER,
-  API_FOLLOW_LIST
+  API_FOLLOW_LIST,
+  API_SEX_INFO,
 } from '@constants/api'
 
 
+/**
+ * 获取客户分析性别数据
+ * @param {*} type
+ */
+export const querySexInfo = (type, payload) => fetch({ url: `${API_SEX_INFO}/${type}`, payload })
+
 /**
  * 获取我的客户数据
  * @param {*} payload
  */
 export const queryCustomerList = (type, payload) => fetch({ url: `${API_CUSTOMER_LIST}/${type}`, payload })
 /**
- * 获取客户列表
+ * 获取客户详情
  * @param {*} customerId  
  */
 export const getCustomerDetail = (customerId, payload) => fetch({ url: `${API_CUSTOMER_DETAIL}/${customerId}`, payload })
+/**
+ * 完善客户信息
+ * @param {*} customerId  
+ */
+export const commitCustomerInfo = (customerId, payload) => fetch({ url: `${API_CUSTOMER_DETAIL}/${customerId}`, payload, method: 'PUT' })
 /**
  * 获取访问记录
  * @param {*} payload