|
|
|
@ -70,15 +70,15 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="btn"> |
|
|
|
<!-- open按钮 --> |
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')"> |
|
|
|
{{ i18n.LONG }} |
|
|
|
{{ i18n.open }} |
|
|
|
</u-button> |
|
|
|
<!-- close按钮 --> |
|
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')"> |
|
|
|
{{ i18n.SHORT }} |
|
|
|
{{ i18n.close }} |
|
|
|
</u-button> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -292,22 +292,11 @@ |
|
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.detail') { |
|
|
|
that.marketDetail = data.data; |
|
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + ".kline." + that.type) { |
|
|
|
// console.log('k线回来') |
|
|
|
if (data.event === 'req') { |
|
|
|
<<<<<<< HEAD |
|
|
|
//that.kdata = that.splitData(data.data) |
|
|
|
} else { |
|
|
|
//that.upkline(data.data) |
|
|
|
======= |
|
|
|
// console.log('k线回来req') |
|
|
|
// console.log(11111,data) |
|
|
|
that.kdata = that.splitData(data.data) |
|
|
|
} else { |
|
|
|
|
|
|
|
that.upkline(data.data) |
|
|
|
>>>>>>> 1e578ec94e2ad85c6c797e5669f396b7f88e1b91 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
@ -343,320 +332,6 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<<<<<<< HEAD |
|
|
|
======= |
|
|
|
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) { |
|
|
|
var result = []; |
|
|
|
if(data.values){ |
|
|
|
for (var i = 0, len = data.values.length; i < len; i++) { |
|
|
|
if (i < dayCount) { |
|
|
|
result.push('-'); |
|
|
|
continue; |
|
|
|
} |
|
|
|
var sum = 0; |
|
|
|
for (var j = 0; j < dayCount; j++) { |
|
|
|
sum += data.values[i - j][1]; |
|
|
|
} |
|
|
|
result.push(+(sum / dayCount).toFixed(3)); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
return result; |
|
|
|
}, |
|
|
|
upData(myChart) { |
|
|
|
const upColor = '#00C873'; |
|
|
|
const downColor = '#FF3750'; |
|
|
|
var chartDom = document.getElementById('kline'); |
|
|
|
if (!this.is) { |
|
|
|
// console.log("this.is11111111", this.is) |
|
|
|
this.myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
if(this.kdata.categoryData){ |
|
|
|
if (this.kdata.categoryData.length < 100) { |
|
|
|
this.start = 50 |
|
|
|
this.end = 100 |
|
|
|
} else if (this.kdata.categoryData.length < 200) { |
|
|
|
this.start = 85 |
|
|
|
this.end = 100 |
|
|
|
} else { |
|
|
|
this.start = 98 |
|
|
|
this.end = 100 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
// console.log(this.myChart.getModel().option.dataZoom[0].start) |
|
|
|
this.start = this.myChart.getModel().option.dataZoom[0].start |
|
|
|
this.end = this.myChart.getModel().option.dataZoom[0].end |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.is = true; |
|
|
|
var option; |
|
|
|
this.myChart.setOption( |
|
|
|
(option = { |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
animation: false, |
|
|
|
type: 'cross', |
|
|
|
lineStyle: { |
|
|
|
width: 1, |
|
|
|
opacity: 3 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: 'category', |
|
|
|
data: this.kdata.categoryData, |
|
|
|
boundaryGap: false, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
onZero: false |
|
|
|
}, |
|
|
|
|
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
min: 'dataMin', |
|
|
|
max: 'dataMax', |
|
|
|
axisPointer: { |
|
|
|
z: 100 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
gridIndex: 1, |
|
|
|
data: this.kdata.categoryData, |
|
|
|
boundaryGap: false, |
|
|
|
axisLine: { |
|
|
|
onZero: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
min: 'dataMin', |
|
|
|
max: 'dataMax' |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [{ |
|
|
|
position: 'right', |
|
|
|
scale: true, |
|
|
|
|
|
|
|
axisLine: { |
|
|
|
|
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
splitArea: { |
|
|
|
show: false, // areaStyle: { |
|
|
|
// color: 'transparency', |
|
|
|
// }, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
// 使用深浅的间隔色 |
|
|
|
color: ['#211F32'] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
scale: true, |
|
|
|
gridIndex: 1, |
|
|
|
splitNumber: 2, |
|
|
|
axisLabel: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
visualMap: { |
|
|
|
show: false, |
|
|
|
seriesIndex: 5, |
|
|
|
dimension: 2, |
|
|
|
pieces: [{ |
|
|
|
value: 1, |
|
|
|
color: downColor |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: -1, |
|
|
|
color: upColor |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
grid: [{ |
|
|
|
top: '8%', |
|
|
|
left: '10rpx', |
|
|
|
right: '50rpx', |
|
|
|
height: '60%', |
|
|
|
|
|
|
|
backgroundColor: 'transparent', |
|
|
|
}, |
|
|
|
{ |
|
|
|
left: '10rpx', |
|
|
|
right: '50rpx', |
|
|
|
top: '80%', |
|
|
|
height: '16%' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
dataZoom: [{ |
|
|
|
type: 'inside', |
|
|
|
start: this.start, |
|
|
|
end: this.end |
|
|
|
}, |
|
|
|
{ |
|
|
|
show: false, |
|
|
|
xAxisIndex: [0, 1], |
|
|
|
type: 'slider', |
|
|
|
top: '85%', |
|
|
|
start: this.start, |
|
|
|
end: this.end |
|
|
|
} |
|
|
|
], |
|
|
|
series: [{ |
|
|
|
|
|
|
|
type: 'candlestick', |
|
|
|
data: this.kdata.values, |
|
|
|
itemStyle: { |
|
|
|
color: upColor, |
|
|
|
color0: downColor, |
|
|
|
borderColor: undefined, |
|
|
|
borderColor0: undefined |
|
|
|
}, |
|
|
|
markLine: { |
|
|
|
symbol: ['none', 'none'], |
|
|
|
data: [ |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
name: 'max line on close', |
|
|
|
type: 'max', |
|
|
|
valueDim: 'highest' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
formatter: function(param) { |
|
|
|
param = param[0]; |
|
|
|
return [ |
|
|
|
'Date: ' + param.name + |
|
|
|
'<hr size=1 style="margin: 3px 0">', |
|
|
|
'Open: ' + param.data[0] + '<br/>', |
|
|
|
'Close: ' + param.data[1] + '<br/>', |
|
|
|
'Lowest: ' + param.data[2] + '<br/>', |
|
|
|
'Highest: ' + param.data[3] + '<br/>' |
|
|
|
].join(''); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
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', |
|
|
|
xAxisIndex: 1, |
|
|
|
yAxisIndex: 1, |
|
|
|
data: this.kdata.volumes, |
|
|
|
itemStyle: { |
|
|
|
color: upColor, |
|
|
|
borderColor: undefined, |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
}), |
|
|
|
true |
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// 如果 `question` 发生改变，这个函数就会运行 |
|
|
|
columData: function(newQuestion, oldQuestion) { |
|
|
|
|
|
|
|
// this.updateEcharts(this.option) |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
>>>>>>> 1e578ec94e2ad85c6c797e5669f396b7f88e1b91 |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.main { |
|
|
|
|
