echarts

src/components/charts/Line.js

@@ -35,9 +35,9 @@ export default class LineChart extends Component {
 
   // 禁止 props 变更时渲染
   shouldComponentUpdate(nextProps) {
-    if (nextProps.source && nextProps.source.length) {
-      this.refreshChart(nextProps.source)
-    }
+    console.log('--nextProps--->', nextProps)
+
+    this.refreshChart(nextProps.source)
 
     return false
   }

src/components/charts/style.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 80px;
   bottom: 0;
-  left: 1vw;
+  left: 0;
   right: 0;
   width:100vw;
   height:400px;

src/pages/person/customerAnalysis/analysis.js

@@ -32,7 +32,9 @@ export default class analysis extends Taro.Component {
       // { name: '周五', value: '127' },
       // { name: '周六', value: '64' },
       // { name: '周日', value: '94' },
-    ]
+    ],
+    chartInfo2: [],
+    chartInfo3: [],
   }
 
   componentWillUnmount() {
@@ -41,6 +43,9 @@ export default class analysis extends Taro.Component {
   }
 
   handleClick(value) {
+    this.setState({
+      checkedWhich: 0
+    })
     if (value == '0') {
       querySexInfo('new').then(res => {
         this.setState({
@@ -60,19 +65,21 @@ export default class analysis extends Taro.Component {
         })
       })
       getEchartDailyInfo('follow').then(res => {
+
+        console.log(res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })), "5555*-----------------555555")
         this.setState({
-          chartInfo: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
+          chartInfo2: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
         })
       })
     } else {
-      querySexInfo('visite ').then(res => {
+      querySexInfo('visite').then(res => {
         this.setState({
           sexInfo: res || []
         })
       })
       getEchartDailyInfo('visite').then(res => {
         this.setState({
-          chartInfo: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
+          chartInfo3: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
         })
       })
     }
@@ -98,36 +105,67 @@ export default class analysis extends Taro.Component {
   changeDailyMonth(inx) {
     const { current } = this.state
     const params = current == 0 ? 'new' : current == 1 ? 'follow' : 'visite'
+
     if (inx == 0) {
-      getEchartDailyInfo(params).then(res => {
-        this.setState({
-          chartInfo: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum }))
+      if (params == 'new') {
+        getEchartDailyInfo(params).then(res => {
+          this.setState({
+            chartInfo: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
+          })
         })
-      })
+      } else if (params == 'follow') {
+        getEchartDailyInfo(params).then(res => {
+          this.setState({
+            chartInfo2: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
+          })
+        })
+      } else {
+        getEchartDailyInfo(params).then(res => {
+          this.setState({
+            chartInfo3: res.map(x => ({ name: `${dayjs(x.day).format('MM月DD日')}`, value: x.customerNum })) || []
+          })
+        })
+      }
     } else {
-      getEchartMonthInfo(params).then(res => {
-        this.setState({
-          chartInfo: res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum }))
+      if (params == 'new') {
+        getEchartMonthInfo(params).then(res => {
+          this.setState({
+            chartInfo: res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
+          })
         })
-      })
+      } else if (params == 'follow') {
+        getEchartMonthInfo(params).then(res => {
+          this.setState({
+            chartInfo2:  res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
+          })
+        })
+      } else {
+        getEchartMonthInfo(params).then(res => {
+
+          this.setState({
+            chartInfo3: res.map(x => ({ name: `${x.month.substr(4)}月`, value: x.customerNum })) || []
+          })
+        })
+      }
     }
     this.setState({
       checkedWhich: inx
     })
+
   }
 
   render() {
 
     const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
     const dailyMonth = ['日', '月']
-    const { sexInfo, chartInfo, checkedWhich, current } = this.state
+    const { sexInfo, chartInfo, chartInfo2, chartInfo3, checkedWhich, current } = this.state
 
     return (
       <View>
-        <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+        <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;">
+              <View style="height:40rpx;position: relative;margin-top:20rpx">
                 <View className="daily-month" >
                   {
                     dailyMonth.map((item, index) => (
@@ -137,7 +175,7 @@ export default class analysis extends Taro.Component {
                   }
                 </View>
               </View>
-              <View style="width:100vw;height:530rpx">
+              <View style="width:100vw;height:530rpx;position: relative;">
                 <LineChart source={chartInfo} />
               </View>
               <View style="height:20rpx;background:#f5f5f5;"> </View>
@@ -152,7 +190,7 @@ export default class analysis extends Taro.Component {
           </AtTabsPane>
           <AtTabsPane current={current} index={1}>
             <View>
-              <View style="height:'40rpx;position: relative;">
+              <View style="height:40rpx;position: relative;margin-top:20rpx">
                 <View className="daily-month" >
                   {
                     dailyMonth.map((item, index) => (
@@ -162,8 +200,8 @@ export default class analysis extends Taro.Component {
                   }
                 </View>
               </View>
-              <View style="width:100vw;height:520rpx">
-                <LineChart source={chartInfo} />
+              <View style="width:100vw;height:530rpx;position: relative;">
+                <LineChart source={chartInfo2} />
               </View>
               <View style="height:20rpx;background:#f5f5f5;"> </View>
               <View style="padding: 40rpx;">
@@ -177,7 +215,7 @@ export default class analysis extends Taro.Component {
           </AtTabsPane>
           <AtTabsPane current={current} index={2}>
             <View>
-              <View style="height:'40rpx;position: relative;">
+              <View style="height:40rpx;position: relative;margin-top:20rpx">
                 <View className="daily-month" >
                   {
                     dailyMonth.map((item, index) => (
@@ -187,8 +225,8 @@ export default class analysis extends Taro.Component {
                   }
                 </View>
               </View>
-              <View style="width:100vw;height:520rpx">
-                <LineChart source={chartInfo} />
+              <View style="width:100vw;height:530rpx;position: relative;">
+                <LineChart source={chartInfo3} />
               </View>
               <View style="height:20rpx;background:#f5f5f5;"> </View>
               <View style="padding: 40rpx;">