linecharts

config/dev.js

@@ -7,10 +7,10 @@ module.exports = {
     // WSS_HOST: '"wss://47.101.36.130:8085"',
     // HOST:  '"https://dev.jinchengjiaye.com"',//测试
     // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
-    HOST: '"https://lt.pawoma.cn"',
-    WSS_HOST: '"wss://lt.pawoma.cn"',
-    // HOST: '"http://127.0.0.1:8080"',
-    // WSS_HOST: '"ws://127.0.0.1:8080"',
+    // HOST: '"https://lt.pawoma.cn"',
+    // WSS_HOST: '"wss://lt.pawoma.cn"',
+    HOST: '"http://192.168.0.218:8080"',
+    WSS_HOST: '"ws://192.168.0.218:8080"',
   },
   weapp: {},
   h5: {}

src/components/PieChart.js

@@ -1,65 +0,0 @@
-import Taro, { Component } from "@tarojs/taro";
-import * as echarts from "../components/ec-canvas/echarts";
-
-function setChartData(chart, data) {
-  let option = {
-    series : [
-      {
-        name: '访问来源',
-        type: 'pie',
-        center: ['50%', '50%'],
-        radius: [0, '60%'],
-        data: data,
-        itemStyle: {
-          emphasis: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  };
-  chart.setOption(option);
-}
-
-export default class PieChart 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/charts/Line.js

@@ -1,13 +1,15 @@
 import Taro, { Component } from '@tarojs/taro'
 import echarts from '../ec-canvas/echarts'
+import './style.scss'
 
-function initChart(callback) {
+function initChart(callback, options) {
   return function (canvas, width, height) {
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height
     });
     canvas.setChart(chart);
+    chart.setOption(options);
     callback && callback(chart);
     return chart;
   }
@@ -25,9 +27,10 @@ export default class LineChart extends Component {
 
   // this.echart
   echart = null
+  ecComponent = null
 
   state = {
-    ec: { onInit: initChart(this.handleChart.bind(this)) },
+    ec: { lazyLoad: true },
   }
 
   // 禁止 props 变更时渲染
@@ -39,45 +42,53 @@ export default class LineChart extends Component {
     return false
   }
 
-  handleChart (chart) {
-    this.echart = chart
-    if (!this.props.source || !this.props.source.length) {
-      this.echart.showLoading()
-    } else {
-      this.refreshChart(this.props.source)
-    }
+  handleEcComponent (ref) {
+    this.ecComponent = ref
   }
 
-  refreshChart(source) {
-    if (!this.echart) {
-      console.warn('echarts not ready')
-      return;
-    }
+  handleChart(chart) {
+    this.echart = chart
+  }
 
+  createOptions(source = []) {
     const defaultOpt = {
       color: ['#BB9C79', '#666666'],
-      tooltip: {},
-      xAxis: {type: 'category'},
-      yAxis: {},
-      dataset: {},
+      xAxis: { type: 'category' },
+      yAxis: { type: 'value' },
       series: [],
     }
 
-    const options = {
+    return {
       ...defaultOpt,
       dataset: { source },
-      series: {
+      series: [{
         type: 'line',
-        dimensions: [ 'name' ],
-      },
+        areaStyle: {},
+        dimensions: ['name', 'value'],
+      }],
     }
+  }
+
+  refreshChart(source) {    
+    const options = this.createOptions(source)
 
-    this.echart.setOption(options)
-    this.echart.hideLoading()
+    if (!this.echart) {
+      if (this.ecComponent) {
+        const initFunc = initChart(this.handleChart.bind(this), options)
+        this.ecComponent.init(initFunc)
+      } else {
+        console.warn('echart componet not ready')
+      }
+    } else {
+      this.echart.setOption(options)
+    }
   }
 
   render() {
     return (
-      <ec-canvas style="width: 100%; height: 100%" ec={this.state.ec}></ec-canvas>)
+      <View className="map-container">
+        <ec-canvas ref={this.handleEcComponent} ec={this.state.ec}></ec-canvas>
+      </View>
+    )
   }
 }

src/pages/person/customerAnalysis/analysis.js

@@ -22,6 +22,15 @@ export default class analysis extends Taro.Component {
     current: 0,
     recordId: undefined, // 埋点ID
     sexInfo: [],
+    chartInfo: [
+      { name: '周一', value: '26' },
+      { name: '周二', value: '84' },
+      { name: '周三', value: '107' },
+      { name: '周四', value: '93' },
+      { name: '周五', value: '127' },
+      { name: '周六', value: '64' },
+      { name: '周日', value: '94' },
+    ]
   }
 
   componentWillUnmount() {
@@ -75,48 +84,48 @@ export default class analysis extends Taro.Component {
   render() {
 
     const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
-    const { sexInfo } = this.state
+    const { sexInfo, chartInfo } = 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>
-              <LineChart source={} />
+              <LineChart source={chartInfo} />
               <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>
+                  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}>
-          <View>
+            <View>
               <LineChart />
               <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>
+                  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}>
-          <View>
+            <View>
               <LineChart />
               <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>
+                  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>

src/pages/person/customerAnalysis/myCustomer.js

@@ -224,6 +224,15 @@ export default class myCustomer extends Taro.Component {
     }
     addFollowRecord(params).then(res => {
       this.queryFollowRecord(1)
+      Taro.showToast({
+        title: '添加跟进成功',
+        icon: 'none'
+      })
+    }).catch(err => {
+      Taro.showToast({
+        title: '添加跟进失败',
+        icon: 'none'
+      })
     })
     this.setState({
       followVisible: false,