Skip to content

Commit

Permalink
点击左移/右移时，画面持续移动，松开停止
Browse files Browse the repository at this point in the history
  • Loading branch information
@zcZhang123
zcZhang123 committed Apr 26, 2019
1 parent 5bf3df9 commit a4820cf
Showing 1 changed file with 95 additions and 44 deletions.
139 changes: 95 additions & 44 deletions src/components/klineChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,20 @@
</el-popover>
</div>-->

<div v-show="showChart==='candle'"
<div
v-show="showChart==='candle'"
style="position: absolute;right:154px;top:3px;z-index:5;"
class="icon-indicator-div">
<i v-show="true" @click="showIndicatorOptions" :class="this.showIndicatorOpt ? 'icon iconfont icon-indicator-ed' : 'icon iconfont icon-indicator'">
<span v-show="true" :class=" message.language === 'zh' ? 'icon-indicator-ch' : 'icon-indicator-en'">
class="icon-indicator-div"
>
<i
v-show="true"
@click="showIndicatorOptions"
:class="this.showIndicatorOpt ? 'icon iconfont icon-indicator-ed' : 'icon iconfont icon-indicator'"
>
<span
v-show="true"
:class=" message.language === 'zh' ? 'icon-indicator-ch' : 'icon-indicator-en'"
>
<font style="font-size:14px;line-height:22px;">{{message.indicator}}</font>
</span>
</i>
Expand All @@ -69,26 +78,40 @@
style="margin-left: 10px;margin-right: 20px;"
>{{message.depth}}</div>

<div v-show="showIndicatorOpt" style="background-color: #1e262c; margin-top: 30px; right: 660px; height: 100px; width: 212px;">
<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">
<font>{{message.indicator}}</font>
</div>
<div @click="showIndicatorOptions" style="margin-right: 10px; float:right; margin-top: -14px;" class="close-background-icon">
</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 @click = "showIndicatorChart('MACD')" :class = "this.showIndicator ==='MACD' ? 'chart-indicator-div-active' : 'chart-indicator-div'">
<div class = "indicator-line">{{message.MACD}}</div>
<div
@click="showIndicatorChart('MACD')"
:class="this.showIndicator ==='MACD' ? 'chart-indicator-div-active' : 'chart-indicator-div'"
>
<div class="indicator-line">{{message.MACD}}</div>
</div>
<div @click = "showIndicatorChart('KDJ')" :class = "this.showIndicator ==='KDJ' ? 'chart-indicator-div-active' : 'chart-indicator-div'">
<div class = "indicator-line">{{message.KDJ}}</div>
<div
@click="showIndicatorChart('KDJ')"
:class="this.showIndicator ==='KDJ' ? 'chart-indicator-div-active' : 'chart-indicator-div'"
>
<div class="indicator-line">{{message.KDJ}}</div>
</div>
<div @click = "showIndicatorChart('RSI')" :class = "this.showIndicator ==='RSI' ? 'chart-indicator-div-active' : 'chart-indicator-div'">
<div class = "indicator-line">{{message.RSI}}</div>
<div
@click="showIndicatorChart('RSI')"
:class="this.showIndicator ==='RSI' ? 'chart-indicator-div-active' : 'chart-indicator-div'"
>
<div class="indicator-line">{{message.RSI}}</div>
</div>
</div>
</div>


