fix #5621

src/components/charts/Line.js

@@ -2,19 +2,115 @@ import Taro, { Component } from '@tarojs/taro'
 import echarts from '../ec-canvas/echarts'
 import './style.scss'
 
-function initChart(callback, options) {
+function initChart(options, callback) {
   return function (canvas, width, height) {
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height
     });
     canvas.setChart(chart);
-    chart.setOption(options);
+    chart.setOption(options);    
     callback && callback(chart);
     return chart;
   }
 }
 
+function createLineOptions(source = []) {
+  const colorWithOpacity = op => `rgba(187,156,121, ${op})`
+
+  const defaultOpt = {
+    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: '12%',
+      top: '10%',
+    },
+    series: [],
+  }
+
+  // 数据展示只展示 5 个
+  const endValue = source.length - 1 > 0 ? source.length - 1 : 0
+  const startValue = endValue - 5 > 0 ? endValue - 5 : 0
+
+  return {
+    ...defaultOpt,
+    dataset: { source },
+    dataZoom: [{
+      type: 'slider',
+      startValue, endValue,
+      show: true,
+      xAxisIndex: [0],
+      handleSize: 10,//滑动条的 左右2个滑动条的大小  
+      height: 20,//组件高度  
+      left: 30, //左边的距离  
+      right: 30,//右边的距离  
+      bottom: 0,//下边的距离  
+      handleColor: 'rgba(0,0,0,0.1)',//h滑动图标的颜色  
+      realtime : true,
+      handleStyle: {
+        borderColor: "#999",
+        borderWidth: "1",
+        shadowBlur: 2,
+        background: "rgba(0,0,0,0.1)",
+        shadowColor: "rgba(0,0,0,0.1)",
+      },
+      backgroundColor: 'rgba(0,0,0,0.1)',//两边未选中的滑动条区域的颜色  
+      showDataShadow: false,//是否显示数据阴影 默认auto  
+      showDetail: false,
+
+    }],
+    series: [{
+      type: 'line',
+      dimensions: ['name', 'value'],
+      symbolSize: 6,
+      smooth: true,
+      label: {
+        show: true,
+        formatter: '{@value}人'
+      },
+      lineStyle: {
+        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,
+        }
+      },
+    }],
+  }
+}
+
 /**
  * 传入 source 的格式为 [{ name: xxx, value: xxx }, {}]
  */
@@ -25,148 +121,55 @@ export default class LineChart extends Component {
     }
   }
 
-  // this.echart
-  echart = null
+  // this.ecComponent
+  chart = null;
   ecComponent = null
 
   state = {
     ec: { lazyLoad: true },
+    isDisposed: false,
   }
 
