修改指标样式，上线WR,MTM指标

JCCDex · May 10, 2019 · 36cf681 · 36cf681
1 parent 68ebb2f
commit 36cf681
Show file tree

Hide file tree

Showing 20 changed files with 1,699 additions and 510 deletions.
diff --git a/src/components/KDJChart.vue b/src/components/KDJChart.vue
@@ -167,7 +167,7 @@ export default {
       }
     } else {
       this.platform = "mobile";
-      this.stochasticSize.height = this.klineConfig.size.height * 0.4 + "px";
+      this.stochasticSize.height = this.klineConfig.size.height * 0.3 + "px";
       this.stochasticSize.width = this.klineConfig.size.width + "px";
     }
     this.klineConfig.chartType = "stochastic";

diff --git a/src/components/MTMChart.vue b/src/components/MTMChart.vue
@@ -35,7 +35,7 @@ export default {
       coinType: "",
       currentCycle: "",
       isRefresh: true,
-      chartType: "indicator",
+      chartType: "mtm",
       toolTipData: null,
       MTMSize: {
         height: "",
@@ -100,12 +100,12 @@ export default {
           this.isRefresh
         ) {
           this.init(true, 'init');
-          this.MTM.setIndicatorOption(this.indicatorsData, this.currentCycle);
+          this.MTM.setMTMOption(this.indicatorsData, this.currentCycle);
           this.isRefresh = false;
           this.coinType = this.chartDataObj.coinType;
         } else {
           this.init(true, 'update');
-          this.MTM.updateIndicatorOption(
+          this.MTM.updateMTMOption(
             this.indicatorsData,
             this.currentCycle
           );
@@ -138,8 +138,8 @@ export default {
         }
         if (this.MTMData) {
           this.toolTipData = {
-            MTM: parseFloat(this.MTMData.MTM[index]).toFixed(7),
-            MAMTM: parseFloat(this.MTMData.MAMTM[index]).toFixed(7)
+            MTM: formatDecimal(this.MTMData.MTM[index], 7, true),
+            MAMTM: formatDecimal(this.MTMData.MAMTM[index], 7, true)
           };
         }
       }
@@ -159,10 +159,10 @@ export default {
       }
     } else {
       this.platform = "mobile";
-      this.MTMSize.height = this.klineConfig.size.height * 0.4 + "px";
+      this.MTMSize.height = this.klineConfig.size.height * 0.3 + "px";
       this.MTMSize.width = this.klineConfig.size.width + "px";
     }
-    this.klineConfig.chartType = "indicator";
+    this.klineConfig.chartType = "mtm";
     this.MTM = new IndicatorChart(this.klineConfig);
   },
   mounted() {
@@ -173,30 +173,30 @@ export default {
   },
   methods: {
     init(clear, type) {
-      this.MTM.initIndicatorChart(this.$refs.MTM, clear, type);
+      this.MTM.initMTMChart(this.$refs.MTM, clear, type);
       this.resize();
     },
     getToolTipIndex() {
-      let index = this.MTM.getIndicatorTipData();
+      let index = this.MTM.getMTMTipData();
       this.$emit("listenToTipIndex", index);
     },
     closeChart() {
       this.$emit("listenIndicatorChartClose", true);
     },
     changeDataZoom(type) {
-      this.MTM.changeIndicatorDataZoom(type);
+      this.MTM.changeMTMDataZoom(type);
     },
     resize() {
       if (this.klineConfig.platform === "pc") {
-        this.MTM.resizeIndicatorChart(
+        this.MTM.resizeMTMChart(
           this.$refs.MTM,
           this.resizeSize.isFullScreen,
           this.klineConfig.size
         );
       }
     },
     dispose() {
-      this.MTM.disposeIndicatorEChart();
+      this.MTM.disposeMTMEChart();
     }
   }
 };

diff --git a/src/components/RSIChart.vue b/src/components/RSIChart.vue
@@ -36,7 +36,7 @@ export default {
       coinType: "",
       currentCycle: "",
       isRefresh: true,
-      chartType: "indicator",
+      chartType: "rsi",
       toolTipData: null,
       RSISize: {
         height: "",
@@ -108,12 +108,12 @@ export default {
           this.isRefresh
         ) {
           this.init(true, 'init');
-          this.RSI.setIndicatorOption(this.indicatorsData, this.currentCycle);
+          this.RSI.setRSIOption(this.indicatorsData, this.currentCycle);
           this.isRefresh = false;
           this.coinType = this.chartDataObj.coinType;
         } else {
           this.init(true, 'update');
-          this.RSI.updateIndicatorOption(
+          this.RSI.updateRSIOption(
             this.indicatorsData,
             this.currentCycle
           );
@@ -178,7 +178,7 @@ export default {
       this.RSISize.height = this.klineConfig.size.height * 0.4 + "px";
       this.RSISize.width = this.klineConfig.size.width + "px";
     }
-    this.klineConfig.chartType = "indicator";
+    this.klineConfig.chartType = "rsi";
     this.RSI = new IndicatorChart(this.klineConfig);
   },
   mounted() {
@@ -189,30 +189,30 @@ export default {
   },
   methods: {
     init(clear, type) {
-      this.RSI.initIndicatorChart(this.$refs.RSI, clear, type);
+      this.RSI.initRSIChart(this.$refs.RSI, clear, type);
       this.resize();
     },
     getToolTipIndex() {
-      let index = this.RSI.getIndicatorTipData();
+      let index = this.RSI.getRSITipData();
       this.$emit("listenToTipIndex", index);
     },
     closeChart() {
       this.$emit("listenIndicatorChartClose", true);
     },
     changeDataZoom(type) {
-      this.RSI.changeIndicatorDataZoom(type);
+      this.RSI.changeRSIDataZoom(type);
     },
     resize() {
       if (this.klineConfig.platform === "pc") {
-        this.RSI.resizeIndicatorChart(
+        this.RSI.resizeRSIChart(
           this.$refs.RSI,
           this.resizeSize.isFullScreen,
           this.klineConfig.size
         );
       }
     },
     dispose() {
-      this.RSI.disposeIndicatorEChart();
+      this.RSI.disposeRSIEChart();
     }
   }
 };

diff --git a/src/components/VRChart.vue b/src/components/VRChart.vue
@@ -35,7 +35,7 @@ export default {
       coinType: "",
       currentCycle: "",
       isRefresh: true,
-      chartType: "indicator",
+      chartType: "vr",
       toolTipData: null,
       VRSize: {
         height: "",
@@ -100,12 +100,12 @@ export default {
           this.isRefresh
         ) {
           this.init(true, 'init');
-          this.VR.setIndicatorOption(this.indicatorsData, this.currentCycle);
+          this.VR.setVROption(this.indicatorsData, this.currentCycle);
           this.isRefresh = false;
           this.coinType = this.chartDataObj.coinType;
         } else {
           this.init(true, 'update');
-          this.VR.updateIndicatorOption(
+          this.VR.updateVROption(
             this.indicatorsData,
             this.currentCycle
           );
@@ -159,10 +159,10 @@ export default {
       }
     } else {
       this.platform = "mobile";
-      this.VRSize.height = this.klineConfig.size.height * 0.4 + "px";
+      this.VRSize.height = this.klineConfig.size.height * 0.3 + "px";
       this.VRSize.width = this.klineConfig.size.width + "px";
     }
-    this.klineConfig.chartType = "indicator";
+    this.klineConfig.chartType = "vr";
     this.VR = new IndicatorChart(this.klineConfig);
   },
   mounted() {
@@ -173,30 +173,30 @@ export default {
   },
   methods: {
     init(clear, type) {
-      this.VR.initIndicatorChart(this.$refs.VR, clear, type);
+      this.VR.initVRChart(this.$refs.VR, clear, type);
       this.resize();
     },
     getToolTipIndex() {
-      let index = this.VR.getIndicatorTipData();
+      let index = this.VR.getVRTipData();
       this.$emit("listenToTipIndex", index);
     },
     closeChart() {
       this.$emit("listenIndicatorChartClose", true);
     },
     changeDataZoom(type) {
-      this.VR.changeIndicatorDataZoom(type);
+      this.VR.changeVRDataZoom(type);
     },
     resize() {
       if (this.klineConfig.platform === "pc") {
-        this.VR.resizeIndicatorChart(
+        this.VR.resizeVRChart(
           this.$refs.VR,
           this.resizeSize.isFullScreen,
           this.klineConfig.size
         );
       }
     },
     dispose() {
-      this.VR.disposeIndicatorEChart();
+      this.VR.disposeVREChart();
     }
   }
 };

diff --git a/src/components/WRChart.vue b/src/components/WRChart.vue
@@ -35,7 +35,7 @@ export default {
       coinType: "",
       currentCycle: "",
       isRefresh: true,
-      chartType: "indicator",
+      chartType: "wr",
       toolTipData: null,
       WRSize: {
         height: "",
@@ -100,12 +100,12 @@ export default {
           this.isRefresh
         ) {
           this.init(true, 'init');
-          this.WR.setIndicatorOption(this.indicatorsData, this.currentCycle);
+          this.WR.setWROption(this.indicatorsData, this.currentCycle);
           this.isRefresh = false;
           this.coinType = this.chartDataObj.coinType;
         } else {
           this.init(true, 'update');
-          this.WR.updateIndicatorOption(
+          this.WR.updateWROption(
             this.indicatorsData,
             this.currentCycle
           );
@@ -138,8 +138,8 @@ export default {
         }
         if (this.WRData) {
           this.toolTipData = {
-            WR1: parseFloat(this.WRData.WR1[index]).toFixed(7),
-            WR2: parseFloat(this.WRData.WR2[index]).toFixed(7)
+            WR1: formatDecimal(this.WRData.WR1[index], 7, true),
+            WR2: formatDecimal(this.WRData.WR2[index], 7, true)
           };
         }
       }
@@ -159,10 +159,10 @@ export default {
       }
     } else {
       this.platform = "mobile";
-      this.WRSize.height = this.klineConfig.size.height * 0.4 + "px";
+      this.WRSize.height = this.klineConfig.size.height * 0.3 + "px";
       this.WRSize.width = this.klineConfig.size.width + "px";
     }
-    this.klineConfig.chartType = "indicator";
+    this.klineConfig.chartType = "wr";
     this.WR = new IndicatorChart(this.klineConfig);
   },
   mounted() {
@@ -173,30 +173,30 @@ export default {
   },
   methods: {
     init(clear, type) {
-      this.WR.initIndicatorChart(this.$refs.WR, clear, type);
+      this.WR.initWRChart(this.$refs.WR, clear, type);
       this.resize();
     },
     getToolTipIndex() {
-      let index = this.WR.getIndicatorTipData();
+      let index = this.WR.getWRTipData();
       this.$emit("listenToTipIndex", index);
     },
     closeChart() {
       this.$emit("listenIndicatorChartClose", true);
     },
     changeDataZoom(type) {
-      this.WR.changeIndicatorDataZoom(type);
+      this.WR.changeWRDataZoom(type);
     },
     resize() {
       if (this.klineConfig.platform === "pc") {
-        this.WR.resizeIndicatorChart(
+        this.WR.resizeWRChart(
           this.$refs.WR,
           this.resizeSize.isFullScreen,
           this.klineConfig.size
         );
       }
     },
     dispose() {
-      this.WR.disposeIndicatorEChart();
+      this.WR.disposeWREChart();
     }
   }
 };

diff --git a/src/components/klineChart.vue b/src/components/klineChart.vue
@@ -65,15 +65,15 @@
         <div v-show="showIndicatorOpt"
           style="background-color: #1e262c; margin-top: 30px; right: 660px; height: 100px; width: 212px;">
           <div class="indicatorOpt">
-            <div style="margin-left:10px">
+            <div style="margin-left:10px; padding-top:1px;">
               <font>{{message.indicator}}</font>
             </div>
             <div
               @click="showIndicatorOptions"
               style="margin-right: 10px; float:right; margin-top: -14px;"
               class="close-background-icon"
             ></div>
-            <div style="height: 0.05rem; background-color:#2b3944; margin-top:5px"></div>
+            <div style="height: 0.05rem; background-color:#2b3944; margin-top:3px"></div>
             <div
               @click="showIndicatorChart('MACD')"
               :class="this.showIndicator ==='MACD' ? 'chart-indicator-div-active' : 'chart-indicator-div'"
@@ -104,12 +104,12 @@
               >
               <div class="indicator-line">{{message.WR}}</div>
             </div>
-            <div
+            <!-- <div
               @click="showIndicatorChart('VR')"
               :class="this.showIndicator ==='VR' ? 'chart-indicator-div-active' : 'chart-indicator-div'"
               >
               <div class="indicator-line">{{message.VR}}</div>
-            </div>
+            </div> -->
           </div>
         </div>
 
@@ -145,7 +145,7 @@
         @mouseenter="enter()"
         @mouseleave="leave()"
       >
-        <div class="kline-levitation-icon" v-show="isShow">
+        <div class="kline-levitation-icon" >
           <div
             class="kline-levitation-btn"
             @mousedown="changeDataZoomByMouseDown('leftShift')"

diff --git a/src/components/mobileKline.vue b/src/components/mobileKline.vue
@@ -83,7 +83,8 @@
       <div class="mobile-indicator">
         <div class="indicator-font"><font>{{message.indicator}}</font></div>
             <!-- <div style="height: 0.05rem; background-color:#2b3944"></div> -->
-            <div @click = "showIndicatorChart('MACD')" :class = "this.showIndicator ==='MACD' ? 'mobile-indicator-div-active' : 'mobile-indicator-div'">
+        <div @click = "showIndicatorChart('MACD')" 
+          :class = "this.showIndicator ==='MACD' ? 'mobile-indicator-div-active' : 'mobile-indicator-div'">
               <div class = "indicator-mobile-line">{{message.MACD}}</div>
             </div>
         <div
@@ -110,12 +111,12 @@
         >
           <div class="indicator-mobile-line">{{message.WR}}</div>
         </div>
-        <div
+        <!-- <div
           @click="showIndicatorChart('VR')"
           :class="this.showIndicator ==='VR' ? 'mobile-indicator-div-active' : 'mobile-indicator-div'"
         >
           <div class="indicator-mobile-line">{{message.VR}}</div>
-        </div>
+        </div> -->
         <!-- <div @click = "showIndicatorChart('OBV')" :class = "this.showIndicator ==='OBV' ? 'mobile-indicator-div-active' : 'mobile-indicator-div'">
               <div class = "indicator-mobile-line">{{message.OBV}}</div>
             </div>