k线完善

main.js

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

pages/markets/kLine.vue

@@ -24,10 +24,22 @@
 					<view class="value">28394893.30943094</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>
 		<!-- K线图 -->
 		<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>
 		<!-- 买卖挂牌表 -->
@@ -79,72 +91,88 @@
 </template>
 
 <script>
-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() {
-
+	import ktest from '@/utils/ktest.js'
+	export default {
+		name: "trade",
+		components: {
+			ktest
 		},
-		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]);
-			}
+		data() {
 			return {
-				categoryData: categoryData,
-				values: values,
-				volumes: volumes
+				buyList: 7,
+				sellList: 9,
+				kdata: [],
+				type:1
+
 			};
 		},
-		depthChange(e) {
-			console.log(e);
+		computed: {
+			i18n() {
+				return this.$t("markets");
+			},
+		},
+		onLoad() {
+			this.kdata = this.splitData(ktest.JSON);
+			// console.log(this.kdata, 1111)
 		},
-		goto(page) {
-			let url = '';
-			switch (page) {
-				case 'kLine':
-					url = '/pages/markets/kLine'
-					break;
-				default:
-					break;
+		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,
+				});
+			},
+			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 module="klineE" lang="renderjs">
 	let kline
 	export default {
 		mounted() {
-			console.log('1111',this.kdata);
+			console.log('1111', this.kdata.categoryData);
 			if (typeof window.echarts === 'function') {
 				//this.initEcharts()
 			} else {
@@ -159,16 +187,18 @@ export default {
 		},
 
 		methods: {
-			receive(newValue, oldValue, ownerVm, vm) {
+			receive(newValue, oldValue, ownerVm, vm) {
+				
 				console.log('newValue', newValue)
 				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 = [];
 				for (var i = 0, len = data.values.length; i < len; i++) {
@@ -184,207 +214,212 @@ export default {
 				}
 				return result;
 			},
-			upData(myChart){
+			upData(myChart) {
 				const upColor = '#00C873';
 				const downColor = '#FF3750';
-				var chartDom = document.getElementById('kline');
-				var myChart = echarts.init(chartDom);
+				var chartDom = document.getElementById('kline');
+				if(!this.is){
+					this.myChart = echarts.init(chartDom);
+				}
+				
+				this.is=true;
 				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: '0%',
-				          height: '50%',
-						  backgroundColor:'transparent',
-				        },
-				        {
-				          left: '10%',
-				          right: '0%',
-				          top: '63%',
-				          height: '16%'
-				        }
-				      ],
-				      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: [
-				        {
-				          scale: true,
-						  axisLine: { show: false },
-						  axisTick: { show: false },
-				          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 }
-				        }
-				      ],
-				      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('');
-				            }
-				          }
-				        },
-						{
-                    		name: 'Volume',
-                    		type: 'bar',
-                    		xAxisIndex: 1,
-                    		yAxisIndex: 1,
-                    		data: this.kdata.volumes,
-							itemStyle: {
-				            	color: upColor,
-				            	borderColor: undefined,
-				          	},
-        				}
-				        
-				      ]
-				    }),
-				    true
-				  );
+				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: [{
+							    
+								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: 1,
+							dimension: 2,
+							pieces: [{
+									value: 1,
+									color: downColor
+								},
+								{
+									value: -1,
+									color: upColor
+								}
+							]
+						},
+						grid: [{
+							top: '8%',
+								left: '50rpx',
+								right: '10rpx',
+								height: '60%',
+								backgroundColor: 'transparent',
+							},
+							{
+								left: '0%',
+								right: '0%',
+								top: '80%',
+								height: '16%'
+							}
+						],
+
+						dataZoom: [{
+								type: 'inside',
+								start: 98,
+								end: 100
+							},
+							{
+								show: false,
+								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
+								},
+								markLine: {
+								        symbol: ['none', 'none'],
+								        data: [
+								          
+								          
+								          {
+								            name: 'max line on close',
+								            type: 'max',
+								            valueDim: 'close'
+								          }
+								        ]
+								      },
+								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: 'Volume',
+								type: 'bar',
+								xAxisIndex: 1,
+								yAxisIndex: 1,
+								data: this.kdata.volumes,
+								itemStyle: {
+									color: upColor,
+									borderColor: undefined,
+								},
+							}
+
+						]
+					}),
+					true
+				);
+				
 			}
 		},
 		watch: {
@@ -398,190 +433,206 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main {
+	.main {
 
-	.header {
-		background: #000000;
-		margin-top: 200rpx;
-		padding: 0 32rpx;
+		.header {
+			background: #000000;
+			margin-top: 200rpx;
+			padding: 0 32rpx;
 
 
-		.top {
-			height: 80rpx;
-			border-bottom: 2rpx solid #A1A0A8;
+			.top {
+				height: 80rpx;
+				border-bottom: 2rpx solid #A1A0A8;
 
-			.price {
-				line-height: 80rpx;
-				font-size: 40rpx;
+				.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);
+					}
+				}
 			}
 
-			.percent {
-				vertical-align: text-top;
-				margin-left: 20rpx;
-				padding: 8rpx 20rpx;
-				border-radius: 8rpx;
+			.bottom {
+				display: flex;
 				font-size: 24rpx;
-				background-color: rgba($color: #F26666, $alpha: 0.2);
-				color: #F26666;
 
-				&.rise {
-					color: #00E8A2;
-					background-color: rgba($color: #00E8A2, $alpha: 0.2);
+				.title {
+					margin-top: 24rpx;
+					line-height: 32rpx;
 				}
-			}
-		}
 
-		.bottom {
-			display: flex;
-			font-size: 24rpx;
-
-			.title {
-				margin-top: 24rpx;
-				line-height: 32rpx;
-			}
+				.value {
+					margin: 24rpx 0;
+					color: #A1A0A8;
+				}
 
-			.value {
-				margin: 24rpx 0;
-				color: #A1A0A8;
-			}
+				.left {
+					flex: 1;
+					text-align: left;
+				}
 
-			.left {
-				flex: 1;
-				text-align: left;
-			}
+				.center {
+					flex: 1;
+					text-align: center;
+				}
 
-			.center {
-				flex: 1;
-				text-align: center;
-			}
+				.right {
+					flex: 1;
+					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 {
-		margin-top: 20rpx;
-		padding-left: 32rpx;
-		padding-right: 28rpx;
-		background: #000000;
-	}
+		.MarketTrades {
+			.headTitle {
+				padding-left: 32rpx;
+				font-size: 34rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+			}
 
-	.MarketTrades {
-		.headTitle {
-			padding-left: 32rpx;
-			font-size: 34rpx;
-			height: 80rpx;
-			line-height: 80rpx;
-		}
+			.table {
+				display: flex;
+				font-size: 24rpx;
 
-		.table {
-			display: flex;
-			font-size: 24rpx;
+				.box {
+					padding-left: 32rpx;
+					flex: 1;
+					overflow: hidden;
+					height: 450rpx;
 
-			.box {
-				flex: 1;
-				overflow: hidden;
-				height: 450rpx;
+					.title {
+						display: flex;
+						margin-bottom: 16rpx;
+						color: #A1A0A8;
 
-				.title {
-					display: flex;
-					margin-bottom: 16rpx;
-					color: #A1A0A8;
+						.quantity {
+							flex: 1;
+						}
 
-					.quantity {
-						flex: 1;
+						.price {
+							flex: 1;
+							text-align: center;
+						}
 					}
 
-					.price {
-						flex: 1;
-						text-align: center;
-					}
-				}
+					.list {
+						overflow: hidden;
 
-				.list {
-					overflow: hidden;
+						.item {
+							position: relative;
+							width: 100%;
+							height: 50rpx;
+							line-height: 50rpx;
+							display: flex;
 
-					.item {
-						position: relative;
-						width: 100%;
-						height: 50rpx;
-						line-height: 50rpx;
-						display: flex;
+							.price {
+								display: block;
+								width: 50%;
+								text-align: left;
+								z-index: 1;
 
-						.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 {
-							display: block;
-							width: 50%;
-							text-align: right;
-							padding-right: 32rpx;
-							z-index: 1;
+								&.buy {
+									color: #00E8A2;
+								}
 
-							&.buy {
-								color: #00E8A2;
+								&.sell {
+									color: #F4506A;
+								}
 							}
 
-							&.sell {
-								color: #F4506A;
+							.buybg {
+								height: 100%;
+								position: absolute;
+								top: 0;
+								left: 0;
+								z-index: 0;
+								background: rgba($color: #00E8A2, $alpha: 0.1)
 							}
-						}
 
-						.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)
+							}
 
-						.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;
+		.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>
+	}
+</style>