修改PC端分时线刷新问题

JCCDex · Apr 28, 2019 · de1d243 · de1d243
1 parent e30bef9
commit de1d243
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 21 deletions.
diff --git a/src/components/klineChart.vue b/src/components/klineChart.vue
@@ -240,6 +240,7 @@
         :chart-data-obj="chartDataObj"
         :kline-config="klineConfig"
         :resize-size="resizeSize"
+        :cycle="cycle"
       ></TimeSharing>
       <Depth
         ref="depth"
@@ -455,11 +456,6 @@ export default {
       if (cycle === this.cycle) {
         return;
       }
-      // if (cycle === 'everyhour') {
-      //   this.showChart = 'timeSharing'
-      // } else {
-      //   this.showChart = 'candle'
-      // }
       this.toolTipData = null;
       this.cycle = cycle;
       this.toolTipIndex = null;

diff --git a/src/components/timeSharing.vue b/src/components/timeSharing.vue
@@ -23,7 +23,9 @@ export default {
       },
       coinType: null,
       message: null,
-      timeSharingData: null
+      timeSharingData: null,
+      currentCycle: "",
+      isRefresh: true
     };
   },
   props: {
@@ -40,9 +42,20 @@ export default {
           chartType: "timeSharing"
         };
       }
+    },
+    cycle: {
+      type: String,
+      default: ""
     }
   },
   watch: {
+    cycle() {
+      if (this.cycle !== this.currentCycle) {
+        this.init(true, "init");
+        this.isRefresh = true;
+      }
+      this.currentCycle = JSON.parse(JSON.stringify(this.cycle));
+    },
     chartDataObj() {
       this.message = getLanguage();
       let precision = this.chartDataObj.precision;
@@ -51,18 +64,21 @@ export default {
         divisionData.precision = precision;
         if (
           JSON.stringify(this.coinType) !==
-          JSON.stringify(this.chartDataObj.coinType)
+            JSON.stringify(this.chartDataObj.coinType) ||
+          this.isRefresh
         ) {
-          this.init(true);
+          this.init(true, "init");
           let tipIndex = this.timeSharing.setTimeSharingOption(divisionData);
           this.$emit("listenToTipIndex", tipIndex);
           this.timeSharing.resizeTimeSharingChart(
             this.$refs.timeSharing,
             false,
             this.klineConfig.size
           );
+          this.isRefresh = false;
           this.coinType = this.chartDataObj.coinType;
         } else {
+          this.init(true, "update");
           this.timeSharing.updateTimeSharingOption(divisionData);
         }
       }
@@ -121,8 +137,12 @@ export default {
     this.dispose();
   },
   methods: {
-    init(clear) {
-      this.timeSharing.initTimeSharingChart(this.$refs.timeSharing, clear);
+    init(clear, type) {
+      this.timeSharing.initTimeSharingChart(
+        this.$refs.timeSharing,
+        clear,
+        type
+      );
       this.resizeSize(this.klineConfig.size);
     },
     changeDataZoom(type) {

diff --git a/src/components/volumeChart.vue b/src/components/volumeChart.vue
@@ -127,8 +127,8 @@ export default {
         this.volumeSize.width = this.klineConfig.size.width + "px";
       } else {
         this.volumeSize = {
-          height: "300px",
-          width: "100%"
+          width: "100%",
+          height: "533px"
         };
       }
     } else {

diff --git a/src/js/Charts.js b/src/js/Charts.js
@@ -71,8 +71,8 @@ class ChartController {
 
     /* 绘制分时图 */
 
-    initTimeSharingChart(DOM, clear) {
-        this.setTimeSharing.initTimeSharingECharts(DOM, clear);
+    initTimeSharingChart(DOM, clear, type) {
+        this.setTimeSharing.initTimeSharingECharts(DOM, clear, type);
     }
 
     resizeTimeSharingChart(DOM, isFullScreen, size) {

diff --git a/src/js/SetTimeSharingChart.js b/src/js/SetTimeSharingChart.js
@@ -11,6 +11,7 @@ import { getLanguage, getDefaultChartSize } from './utils';
 var timeSharingOption;
 var oldTimeSharingData;
 var toolTipIndex;
+var oldDataZoom;
 
 class TimeSharingChart {
     constructor(configs) {
@@ -33,7 +34,7 @@ class TimeSharingChart {
                 } else {
                     let resizeContainer = () => {
                         if (DOM) {
-                            DOM.style.height = size.height * 0.75 + 'px';
+                            DOM.style.height = size.height * 0.7 + 'px';
                             DOM.style.width = size.width + 'px';
                         }
                     };
@@ -42,7 +43,7 @@ class TimeSharingChart {
                 }
             } else {
                 let resizeContainer = () => {
-                    DOM.style.height = size.clientHeight * 0.75 + 'px';
+                    DOM.style.height = size.clientHeight * 0.7 + 'px';
                     DOM.style.width = size.clientWidth + 'px';
                 };
                 resizeContainer(this);
@@ -54,16 +55,17 @@ class TimeSharingChart {
         }
     }
 
-    initTimeSharingECharts(DOM, clear) {
+    initTimeSharingECharts(DOM, clear, type) {
+        if (type === 'update') {
+            oldDataZoom = this.timeSharing.getOption().dataZoom;
+        }
         if (this.timeSharing && clear) {
             toolTipIndex = null;
             oldTimeSharingData = null;
             this.timeSharing.dispose();
         }
         if (!this.timeSharing || this.timeSharing.isDisposed()) {
             toolTipIndex = null;
-            timeSharingOption = null;
-            oldTimeSharingData = null;
             this.timeSharing = echarts.init(DOM);
             this.showLoading();
         }
@@ -93,6 +95,7 @@ class TimeSharingChart {
         oldTimeSharingData = data;
         let { times, averages, prices, volumes } = data;
         let length = averages.length - 1;
+        oldDataZoom = null;
         toolTipIndex = length;
         let option = {
             xAxis: this.getTimeSharingXAxis(times),
@@ -114,8 +117,10 @@ class TimeSharingChart {
             series: this.getTimeSharingSeries(prices, averages, volumes)
         };
         merge(timeSharingOption, option);
-        timeSharingOption.dataZoom = this.timeSharing.getOption().dataZoom;
+        timeSharingOption.dataZoom = oldDataZoom;
+        this.timeSharing.hideLoading();
         this.timeSharing.setOption(timeSharingOption);
+        saveTimeSharing(this.timeSharing);
     }
 
     getTimeSharingEchart() {

diff --git a/src/js/TimeSharingOption.js b/src/js/TimeSharingOption.js
@@ -26,7 +26,7 @@ var timeSharingOption = {
     },
     grid: [ // 直角坐标系内绘图网格
         { // 第一个grid网格
-            left: 10, // grid 组件离容器左侧的距离
+            left: 5, // grid 组件离容器左侧的距离
             top: 60, // grid 组件离容器上侧的距离
             right: 65, // grid 组件离容器右侧的距离
             bottom: 20