Browse Source

构建echarts组件时使用配置档生成hashcode作为key,防止刷新时不同chart因为key相同造成渲染错误

zhuth 7 years ago
parent
commit
7920c606c9
2 changed files with 24 additions and 3 deletions
  1. 10 2
      kanban-client/app/src/Charts/ECharts.js
  2. 14 1
      kanban-client/app/utils/BaseUtils.js

+ 10 - 2
kanban-client/app/src/Charts/ECharts.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {isEqual} from '../../utils/BaseUtils.js';
+import {isEqual, hashcode} from '../../utils/BaseUtils.js';
 import ReactEcharts from 'echarts-for-react';
 import reset from './ResetCharts.js';
 import {dark} from './Theme/Theme.js';
@@ -63,9 +63,17 @@ export class ReactEchart extends React.Component {
         this.reset();
     }
 
+    /**
+     * 通过配置项option内容创建key
+     */
+    createKey(option) {
+        return hashcode(option);
+    }
+
     render() {
+        let key = this.createKey(this.state.option);
         return (
-            <ReactEcharts ref={(e) => { this.echarts_react = e; }}
+            <ReactEcharts key={key} ref={(e) => { this.echarts_react = e; }}
             option={this.state.option}
             style={{height: '100%', width: '100%'}}
             className='rc-echarts'

+ 14 - 1
kanban-client/app/utils/BaseUtils.js

@@ -111,5 +111,18 @@ function getUrlParam(name) {
     return null;   
 }
 
+function hashcode(obj) {
+    let str = JSON.stringify(obj);
+    let hash = 0,
+        i, chr, len;
+    if (str.length === 0) return hash;
+    for (i = 0, len = str.length; i < len; i++) {
+        chr = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0;
+    }
+    return hash;
+}
+
 
-export { sort, remove, isEqual, isEmptyObject, getUrlParam};
+export { sort, remove, isEqual, isEmptyObject, getUrlParam, hashcode };