<!-- <span @click = "changeChart('timeSharing')" :class = "this.showChart === 'timeSharing' ? 'chart-div chart-btn-active' : 'chart-div chart-btn'">timeSharing</span> -->
</div>
Expand Down Expand Up @@ -123,7 +146,11 @@
@mouseleave="leave()"
>
<div class="kline-levitation-icon" v-show="isShow">
<div class="kline-levitation-btn" @click="changeDataZoom('leftShift')">
<div
class="kline-levitation-btn"
@mousedown="changeDataZoomByMouseDown('leftShift')"
@mouseup="removeChangeDataZoom()"
>
<div class="left-shift-icon"></div>
</div>
<div class="kline-levitation-btn" @click="changeDataZoom('enlarge')">
Expand All @@ -135,7 +162,11 @@
<div class="kline-levitation-btn" @click="changeDataZoom('narrow')">
<i class="narrow-icon"></i>
</div>
<div class="kline-levitation-btn" @click="changeDataZoom('rightShift')">
<div
class="kline-levitation-btn"
@mousedown="changeDataZoomByMouseDown('rightShift')"
@mouseup="removeChangeDataZoom()"
>
<i class="right-shift-icon"></i>
</div>
</div>
Expand Down Expand Up @@ -168,7 +199,7 @@
:cycle="cycle"
></Volume>
<MACD
ref="macd"
ref="macd"
v-show="showIndicator === 'MACD' && showChart !== 'depth'"
v-on:listenMacdChartClose="getMacdClose"
v-on:listenToTipIndex="getTipDataIndex"
Expand All @@ -178,25 +209,27 @@
:resize-size="resizeSize"
:cycle="cycle"
></MACD>
<KDJ ref = "stochastic"
<KDJ
ref="stochastic"
v-show="showIndicator === 'KDJ' && showChart !== 'depth'"
@listenIndicatorChartClose = 'closeIndicatorChart'
v-on:listenToTipIndex = "getTipDataIndex"
:toolTipIndex = "toolTipIndex"
:kline-config = "klineConfig"
:chart-data-obj = "chartDataObj"
:resize-size = "resizeSize"
:cycle = "cycle"
@listenIndicatorChartClose="closeIndicatorChart"
v-on:listenToTipIndex="getTipDataIndex"
:toolTipIndex="toolTipIndex"
:kline-config="klineConfig"
:chart-data-obj="chartDataObj"
:resize-size="resizeSize"
:cycle="cycle"
></KDJ>
<RSI ref = "rsi"
<RSI
ref="rsi"
v-show="showIndicator === 'RSI' && showChart !== 'depth'"
@listenIndicatorChartClose = 'closeIndicatorChart'
v-on:listenToTipIndex = "getTipDataIndex"
:toolTipIndex = "toolTipIndex"
:kline-config = "klineConfig"
:chart-data-obj = "chartDataObj"
:resize-size = "resizeSize"
:cycle = "cycle"
@listenIndicatorChartClose="closeIndicatorChart"
v-on:listenToTipIndex="getTipDataIndex"
:toolTipIndex="toolTipIndex"
:kline-config="klineConfig"
:chart-data-obj="chartDataObj"
:resize-size="resizeSize"
:cycle="cycle"
></RSI>
<!-- <PSY ref = "indicator"
v-show="showIndicator === 'PSY' && showChart !== 'depth'"
Expand Down Expand Up @@ -227,8 +260,8 @@
:chart-data-obj = "chartDataObj"
:resize-size = "resizeSize"
:cycle = "cycle"
></VR> -->
<!-- <BRAR ref = "indicator" v-show = "showIndicator === 'BRAR' && showChart !== 'depth'" @listenIndicatorChartClose = 'closeIndicatorChart' v-on:listenToTipIndex = "getTipDataIndex" :toolTipIndex = "toolTipIndex" :kline-config = "klineConfig" :chart-data-obj = "chartDataObj" :resize-size = "resizeSize" :cycle = "cycle"></BRAR> -->
></VR>-->
<!-- <BRAR ref = "indicator" v-show = "showIndicator === 'BRAR' && showChart !== 'depth'" @listenIndicatorChartClose = 'closeIndicatorChart' v-on:listenToTipIndex = "getTipDataIndex" :toolTipIndex = "toolTipIndex" :kline-config = "klineConfig" :chart-data-obj = "chartDataObj" :resize-size = "resizeSize" :cycle = "cycle"></BRAR> -->
</fullscreen>
</div>
</template>
Expand All @@ -240,14 +273,19 @@ import KLine from "./kline.vue";
import Depth from "./marketDepth.vue";
import Volume from "./volumeChart.vue";
import MACD from "./MACDChart.vue";
import KDJ from "./KDJChart.vue";
import RSI from "./RSIChart.vue"
import KDJ from "./KDJChart.vue";
import RSI from "./RSIChart.vue";
// import BRAR from "./BRARChart.vue";
// import PSY from "./PSYChart.vue";
// import ROC from "./ROCChart.vue";
// import VR from "./VRChart.vue";
import { getLanguage, getDefaultChartSize, formatDecimal } from "../js/utils";
import { splitData, getDepthData, handleDivisionData, calculateMA } from "../js/processData";
import {
splitData,
getDepthData,
handleDivisionData,
calculateMA
} from "../js/processData";
export default {
name: "klineChart",
components: {
Expand Down Expand Up @@ -292,7 +330,9 @@ export default {
isClose: true,
showIndicatorOpt: false,
showIndicator: "",
isClose: true
isClose: true,
interval: null,
changeDataZoomType: ""
};
},
props: {
Expand Down Expand Up @@ -534,13 +574,24 @@ export default {
}
this.showChart = type;
},
changeDataZoomByMouseDown(type) {
this.changeDataZoomType = type;
this.changeDataZoom(type);
this.interval = setInterval(this.changeDataZoom, 600);
},
removeChangeDataZoom() {
clearInterval(this.interval);
},
changeDataZoom(type) {
if (type) {
this.changeDataZoomType = type;
}
if (this.showChart !== "depth") {
this.$refs.candle.changeDataZoom(type);
this.$refs.volume.changeDataZoom(type);
this.$refs.macd.changeDataZoom(type);
this.$refs.stochastic.changeDataZoom(type);
this.$refs.rsi.changeDataZoom(type);
this.$refs.candle.changeDataZoom(this.changeDataZoomType);
this.$refs.volume.changeDataZoom(this.changeDataZoomType);
this.$refs.macd.changeDataZoom(this.changeDataZoomType);
this.$refs.stochastic.changeDataZoom(this.changeDataZoomType);
this.$refs.rsi.changeDataZoom(this.changeDataZoomType);
}
},
fullScreenToggle() {
Expand Down

0 comments on commit a4820cf

Please sign in to comment.