-  // 禁止 props 变更时渲染
-  shouldComponentUpdate(nextProps) {
-    console.log('--nextProps--->', nextProps)
-
-    this.refreshChart(nextProps.source)
-
-    return false
+  componentDidShow() {
+    this.setState({ isDisposed: false })
   }
 
-  handleEcComponent(ref) {
-    this.ecComponent = ref
+  componentDidHide() {
+    this.setState({ isDisposed: true })
   }
 
-  handleChart(chart) {
-    this.echart = chart
+  componentDidMount() {
+    this.ecComponent = this.$scope.selectComponent(`#${this.props.lid}`)
+    this.init(this.props)
   }
 
-  createOptions(source = []) {
-    const colorWithOpacity = op => `rgba(187,156,121, ${op})`
-
-    const defaultOpt = {
-      color: [colorWithOpacity(1)],
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        axisLabel: {
-          textStyle: {
-            color: '#666'
-          }
-        }
+  componentWillReceiveProps(nextProps) {
+    // 简单优化, 不显示的组件不更新
+    // 但是有个 bug 。如果此时有 props 更新, 会导致页面绘制的数据错误
+    if (this.state.isDisposed) return
 
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          textStyle: {
-            color: '#666'
-          }
-        }
-      },
-      grid: {
-        left: '10%',
-        right: '8%',
-        bottom: '12%',
-        top: '10%',
-      },
-      series: [],
-    }
-
-    // 数据展示只展示 5 个
-    const endValue = source.length - 1 > 0 ? source.length - 1 : 0
-    const startValue = endValue - 5 > 0 ? endValue - 5 : 0
-
-    return {
-      ...defaultOpt,
-      dataset: { source },
-      dataZoom: [{
-        type: 'slider',
-        startValue, endValue,
-        show: true,
-        xAxisIndex: [0],
-        handleSize: 10,//滑动条的 左右2个滑动条的大小  
-        height: 20,//组件高度  
-        left: 30, //左边的距离  
-        right: 30,//右边的距离  
-        bottom: 0,//下边的距离  
-        handleColor: 'rgba(0,0,0,0.1)',//h滑动图标的颜色  
-        realtime : true,
-        handleStyle: {
-          borderColor: "#999",
-          borderWidth: "1",
-          shadowBlur: 2,
-          background: "rgba(0,0,0,0.1)",
-          shadowColor: "rgba(0,0,0,0.1)",
-        },
-        backgroundColor: 'rgba(0,0,0,0.1)',//两边未选中的滑动条区域的颜色  
-        showDataShadow: false,//是否显示数据阴影 默认auto  
-        showDetail: false,
-
-      }],
-      series: [{
-        type: 'line',
-        dimensions: ['name', 'value'],
-        symbolSize: 6,
-        smooth: true,
-        label: {
-          show: true,
-          formatter: '{@value}人'
-        },
-        lineStyle: {
-          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,
-          }
-        },
-      }],
+    // 简单的性能优化, 只有数据改变了才重新绘图
+    if (JSON.stringify(nextProps.source) != JSON.stringify(this.props.source)) {
+      this.init(nextProps)
     }
   }
 
-  refreshChart(source) {
-    const options = this.createOptions(source)
-
-    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')
+  init = (props) => {
+    const tk = setTimeout(() => {
+      if (this.ecComponent && props.source && props.source.length) {
+        const options = createLineOptions(props.source)
+        this.ecComponent.init(initChart(options, chart => (this.chart = chart)))
       }
-    } else {
-      this.echart.setOption(options)
-    }
+
+      clearTimeout(tk)
+    }, 500)
   }
 
   render() {
-    // this.refreshChart(this.props.source)
     return (
       <View style="width:100vw;height:480rpx;position: relative;">
         <View className="map-container">
-          <ec-canvas ref={this.handleEcComponent} ec={this.state.ec}></ec-canvas>
+          <ec-canvas id={this.props.lid} ec={this.state.ec}></ec-canvas>
         </View>
       </View>
     )

src/pages/person/customerAnalysis/analysis.js

@@ -12,6 +12,7 @@ import { connect } from '@tarojs/redux'
 import LineChart from "../../../components/charts/Line";
 const nothing = require('@assets/person/nothing.png')
 
+const rand = n => Math.random().toString(36).substr(2, n)
 
 @connect(({ user, city }) => ({ user, city }))
 export default class analysis extends Taro.Component {
@@ -28,6 +29,7 @@ export default class analysis extends Taro.Component {
     chartInfo: [],
     chartInfo2: [],
     chartInfo3: [],
+    lineIds: [ rand(7), rand(7), rand(7) ],
   }
 
   componentWillUnmount() {
@@ -160,7 +162,7 @@ export default class analysis extends Taro.Component {
 
     const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
     const dailyMonth = ['日', '月']
-    const { sexInfo, chartInfo, chartInfo2, chartInfo3, checkedWhich, current } = this.state
+    const { sexInfo, chartInfo, chartInfo2, chartInfo3, checkedWhich, current, lineIds } = this.state
 
     return (
       <View>
@@ -179,7 +181,7 @@ export default class analysis extends Taro.Component {
               </View>
               {
                 chartInfo.length &&
-                <LineChart source={chartInfo} />
+                <LineChart source={chartInfo} lid={lineIds[0]} />
               }
               {
                 !chartInfo.length &&
@@ -218,7 +220,7 @@ export default class analysis extends Taro.Component {
                 </View>
               </View>
               {chartInfo2.length &&
-                <LineChart source={chartInfo2} />
+                <LineChart source={chartInfo2} lid={lineIds[1]}/>
               }
               {
                 !chartInfo2.length &&
@@ -258,7 +260,7 @@ export default class analysis extends Taro.Component {
               </View>
               {
                 chartInfo3.length &&
-                <LineChart source={chartInfo3} />
+                <LineChart source={chartInfo3} lid={lineIds[2]} />
               }
               {
                 !chartInfo3.length &&