|
|
|
@ -26,7 +26,9 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- K线图 --> |
|
|
|
<view class="kline"> |
|
|
|
<view class="kline" id="kline" :kdata="kdata" |
|
|
|
:change:kdata="klineE.receive" style="height:1000rpx;color:aliceblue "> |
|
|
|
|
|
|
|
</view> |
|
|
|
<!-- 买卖挂牌表 --> |
|
|
|
<view class="MarketTrades"> |
|
|
|
@ -77,12 +79,15 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
import ktest from '@/utils/ktest.js' |
|
|
|
export default { |
|
|
|
name: "trade", |
|
|
|
components: { ktest }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
buyList: 7, |
|
|
|
sellList: 9, |
|
|
|
kdata:[] |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -92,10 +97,29 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
|
|
|
|
this.kdata=this.splitData(ktest.JSON); |
|
|
|
console.log(this.kdata,1111) |
|
|
|
}, |
|
|
|
onShow() { }, |
|
|
|
onShow() {}, |
|
|
|
methods: { |
|
|
|
into(){ |
|
|
|
|
|
|
|
}, |
|
|
|
splitData(rawData) { |
|
|
|
let categoryData = []; |
|
|
|
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]); |
|
|
|
} |
|
|
|
return { |
|
|
|
categoryData: categoryData, |
|
|
|
values: values, |
|
|
|
volumes: volumes |
|
|
|
}; |
|
|
|
}, |
|
|
|
depthChange(e) { |
|
|
|
console.log(e); |
|
|
|
}, |
|
|
|
@ -114,11 +138,255 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<script module="klineE" lang="renderjs"> |
|
|
|
let kline |
|
|
|
export default { |
|
|
|
mounted() { |
|
|
|
console.log(0); |
|
|
|
console.log(window); |
|
|
|
console.log(typeof window.echarts); |
|
|
|
// this.initEcharts(); |
|
|
|
if (typeof window.echarts === 'object') { |
|
|
|
//this.initEcharts() |
|
|
|
} else if (typeof window.echarts === 'function') { |
|
|
|
//this.initEcharts() |
|
|
|
} else { |
|
|
|
// console.log(1); |
|
|
|
// // 动态引入较大类库避免影响页面展示 |
|
|
|
// const script = document.createElement('script'); |
|
|
|
// console.log(2); |
|
|
|
// //this.kdata=this.splitData(this.kdata); |
|
|
|
// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 |
|
|
|
// script.src = './static/echarts.js'; |
|
|
|
// console.log(3); |
|
|
|
// script.onload = this.initEcharts.bind(this); |
|
|
|
// console.log(4); |
|
|
|
// document.head.appendChild(script); |
|
|
|
// console.log(5); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
receive(newValue, oldValue, ownerVm, vm) { |
|
|
|
console.log('newValue', newValue) |
|
|
|
const script = document.createElement('script'); |
|
|
|
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 |
|
|
|
script.src = './static/echarts.js'; |
|
|
|
console.log(3); |
|
|
|
script.onload = this.upData.bind(this); |
|
|
|
console.log(4); |
|
|
|
document.head.appendChild(script); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
calculateMA(dayCount, data) { |
|
|
|
var result = []; |
|
|
|
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 = '#00da3c'; |
|
|
|
const downColor = '#ec0000'; |
|
|
|
var chartDom = document.getElementById('kline'); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
myChart.setOption( |
|
|
|
(option = { |
|
|
|
animation: false, |
|
|
|
legend: { |
|
|
|
bottom: 10, |
|
|
|
left: 'center', |
|
|
|
data: [] |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross' |
|
|
|
}, |
|
|
|
borderWidth: 1, |
|
|
|
borderColor: '#ccc', |
|
|
|
padding: 10, |
|
|
|
textStyle: { |
|
|
|
color: '#ffffff' |
|
|
|
}, |
|
|
|
position: function (pos, params, el, elRect, size) { |
|
|
|
const obj = { |
|
|
|
top: 10 |
|
|
|
}; |
|
|
|
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; |
|
|
|
return obj; |
|
|
|
} |
|
|
|
// extraCssText: 'width: 170px' |
|
|
|
}, |
|
|
|
axisPointer: { |
|
|
|
link: [ |
|
|
|
{ |
|
|
|
xAxisIndex: 'all' |
|
|
|
} |
|
|
|
], |
|
|
|
label: { |
|
|
|
backgroundColor: '#fff' |
|
|
|
} |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
dataZoom: { |
|
|
|
yAxisIndex: false |
|
|
|
}, |
|
|
|
brush: { |
|
|
|
type: ['lineX', 'clear'] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
brush: { |
|
|
|
xAxisIndex: 'all', |
|
|
|
brushLink: 'all', |
|
|
|
outOfBrush: { |
|
|
|
colorAlpha: 0.1 |
|
|
|
} |
|
|
|
}, |
|
|
|
visualMap: { |
|
|
|
show: false, |
|
|
|
seriesIndex: 5, |
|
|
|
dimension: 2, |
|
|
|
pieces: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
color: downColor |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: -1, |
|
|
|
color: upColor |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
grid: [ |
|
|
|
{ |
|
|
|
left: '10%', |
|
|
|
right: '8%', |
|
|
|
height: '50%' |
|
|
|
}, |
|
|
|
{ |
|
|
|
left: '10%', |
|
|
|
right: '8%', |
|
|
|
top: '63%', |
|
|
|
height: '16%' |
|
|
|
} |
|
|
|
], |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
data: this.kdata.categoryData, |
|
|
|
boundaryGap: false, |
|
|
|
axisLine: { onZero: 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: [ |
|
|
|
{ |
|
|
|
scale: true, |
|
|
|
splitArea: { |
|
|
|
show: true |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
scale: true, |
|
|
|
gridIndex: 1, |
|
|
|
splitNumber: 2, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisLine: { show: false }, |
|
|
|
axisTick: { show: false }, |
|
|
|
splitLine: { show: false } |
|
|
|
} |
|
|
|
], |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
xAxisIndex: [0, 1], |
|
|
|
start: 98, |
|
|
|
end: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
show: true, |
|
|
|
xAxisIndex: [0, 1], |
|
|
|
type: 'slider', |
|
|
|
top: '85%', |
|
|
|
start: 98, |
|
|
|
end: 100 |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Dow-Jones index', |
|
|
|
type: 'candlestick', |
|
|
|
data: this.kdata.values, |
|
|
|
itemStyle: { |
|
|
|
color: upColor, |
|
|
|
color0: downColor, |
|
|
|
borderColor: undefined, |
|
|
|
borderColor0: undefined |
|
|
|
}, |
|
|
|
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(''); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
}), |
|
|
|
true |
|
|
|
); |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// 如果 `question` 发生改变，这个函数就会运行 |
|
|
|
columData: function(newQuestion, oldQuestion) { |
|
|
|
|
|
|
|
// this.updateEcharts(this.option) |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.main { |
|
|
|
.main { |
|
|
|
|
|
|
|
.header { |
|
|
|
background: #000000; |
|
|
|
@ -296,5 +564,5 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
vee
3 years ago