|
|
|
@ -1,41 +1,48 @@ |
|
|
|
<template> |
|
|
|
<view class="main"> |
|
|
|
<!-- nav --> |
|
|
|
<navigation>{{ 'BTC/USDT' }}</navigation> |
|
|
|
<navigation>{{ symbol.pair }}</navigation> |
|
|
|
<!-- 价格百分比 --> |
|
|
|
<view class="header"> |
|
|
|
<view class="top"> |
|
|
|
<!-- 实时价格 --> |
|
|
|
<text class="price">34985.93</text> |
|
|
|
<text class="price">{{parseFloat(marketDetail.close).toFixed(marketDetail.baseCoinScale)}}</text> |
|
|
|
<!-- 百分比,根据数据正负判断颜色 --> |
|
|
|
<text class="percent" :class="{ rise: false }">-15.30%</text> |
|
|
|
<text class="percent" |
|
|
|
:class="{ rise: marketDetail.percent>=0 }">{{marketDetail.percent>=0?'+'+marketDetail.percent:marketDetail.percent}}%</text> |
|
|
|
</view> |
|
|
|
<view class="bottom"> |
|
|
|
<view class="left"> |
|
|
|
<view class="title">{{ i18n.Highest }}</view> |
|
|
|
<view class="value">45930.24</view> |
|
|
|
<view class="value">{{marketDetail.high}}</view> |
|
|
|
</view> |
|
|
|
<view class="center"> |
|
|
|
<view class="title">{{ i18n.Lowest }}</view> |
|
|
|
<view class="value">45930.24</view> |
|
|
|
<view class="value">{{marketDetail.low}}</view> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="title">{{ i18n.Amount }}</view> |
|
|
|
<view class="value">28394893.30943094</view> |
|
|
|
<view class="value">{{marketDetail.amount}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tab"> |
|
|
|
<view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">1M |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">30M |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">60M |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">1D |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">30D |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tab"> |
|
|
|
<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week |
|
|
|
</view> |
|
|
|
<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- K线图 --> |
|
|
|
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive" |
|
|
|
@ -52,23 +59,23 @@ |
|
|
|
<view class="price">{{ i18n.BuyingPrice }}</view> |
|
|
|
</view> |
|
|
|
<view class="list"> |
|
|
|
<view class="item" v-for="(item, index) in buyList" :key="index"> |
|
|
|
<text class="price">0.87897874</text> |
|
|
|
<text class="num buy">{{ item }}</text> |
|
|
|
<view class="buybg" :style="`width: ${20 * index}%;`"></view> |
|
|
|
<view class="item" v-for="(item, index) in bboList.buy" :key="index"> |
|
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text> |
|
|
|
<text class="num buy">{{ item.price }}</text> |
|
|
|
<view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="box"> |
|
|
|
<view class="title"> |
|
|
|
<view class="quantity">{{ i18n.Quantity }}</view> |
|
|
|
<view class="price">{{ i18n.SellPrice20 }}</view> |
|
|
|
<view class="price">{{ i18n.SellPrice }}</view> |
|
|
|
</view> |
|
|
|
<view class="list"> |
|
|
|
<view class="item" v-for="(item, index) in sellList" :key="index"> |
|
|
|
<text class="price">0.87897874</text> |
|
|
|
<text class="num sell">{{ item }}</text> |
|
|
|
<view class="sellbg" :style="`width: ${20 * index}%;`"></view> |
|
|
|
<view class="item" v-for="(item, index) in bboList.sell" :key="index"> |
|
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text> |
|
|
|
<text class="num sell">{{ item.price }}</text> |
|
|
|
<view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -78,11 +85,11 @@ |
|
|
|
|
|
|
|
<view class="btn"> |
|
|
|
<!-- open按钮 --> |
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick"> |
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')"> |
|
|
|
{{ i18n.open }} |
|
|
|
</u-button> |
|
|
|
<!-- close按钮 --> |
|
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick"> |
|
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')"> |
|
|
|
{{ i18n.close }} |
|
|
|
</u-button> |
|
|
|
</view> |
|
|
|
@ -99,10 +106,16 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
buyList: 7, |
|
|
|
sellList: 9, |
|
|
|
kdata: [], |
|
|
|
type:1 |
|
|
|
kdata: {}, |
|
|
|
type: '1min', |
|
|
|
symbol: null, |
|
|
|
marketDetail: { |
|
|
|
close: 0, |
|
|
|
usdRate: 0 |
|
|
|
}, |
|
|
|
bboList: {}, |
|
|
|
webSocketChannel: {}, |
|
|
|
sum: {} |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -112,12 +125,283 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.kdata = this.splitData(ktest.JSON); |
|
|
|
//this.kdata = this.splitData(ktest.JSON); |
|
|
|
// console.log(this.kdata, 1111) |
|
|
|
}, |
|
|
|
onShow() {}, |
|
|
|
methods: { |
|
|
|
onShow() { |
|
|
|
this.into(); |
|
|
|
|
|
|
|
}, |
|
|
|
onHide() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
onUnload() { |
|
|
|
this.websock.closeSocket(); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
into() { |
|
|
|
this.symbol = uni.getStorageSync('symbol'); |
|
|
|
if (!this.symbol) { |
|
|
|
// #ifdef H5 |
|
|
|
history.back() |
|
|
|
// #endif |
|
|
|
|
|
|
|
// #ifdef APP-PLUS |
|
|
|
uni.navigateBack() |
|
|
|
// #endif |
|
|
|
} |
|
|
|
this.getMarketDetail(); |
|
|
|
this.initWebSocket(); |
|
|
|
this.getBboList() |
|
|
|
}, |
|
|
|
statisticsSum() { |
|
|
|
this.sum.buy = 0 |
|
|
|
this.sum.sell = 0 |
|
|
|
console.log(this.sum.buy); |
|
|
|
|
|
|
|
for (var buy in this.bboList.buy) { |
|
|
|
if (buy >= 8) { |
|
|
|
break; |
|
|
|
} |
|
|
|
this.sum.buy += parseFloat(this.bboList.buy[buy].size) |
|
|
|
} |
|
|
|
for (var sell in this.bboList.sell) { |
|
|
|
if (sell >= 8) { |
|
|
|
break; |
|
|
|
} |
|
|
|
this.sum.sell += parseFloat(this.bboList.sell[sell].size) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
onChangeType(type) { |
|
|
|
this.unsubkline(); |
|
|
|
this.type = type |
|
|
|
this.subKHistory() |
|
|
|
this.subkline(); |
|
|
|
}, |
|
|
|
|
|
|
|
formateDate(time) { |
|
|
|
var date = new Date(parseInt(time * 1000)); |
|
|
|
var Y = date.getFullYear(); |
|
|
|
var M = '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); |
|
|
|
var D = '-' + date.getDate(); |
|
|
|
var h = ' ' + date.getHours(); |
|
|
|
var m = ':' + date.getMinutes(); |
|
|
|
var s = ':' + date.getSeconds(); |
|
|
|
var time; |
|
|
|
if (this.type.indexOf('min') > -1) { |
|
|
|
time = Y + M + D + h + m; |
|
|
|
} else if (this.type === '1day' || this.type === '1week') { |
|
|
|
time = Y + M + D; |
|
|
|
} else { |
|
|
|
time = Y + M; |
|
|
|
} |
|
|
|
|
|
|
|
return time; |
|
|
|
}, |
|
|
|
getBboList() { |
|
|
|
const bboList = this.$api.bboList({ |
|
|
|
"symbol": this.symbol.symbol |
|
|
|
}); |
|
|
|
bboList.then(res => { |
|
|
|
console.log(9999999,res) |
|
|
|
this.bboList = res |
|
|
|
this.statisticsSum(); |
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
console.log(e) |
|
|
|
uni.showToast({ |
|
|
|
title: e, |
|
|
|
icon: 'none', |
|
|
|
duration: 2500 |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getMarketDetail() { |
|
|
|
const marketDetail = this.$api.marketDetail({ |
|
|
|
"symbol": this.symbol.symbol |
|
|
|
}); |
|
|
|
marketDetail.then(res => { |
|
|
|
this.marketDetail = res |
|
|
|
|
|
|
|
}) |
|
|
|
.catch(e => { |
|
|
|
console.log(e) |
|
|
|
uni.showToast({ |
|
|
|
title: e, |
|
|
|
icon: 'none', |
|
|
|
duration: 2500 |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
initWebSocket() { |
|
|
|
|
|
|
|
|
|
|
|
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL |
|
|
|
|
|
|
|
|
|
|
|
var that = this |
|
|
|
this.websock.getWebSocketMsg(data => { |
|
|
|
|
|
|
|
if (data.channel === 'conn') { |
|
|
|
that.websockId = data.data |
|
|
|
|
|
|
|
that.subbbo() |
|
|
|
that.submarketDetail() |
|
|
|
that.subKHistory() |
|
|
|
that.subkline(); |
|
|
|
} else if (data.channel === 'market.pairsgroup') { |
|
|
|
that.symbolList = data.data.USDT; |
|
|
|
} else if (data.channel === that.webSocketChannel.bbo) { |
|
|
|
that.bboList = data.data; |
|
|
|
|
|
|
|
} else if (data.channel === that.webSocketChannel.bbo) { |
|
|
|
that.bboList = data.data; |
|
|
|
that.statisticsSum(); |
|
|
|
|
|
|
|
} else if (data.channel === that.webSocketChannel.trade) { |
|
|
|
that.tradeList = data.data; |
|
|
|
} else if (data.channel === that.webSocketChannel.detail) { |
|
|
|
that.marketDetail = data.data; |
|
|
|
} else if (data.channel === that.webSocketChannel.kline) { |
|
|
|
if (data.event === 'req') { |
|
|
|
that.kdata = that.splitData(data.data) |
|
|
|
} else { |
|
|
|
that.upkline(data.data) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
//订阅交易对 |
|
|
|
subKHistory() { |
|
|
|
var toDate = parseInt(new Date().getTime() / 1000); |
|
|
|
var num = 100000; |
|
|
|
var fromDate = parseInt(new Date().getTime() / 1000); |
|
|
|
switch (this.type) { |
|
|
|
case '1min': |
|
|
|
fromDate = fromDate - num; |
|
|
|
break; |
|
|
|
case '5min': |
|
|
|
fromDate = fromDate - (5 * num); |
|
|
|
break; |
|
|
|
case '15min': |
|
|
|
fromDate = fromDate - (15 * num); |
|
|
|
break; |
|
|
|
case '30min': |
|
|
|
fromDate = fromDate - (30 * num); |
|
|
|
break; |
|
|
|
case '60min': |
|
|
|
fromDate = fromDate - (60 * num); |
|
|
|
break; |
|
|
|
case '1day': |
|
|
|
fromDate = fromDate - (60 * 24 * num); |
|
|
|
break; |
|
|
|
case '1week': |
|
|
|
fromDate = fromDate - (60 * 24 * 7 * num); |
|
|
|
break; |
|
|
|
case '1mon': |
|
|
|
fromDate = fromDate - (60 * 24 * 30 * num); |
|
|
|
break; |
|
|
|
} |
|
|
|
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type; |
|
|
|
const data = { |
|
|
|
event: 'req', |
|
|
|
type: 'kline', |
|
|
|
id: this.websockId, |
|
|
|
channel: [this.webSocketChannel.kline], |
|
|
|
fromDate: parseInt(fromDate), |
|
|
|
toDate: toDate |
|
|
|
}; |
|
|
|
|
|
|
|
this.websock.webSocketSendMsg(data) |
|
|
|
}, |
|
|
|
subkline() { |
|
|
|
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type; |
|
|
|
const data = { |
|
|
|
event: 'sub', |
|
|
|
type: 'kline', |
|
|
|
id: this.websockId, |
|
|
|
channel: [this.webSocketChannel.kline], |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
this.websock.webSocketSendMsg(data) |
|
|
|
}, |
|
|
|
|
|
|
|
unsubkline() { |
|
|
|
this.webSocketChannel.kline = 'market.' + this.symbol.symbol + ".kline." + this.type; |
|
|
|
const data = { |
|
|
|
event: 'un_sub', |
|
|
|
type: 'kline', |
|
|
|
id: this.websockId, |
|
|
|
channel: [this.webSocketChannel.kline], |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
this.websock.webSocketSendMsg(data) |
|
|
|
}, |
|
|
|
upkline(data) { |
|
|
|
|
|
|
|
if (data.id === this.kdata.values[this.kdata.values.length - 1][5]) { |
|
|
|
this.kdata.values.pop(); |
|
|
|
this.kdata.volumes.pop(); |
|
|
|
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]); |
|
|
|
this.kdata.volumes.push([this.kdata.volumes.length, data.high, data.open > data.close ? 1 : -1]) |
|
|
|
} else { |
|
|
|
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]); |
|
|
|
this.kdata.volumes.push([this.kdata.volumes.length, this.kdata.volumes.length, data.high, data.open > |
|
|
|
data.close ? 1 : -1 |
|
|
|
]) |
|
|
|
this.kdata.categoryData.push(this.formateDate(data.kTime)); |
|
|
|
} |
|
|
|
}, |
|
|
|
subbbo() { |
|
|
|
this.webSocketChannel.bbo = 'market.' + this.symbol.symbol + ".bbo"; |
|
|
|
this.subWebSocket('bbo', [this.webSocketChannel.bbo]) |
|
|
|
}, |
|
|
|
|
|
|
|
unsubbbo() { |
|
|
|
this.unsubWebSocket('bbo', [this.webSocketChannel.bbo]) |
|
|
|
}, |
|
|
|
subtrade() { |
|
|
|
this.webSocketChannel.trade = 'market.' + this.symbol.symbol + ".trade"; |
|
|
|
this.subWebSocket('trade', [this.webSocketChannel.trade]) |
|
|
|
}, |
|
|
|
|
|
|
|
unsubtrade() { |
|
|
|
this.unsubWebSocket('trade', [this.webSocketChannel.trade]) |
|
|
|
}, |
|
|
|
submarketDetail() { |
|
|
|
this.webSocketChannel.detail = 'market.' + this.symbol.symbol + ".detail"; |
|
|
|
this.subWebSocket('detail', [this.webSocketChannel.detail]) |
|
|
|
}, |
|
|
|
|
|
|
|
unsubmarketDetail() { |
|
|
|
this.unsubWebSocket('detail', [this.webSocketChannel.detail]) |
|
|
|
}, |
|
|
|
|
|
|
|
subWebSocket(type, channel) { |
|
|
|
const data = { |
|
|
|
event: 'sub', |
|
|
|
type: type, |
|
|
|
id: this.websockId, |
|
|
|
channel: channel |
|
|
|
}; |
|
|
|
|
|
|
|
this.websock.webSocketSendMsg(data) |
|
|
|
console.log("websocket发送", data); |
|
|
|
}, |
|
|
|
unsubWebSocket(type, channel) { |
|
|
|
const data = { |
|
|
|
event: 'un_sub', |
|
|
|
type: type, |
|
|
|
id: this.websockId, |
|
|
|
channel: channel |
|
|
|
}; |
|
|
|
this.websock.webSocketSendMsg(data) |
|
|
|
|
|
|
|
}, |
|
|
|
splitData(rawData) { |
|
|
|
@ -125,15 +409,20 @@ |
|
|
|
let values = []; |
|
|
|
let volumes = []; |
|
|
|
for (let i = 0; i < rawData.length; i++) { |
|
|
|
categoryData.push(rawData[i].splice(0, 1)[0]); |
|
|
|
values.push(rawData[i]); |
|
|
|
volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]); |
|
|
|
var ldata = rawData[i]; |
|
|
|
categoryData.push(this.formateDate(ldata.kTime)); |
|
|
|
|
|
|
|
values.push([ldata.open, ldata.close, ldata.low, ldata.high, ldata.kTime, ldata.id]); |
|
|
|
volumes.push([i, ldata.high, ldata.open > ldata.close ? 1 : -1]); |
|
|
|
} |
|
|
|
return { |
|
|
|
categoryData: categoryData, |
|
|
|
values: values, |
|
|
|
volumes: volumes |
|
|
|
volumes: volumes, |
|
|
|
webSocketChannel: this.webSocketChannel.kline |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
depthChange(e) { |
|
|
|
console.log(e); |
|
|
|
@ -150,19 +439,16 @@ |
|
|
|
uni.navigateTo({ |
|
|
|
url, |
|
|
|
}); |
|
|
|
}, |
|
|
|
openBtnClick(){ |
|
|
|
// let categoryData = []; |
|
|
|
// let values = []; |
|
|
|
// let volumes = []; |
|
|
|
// this.kdata.values.pop(); |
|
|
|
// this.kdata.volumes.pop(); |
|
|
|
this.kdata.values.push([17827.33+Math.floor(Math.random()*100), |
|
|
|
17829.73+Math.floor(Math.random()*100), |
|
|
|
17799.8+Math.floor(Math.random()*100), |
|
|
|
17877.84+Math.floor(Math.random()*100) , 85130000+Math.floor(Math.random()*100)]) |
|
|
|
this.kdata.volumes.push([3140,1688777777,1]) |
|
|
|
this.kdata.categoryData.push('2016-06-22') |
|
|
|
}, |
|
|
|
btnClick(type) { |
|
|
|
uni.setStorageSync('orderType',type); |
|
|
|
// #ifdef H5 |
|
|
|
history.back() |
|
|
|
// #endif |
|
|
|
|
|
|
|
// #ifdef APP-PLUS |
|
|
|
uni.navigateBack() |
|
|
|
// #endif |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
@ -172,7 +458,7 @@ |
|
|
|
let kline |
|
|
|
export default { |
|
|
|
mounted() { |
|
|
|
console.log('1111', this.kdata.categoryData); |
|
|
|
|
|
|
|
if (typeof window.echarts === 'function') { |
|
|
|
//this.initEcharts() |
|
|
|
} else { |
|
|
|
@ -187,16 +473,20 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
receive(newValue, oldValue, ownerVm, vm) { |
|
|
|
|
|
|
|
console.log('newValue', newValue) |
|
|
|
receive(newValue, oldValue, ownerVm, vm) { |
|
|
|
|
|
|
|
if (this.channel != newValue.webSocketChannel) { |
|
|
|
this.is = false |
|
|
|
} |
|
|
|
this.channel = newValue.webSocketChannel |
|
|
|
|
|
|
|
const script = document.createElement('script'); |
|
|
|
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 |
|
|
|
script.src = './static/echarts.js'; |
|
|
|
script.onload = this.upData.bind(this); |
|
|
|
document.head.appendChild(script); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
calculateMA(dayCount, data) { |
|
|
|
@ -217,12 +507,13 @@ |
|
|
|
upData(myChart) { |
|
|
|
const upColor = '#00C873'; |
|
|
|
const downColor = '#FF3750'; |
|
|
|
var chartDom = document.getElementById('kline'); |
|
|
|
if(!this.is){ |
|
|
|
this.myChart = echarts.init(chartDom); |
|
|
|
var chartDom = document.getElementById('kline'); |
|
|
|
if (!this.is) { |
|
|
|
console.log("this.is11111111", this.is) |
|
|
|
this.myChart = echarts.init(chartDom); |
|
|
|
} |
|
|
|
|
|
|
|
this.is=true; |
|
|
|
|
|
|
|
this.is = true; |
|
|
|
var option; |
|
|
|
this.myChart.setOption( |
|
|
|
(option = { |
|
|
|
@ -245,8 +536,8 @@ |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
onZero: false |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
@ -280,12 +571,12 @@ |
|
|
|
max: 'dataMax' |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [{ |
|
|
|
|
|
|
|
scale: true, |
|
|
|
|
|
|
|
axisLine: { |
|
|
|
|
|
|
|
yAxis: [{ |
|
|
|
position: 'right', |
|
|
|
scale: true, |
|
|
|
|
|
|
|
axisLine: { |
|
|
|
|
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
@ -326,7 +617,7 @@ |
|
|
|
|
|
|
|
visualMap: { |
|
|
|
show: false, |
|
|
|
seriesIndex: 1, |
|
|
|
seriesIndex: 5, |
|
|
|
dimension: 2, |
|
|
|
pieces: [{ |
|
|
|
value: 1, |
|
|
|
@ -338,17 +629,17 @@ |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
grid: [{ |
|
|
|
top: '8%', |
|
|
|
left: '50rpx', |
|
|
|
right: '10rpx', |
|
|
|
height: '60%', |
|
|
|
|
|
|
|
grid: [{ |
|
|
|
top: '8%', |
|
|
|
left: '10rpx', |
|
|
|
right: '50rpx', |
|
|
|
height: '60%', |
|
|
|
|
|
|
|
backgroundColor: 'transparent', |
|
|
|
}, |
|
|
|
{ |
|
|
|
left: '0%', |
|
|
|
right: '0%', |
|
|
|
left: '10rpx', |
|
|
|
right: '50rpx', |
|
|
|
top: '80%', |
|
|
|
height: '16%' |
|
|
|
} |
|
|
|
@ -369,7 +660,7 @@ |
|
|
|
} |
|
|
|
], |
|
|
|
series: [{ |
|
|
|
name: 'Dow-Jones index', |
|
|
|
|
|
|
|
type: 'candlestick', |
|
|
|
data: this.kdata.values, |
|
|
|
itemStyle: { |
|
|
|
@ -377,19 +668,20 @@ |
|
|
|
color0: downColor, |
|
|
|
borderColor: undefined, |
|
|
|
borderColor0: undefined |
|
|
|
}, |
|
|
|
markLine: { |
|
|
|
symbol: ['none', 'none'], |
|
|
|
data: [ |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
name: 'max line on close', |
|
|
|
type: 'max', |
|
|
|
valueDim: 'close' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
}, |
|
|
|
markLine: { |
|
|
|
symbol: ['none', 'none'], |
|
|
|
data: [ |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
name: 'max line on close', |
|
|
|
type: 'max', |
|
|
|
valueDim: 'highest' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
formatter: function(param) { |
|
|
|
param = param[0]; |
|
|
|
@ -404,6 +696,47 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'MA5', |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: this.calculateMA(5, this.kdata), |
|
|
|
smooth: true, |
|
|
|
lineStyle: { |
|
|
|
opacity: 0.5 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'MA10', |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: this.calculateMA(10, this.kdata), |
|
|
|
smooth: true, |
|
|
|
lineStyle: { |
|
|
|
opacity: 0.5 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'MA20', |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: this.calculateMA(20, this.kdata), |
|
|
|
smooth: true, |
|
|
|
lineStyle: { |
|
|
|
opacity: 0.5 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'MA30', |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: this.calculateMA(30, this.kdata), |
|
|
|
smooth: true, |
|
|
|
lineStyle: { |
|
|
|
opacity: 0.5 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
name: 'Volume', |
|
|
|
type: 'bar', |
|
|
|
@ -419,8 +752,8 @@ |
|
|
|
] |
|
|
|
}), |
|
|
|
true |
|
|
|
); |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -498,26 +831,29 @@ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.tab { |
|
|
|
display: flex; |
|
|
|
background:#000000; |
|
|
|
.item { |
|
|
|
height: 64rpx; |
|
|
|
line-height: 64rpx; |
|
|
|
flex: 1; |
|
|
|
font-size: 24rpx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&.select { |
|
|
|
background: rgba(0, 232, 162,0.3); |
|
|
|
border-radius: 19px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab { |
|
|
|
display: flex; |
|
|
|
background: #000000; |
|
|
|
|
|
|
|
.item { |
|
|
|
height: 64rpx; |
|
|
|
line-height: 64rpx; |
|
|
|
flex: 1; |
|
|
|
font-size: 24rpx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&.select { |
|
|
|
background: rgba(0, 232, 162, 0.3); |
|
|
|
border-radius: 19px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.kline { |
|
|
|
|
|
|
|
|
|
|
|
background: #000000; |
|
|
|
} |
|
|
|
|
|
|
|
@ -533,7 +869,7 @@ |
|
|
|
display: flex; |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
.box { |
|
|
|
.box { |
|
|
|
padding-left: 32rpx; |
|
|
|
flex: 1; |
|
|
|
overflow: hidden; |
|
|
|
|
