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

k线图

master
vee 3 years ago
parent
6482a38c3d
commit
6a69c0fee4
3 changed files with 575 additions and 305 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      main.js
  2. 13
      pages.json
  3. 864
      pages/markets/kLine.vue

3
main.js
View File

@ -11,7 +11,8 @@ import EN from './utils/language/en_US.js'
import ZH from './utils/language/zh_TW.js'
import VI from './utils/language/vi_VN.js'
import api from './utils/api.js'
Vue.prototype.$api = api
// 自定义底部导航栏
import tabBar from 'components/tabBar/tabBar.vue'
Vue.component('tab-bar', tabBar)

13
pages.json
View File

@ -3,32 +3,33 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页
// 登陆部分
// 首页部分
{
"path": "pages/login/index",
"path": "pages/home/index",
"style": {
"navigationStyle": "custom"
}
},
// 登陆部分
{
"path": "pages/login/forget",
"path": "pages/login/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/register",
"path": "pages/login/forget",
"style": {
"navigationStyle": "custom"
}
},
// 首页部分
{
"path": "pages/home/index",
"path": "pages/login/register",
"style": {
"navigationStyle": "custom"
}
},

864
pages/markets/kLine.vue
View File

@ -1,300 +1,568 @@
<template>
<view class="main">
<!-- nav -->
<navigation>{{ 'BTC/USDT' }}</navigation>
<!-- 价格百分比 -->
<view class="header">
<view class="top">
<!-- 实时价格 -->
<text class="price">34985.93</text>
<!-- 百分比,根据数据正负判断颜色 -->
<text class="percent" :class="{ rise: false }">-15.30%</text>
</view>
<view class="bottom">
<view class="left">
<view class="title">{{ i18n.Highest }}</view>
<view class="value">45930.24</view>
</view>
<view class="center">
<view class="title">{{ i18n.Lowest }}</view>
<view class="value">45930.24</view>
</view>
<view class="right">
<view class="title">{{ i18n.Amount }}</view>
<view class="value">28394893.30943094</view>
</view>
</view>
</view>
<!-- K线图 -->
<view class="kline">
</view>
<!-- 买卖挂牌表 -->
<view class="MarketTrades">
<view class="headTitle">Market trades</view>
<view class="table">
<view class="box">
<view class="title">
<view class="quantity">{{ i18n.Quantity }}</view>
<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>
</view>
</view>
<view class="box">
<view class="title">
<view class="quantity">{{ i18n.Quantity }}</view>
<view class="price">{{ i18n.SellPrice20 }}</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>
</view>
</view>
</view>
</view>
<view class="btn">
<!-- open按钮 -->
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
{{ i18n.open }}
</u-button>
<!-- close按钮 -->
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
{{ i18n.close }}
</u-button>
</view>
</view>
</template>
<template>
<view class="main">
<!-- nav -->
<navigation>{{ 'BTC/USDT' }}</navigation>
<!-- 价格百分比 -->
<view class="header">
<view class="top">
<!-- 实时价格 -->
<text class="price">34985.93</text>
<!-- 百分比,根据数据正负判断颜色 -->
<text class="percent" :class="{ rise: false }">-15.30%</text>
</view>
<view class="bottom">
<view class="left">
<view class="title">{{ i18n.Highest }}</view>
<view class="value">45930.24</view>
</view>
<view class="center">
<view class="title">{{ i18n.Lowest }}</view>
<view class="value">45930.24</view>
</view>
<view class="right">
<view class="title">{{ i18n.Amount }}</view>
<view class="value">28394893.30943094</view>
</view>
</view>
</view>
<!-- K线图 -->
<view class="kline" id="kline" :kdata="kdata"
:change:kdata="klineE.receive" style="height:1000rpx;color:aliceblue ">
</view>
<!-- 买卖挂牌表 -->
<view class="MarketTrades">
<view class="headTitle">Market trades</view>
<view class="table">
<view class="box">
<view class="title">
<view class="quantity">{{ i18n.Quantity }}</view>
<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>
</view>
</view>
<view class="box">
<view class="title">
<view class="quantity">{{ i18n.Quantity }}</view>
<view class="price">{{ i18n.SellPrice20 }}</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>
</view>
</view>
</view>
</view>
<view class="btn">
<!-- open按钮 -->
<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
{{ i18n.open }}
</u-button>
<!-- close按钮 -->
<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
{{ i18n.close }}
</u-button>
</view>
</view>
</template>
<script>
export default {
name: "trade",
data() {
return {
buyList: 7,
sellList: 9,
};
},
computed: {
i18n() {
return this.$t("markets");
},
},
onLoad() {
},
onShow() { },
methods: {
depthChange(e) {
console.log(e);
},
goto(page) {
let url = '';
switch (page) {
case 'kLine':
url = '/pages/markets/kLine'
break;
default:
break;
}
uni.navigateTo({
url,
});
}
},
}
</script>
<style lang="scss" scoped>
.main {
.header {
background: #000000;
margin-top: 200rpx;
padding: 0 32rpx;
.top {
height: 80rpx;
border-bottom: 2rpx solid #A1A0A8;
.price {
line-height: 80rpx;
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);
}
}
}
.bottom {
display: flex;
font-size: 24rpx;
.title {
margin-top: 24rpx;
line-height: 32rpx;
}
.value {
margin: 24rpx 0;
color: #A1A0A8;
}
.left {
flex: 1;
text-align: left;
}
.center {
flex: 1;
text-align: center;
}
.right {
flex: 1;
text-align: right;
}
}
}
.MarketTrades {
.headTitle {
padding-left: 32rpx;
font-size: 34rpx;
height: 80rpx;
line-height: 80rpx;
}
.table {
display: flex;
font-size: 24rpx;
.box {
flex: 1;
overflow: hidden;
height: 450rpx;
.title {
display: flex;
margin-bottom: 16rpx;
color: #A1A0A8;
.quantity {
flex: 1;
}
.price {
flex: 1;
text-align: center;
}
}
.list {
overflow: hidden;
.item {
position: relative;
width: 100%;
height: 50rpx;
line-height: 50rpx;
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;
&.buy {
color: #00E8A2;
}
&.sell {
color: #F4506A;
}
}
.buybg {
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: rgba($color: #00E8A2, $alpha: 0.1)
}
.sellbg {
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background: rgba($color: #F4506A, $alpha: 0.1)
}
}
}
}
}
}
.btn {
display: flex;
margin: 96rpx 32rpx;
.button {
flex: 1;
box-sizing: border-box;
height: 96rpx;
border-radius: 16rpx;
font-weight: 700;
font-size: 28rpx;
color: #15141F !important;
&:nth-child(2) {
margin-left: 14rpx;
}
}
}
}
import ktest from '@/utils/ktest.js'
export default {
name: "trade",
components: { ktest },
data() {
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) {
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);
},
goto(page) {
let url = '';
switch (page) {
case 'kLine':
url = '/pages/markets/kLine'
break;
default:
break;
}
uni.navigateTo({
url,
});
}
},
}
</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 {
.header {
background: #000000;
margin-top: 200rpx;
padding: 0 32rpx;
.top {
height: 80rpx;
border-bottom: 2rpx solid #A1A0A8;
.price {
line-height: 80rpx;
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);
}
}
}
.bottom {
display: flex;
font-size: 24rpx;
.title {
margin-top: 24rpx;
line-height: 32rpx;
}
.value {
margin: 24rpx 0;
color: #A1A0A8;
}
.left {
flex: 1;
text-align: left;
}
.center {
flex: 1;
text-align: center;
}
.right {
flex: 1;
text-align: right;
}
}
}
.MarketTrades {
.headTitle {
padding-left: 32rpx;
font-size: 34rpx;
height: 80rpx;
line-height: 80rpx;
}
.table {
display: flex;
font-size: 24rpx;
.box {
flex: 1;
overflow: hidden;
height: 450rpx;
.title {
display: flex;
margin-bottom: 16rpx;
color: #A1A0A8;
.quantity {
flex: 1;
}
.price {
flex: 1;
text-align: center;
}
}
.list {
overflow: hidden;
.item {
position: relative;
width: 100%;
height: 50rpx;
line-height: 50rpx;
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;
&.buy {
color: #00E8A2;
}
&.sell {
color: #F4506A;
}
}
.buybg {
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: rgba($color: #00E8A2, $alpha: 0.1)
}
.sellbg {
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
background: rgba($color: #F4506A, $alpha: 0.1)
}
}
}
}
}
}
.btn {
display: flex;
margin: 96rpx 32rpx;
.button {
flex: 1;
box-sizing: border-box;
height: 96rpx;
border-radius: 16rpx;
font-weight: 700;
font-size: 28rpx;
color: #15141F !important;
&:nth-child(2) {
margin-left: 14rpx;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save