liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

k线完善

master
vee 3 years ago
parent
2a492b6be3
commit
5fb85d2605
2 changed files with 447 additions and 396 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      main.js
  2. 841
      pages/markets/kLine.vue

2
main.js
View File

@ -16,7 +16,7 @@ Vue.prototype.$api = api
// 自定义底部导航栏 // 自定义底部导航栏
import tabBar from 'components/tabBar/tabBar.vue' import tabBar from 'components/tabBar/tabBar.vue'
Vue.component('tab-bar', tabBar) Vue.component('tab-bar', tabBar)
window.wx = {}
Vue.use(uView); Vue.use(uView);
uni.$u.config.unit = 'rpx' uni.$u.config.unit = 'rpx'

841
pages/markets/kLine.vue
View File

@ -24,10 +24,22 @@
<view class="value">28394893.30943094</view> <view class="value">28394893.30943094</view>
</view> </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>
<!-- K线图 --> <!-- K线图 -->
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive" <view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
style="height:1000rpx;color:aliceblue "> style="height:500rpx;width: 100%;position: relative; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
</view> </view>
<!-- 买卖挂牌表 --> <!-- 买卖挂牌表 -->
@ -79,72 +91,88 @@
</template> </template>
<script> <script>
import ktest from '@/utils/ktest.js' import ktest from '@/utils/ktest.js'
export default { export default {
name: "trade", name: "trade",
components: { ktest }, components: {
data() { ktest
return {
buyList: 7,
sellList: 9,
kdata: []
};
},
computed: {
i18n() {
return this.$t("markets");
},
},
onLoad() {
this.kdata = this.splitData(ktest.JSON);
// console.log(this.kdata, 1111)
},
onShow() { },
methods: {
into() {
}, },
splitData(rawData) { data() {
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 { return {
categoryData: categoryData, buyList: 7,
values: values, sellList: 9,
volumes: volumes kdata: [],
type:1
}; };
}, },
depthChange(e) { computed: {
console.log(e); i18n() {
return this.$t("markets");
},
},
onLoad() {
this.kdata = this.splitData(ktest.JSON);
// console.log(this.kdata, 1111)
}, },
goto(page) { onShow() {},
let url = ''; methods: {
switch (page) { into() {
case 'kLine':
url = '/pages/markets/kLine' },
break; splitData(rawData) {
default: let categoryData = [];
break; 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);
},
goto(page) {
let url = '';
switch (page) {
case 'kLine':
url = '/pages/markets/kLine'
break;
default:
break;
}
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')
} }
uni.navigateTo({
url,
});
}
}, },
} }
</script> </script>
<script module="klineE" lang="renderjs"> <script module="klineE" lang="renderjs">
let kline let kline
export default { export default {
mounted() { mounted() {
console.log('1111',this.kdata); console.log('1111', this.kdata.categoryData);
if (typeof window.echarts === 'function') { if (typeof window.echarts === 'function') {
//this.initEcharts() //this.initEcharts()
} else { } else {
@ -159,16 +187,18 @@ export default {
}, },
methods: { methods: {
receive(newValue, oldValue, ownerVm, vm) { receive(newValue, oldValue, ownerVm, vm) {
console.log('newValue', newValue) console.log('newValue', newValue)
const script = document.createElement('script'); const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算 // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = './static/echarts.js'; script.src = './static/echarts.js';
script.onload = this.upData.bind(this); script.onload = this.upData.bind(this);
document.head.appendChild(script); document.head.appendChild(script);
}, },
calculateMA(dayCount, data) { calculateMA(dayCount, data) {
var result = []; var result = [];
for (var i = 0, len = data.values.length; i < len; i++) { for (var i = 0, len = data.values.length; i < len; i++) {
@ -184,207 +214,212 @@ export default {
} }
return result; return result;
}, },
upData(myChart){ upData(myChart) {
const upColor = '#00C873'; const upColor = '#00C873';
const downColor = '#FF3750'; const downColor = '#FF3750';
var chartDom = document.getElementById('kline'); var chartDom = document.getElementById('kline');
var myChart = echarts.init(chartDom); if(!this.is){
this.myChart = echarts.init(chartDom);
}
this.is=true;
var option; var option;
myChart.setOption( this.myChart.setOption(
(option = { (option = {
animation: false,
legend: { tooltip: {
bottom: 10, trigger: 'axis',
left: 'center', axisPointer: {
data: [] animation: false,
}, type: 'cross',
tooltip: { lineStyle: {
trigger: 'axis', width: 1,
axisPointer: { opacity: 3
type: 'cross' }
}, }
borderWidth: 1, },
borderColor: '#ccc', xAxis: [{
padding: 10, type: 'category',
textStyle: { data: this.kdata.categoryData,
color: '#ffffff' boundaryGap: false,
}, axisLine: {
position: function (pos, params, el, elRect, size) { show: false,
const obj = { onZero: false
top: 10 },
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; axisTick: {
return obj; show: false
} },
// extraCssText: 'width: 170px' splitLine: {
}, show: false
axisPointer: { },
link: [ min: 'dataMin',
{ max: 'dataMax',
xAxisIndex: 'all' axisPointer: {
} z: 100
], }
label: { },
backgroundColor: '#fff' {
} type: 'category',
}, gridIndex: 1,
toolbox: { data: this.kdata.categoryData,
feature: { boundaryGap: false,
dataZoom: { axisLine: {
yAxisIndex: false onZero: false
}, },
brush: { axisTick: {
type: ['lineX', 'clear'] show: false
} },
} splitLine: {
}, show: false
brush: { },
xAxisIndex: 'all', axisLabel: {
brushLink: 'all', show: false
outOfBrush: { },
colorAlpha: 0.1 min: 'dataMin',
} max: 'dataMax'
}, }
visualMap: { ],
show: false, yAxis: [{
seriesIndex: 5,
dimension: 2, scale: true,
pieces: [
{ axisLine: {
value: 1,
color: downColor show: false
}, },
{ axisTick: {
value: -1, show: true
color: upColor },
} splitArea: {
] show: false, // areaStyle: {
}, // color: 'transparency',
grid: [ // },
{ },
left: '10%', splitLine: {
right: '0%', show: true,
height: '50%', lineStyle: {
backgroundColor:'transparent', // 使用深浅的间隔色
}, color: ['#211F32']
{ }
left: '10%', }
right: '0%', },
top: '63%', {
height: '16%' scale: true,
} gridIndex: 1,
], splitNumber: 2,
xAxis: [ axisLabel: {
{ show: false
type: 'category', },
data: this.kdata.categoryData, axisLine: {
boundaryGap: false, show: false
axisLine: {show: false, onZero: false }, },
axisTick: { show: false }, axisTick: {
splitLine: { show: false }, show: false
min: 'dataMin', },
max: 'dataMax', splitLine: {
axisPointer: { show: false
z: 100 }
} }
}, ],
{
type: 'category',
gridIndex: 1, visualMap: {
data: this.kdata.categoryData, show: false,
boundaryGap: false, seriesIndex: 1,
axisLine: { onZero: false }, dimension: 2,
axisTick: { show: false }, pieces: [{
splitLine: { show: false }, value: 1,
axisLabel: { show: false }, color: downColor
min: 'dataMin', },
max: 'dataMax' {
} value: -1,
], color: upColor
yAxis: [ }
{ ]
scale: true, },
axisLine: { show: false }, grid: [{
axisTick: { show: false }, top: '8%',
splitArea: { left: '50rpx',
show: false, right: '10rpx',
// areaStyle: { height: '60%',
// color: 'transparency', backgroundColor: 'transparent',
// }, },
}, {
splitLine: { show: true, left: '0%',
lineStyle: { right: '0%',
// 使用深浅的间隔色 top: '80%',
color: ['#211F32'] height: '16%'
} }
} ],
},
{ dataZoom: [{
scale: true, type: 'inside',
gridIndex: 1, start: 98,
splitNumber: 2, end: 100
axisLabel: { show: false }, },
axisLine: { show: false }, {
axisTick: { show: false }, show: false,
splitLine: { show: false } xAxisIndex: [0, 1],
} type: 'slider',
], top: '85%',
dataZoom: [ start: 98,
{ end: 100
type: 'inside', }
xAxisIndex: [0, 1], ],
start: 98, series: [{
end: 100 name: 'Dow-Jones index',
}, type: 'candlestick',
{ data: this.kdata.values,
show: true, itemStyle: {
xAxisIndex: [0, 1], color: upColor,
type: 'slider', color0: downColor,
top: '85%', borderColor: undefined,
start: 98, borderColor0: undefined
end: 100 },
} markLine: {
], symbol: ['none', 'none'],
series: [ data: [
{
name: 'Dow-Jones index',
type: 'candlestick', {
data: this.kdata.values, name: 'max line on close',
itemStyle: { type: 'max',
color: upColor, valueDim: 'close'
color0: downColor, }
borderColor: undefined, ]
borderColor0: undefined },
}, tooltip: {
tooltip: { formatter: function(param) {
formatter: function (param) { param = param[0];
param = param[0]; return [
return [ 'Date: ' + param.name +
'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">', '<hr size=1 style="margin: 3px 0">',
'Open: ' + param.data[0] + '<br/>', 'Open: ' + param.data[0] + '<br/>',
'Close: ' + param.data[1] + '<br/>', 'Close: ' + param.data[1] + '<br/>',
'Lowest: ' + param.data[2] + '<br/>', 'Lowest: ' + param.data[2] + '<br/>',
'Highest: ' + param.data[3] + '<br/>' 'Highest: ' + param.data[3] + '<br/>'
].join(''); ].join('');
} }
} }
}, },
{ {
name: 'Volume', name: 'Volume',
type: 'bar', type: 'bar',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: this.kdata.volumes, data: this.kdata.volumes,
itemStyle: { itemStyle: {
color: upColor, color: upColor,
borderColor: undefined, borderColor: undefined,
}, },
} }
] ]
}), }),
true true
); );
} }
}, },
watch: { watch: {
@ -398,190 +433,206 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
.header { .header {
background: #000000; background: #000000;
margin-top: 200rpx; margin-top: 200rpx;
padding: 0 32rpx; padding: 0 32rpx;
.top { .top {
height: 80rpx; height: 80rpx;
border-bottom: 2rpx solid #A1A0A8; border-bottom: 2rpx solid #A1A0A8;
.price { .price {
line-height: 80rpx; line-height: 80rpx;
font-size: 40rpx; font-size: 40rpx;
}
.percent {
vertical-align: text-top;
margin-left: 20rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
background-color: rgba($color: #F26666, $alpha: 0.2);
color: #F26666;
&.rise {
color: #00E8A2;
background-color: rgba($color: #00E8A2, $alpha: 0.2);
}
}
} }
.percent { .bottom {
vertical-align: text-top; display: flex;
margin-left: 20rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx; font-size: 24rpx;
background-color: rgba($color: #F26666, $alpha: 0.2);
color: #F26666;
&.rise { .title {
color: #00E8A2; margin-top: 24rpx;
background-color: rgba($color: #00E8A2, $alpha: 0.2); line-height: 32rpx;
} }
}
}
.bottom { .value {
display: flex; margin: 24rpx 0;
font-size: 24rpx; color: #A1A0A8;
}
.title {
margin-top: 24rpx;
line-height: 32rpx;
}
.value { .left {
margin: 24rpx 0; flex: 1;
color: #A1A0A8; text-align: left;
} }
.left { .center {
flex: 1; flex: 1;
text-align: left; text-align: center;
} }
.center { .right {
flex: 1; flex: 1;
text-align: center; text-align: right;
} }
.right {
flex: 1;
text-align: right;
} }
} }
} .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;
}
.kline { .MarketTrades {
margin-top: 20rpx; .headTitle {
padding-left: 32rpx; padding-left: 32rpx;
padding-right: 28rpx; font-size: 34rpx;
background: #000000; height: 80rpx;
} line-height: 80rpx;
}
.MarketTrades { .table {
.headTitle { display: flex;
padding-left: 32rpx; font-size: 24rpx;
font-size: 34rpx;
height: 80rpx;
line-height: 80rpx;
}
.table { .box {
display: flex; padding-left: 32rpx;
font-size: 24rpx; flex: 1;
overflow: hidden;
height: 450rpx;
.box { .title {
flex: 1; display: flex;
overflow: hidden; margin-bottom: 16rpx;
height: 450rpx; color: #A1A0A8;
.title { .quantity {
display: flex; flex: 1;
margin-bottom: 16rpx; }
color: #A1A0A8;
.quantity { .price {
flex: 1; flex: 1;
text-align: center;
}
} }
.price { .list {
flex: 1; overflow: hidden;
text-align: center;
}
}
.list { .item {
overflow: hidden; position: relative;
width: 100%;
height: 50rpx;
line-height: 50rpx;
display: flex;
.item { .price {
position: relative; display: block;
width: 100%; width: 50%;
height: 50rpx; text-align: left;
line-height: 50rpx; z-index: 1;
display: flex;
.price { }
display: block;
width: 50%;
text-align: left;
z-index: 1;
} .num {
display: block;
width: 50%;
text-align: right;
padding-right: 32rpx;
z-index: 1;
.num { &.buy {
display: block; color: #00E8A2;
width: 50%; }
text-align: right;
padding-right: 32rpx;
z-index: 1;
&.buy { &.sell {
color: #00E8A2; color: #F4506A;
}
} }
&.sell { .buybg {
color: #F4506A; height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: rgba($color: #00E8A2, $alpha: 0.1)
} }
}
.buybg { .sellbg {
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; right: 0;
z-index: 0; z-index: 0;
background: rgba($color: #00E8A2, $alpha: 0.1) background: rgba($color: #F4506A, $alpha: 0.1)
} }
.sellbg {
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background: rgba($color: #F4506A, $alpha: 0.1)
} }
} }
} }
}
}
} }
}
.btn { .btn {
display: flex; display: flex;
margin: 96rpx 32rpx; margin: 96rpx 32rpx;
.button { .button {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
height: 96rpx; height: 96rpx;
border-radius: 16rpx; border-radius: 16rpx;
font-weight: 700; font-weight: 700;
font-size: 28rpx; font-size: 28rpx;
color: #15141F !important; color: #15141F !important;
&:nth-child(2) { &:nth-child(2) {
margin-left: 14rpx; margin-left: 14rpx;
}
} }
} }
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save