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

@@ -25,9 +25,21 @@
 				</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>
 		<!-- 买卖挂牌表 -->
@@ -82,12 +94,15 @@
 	import ktest from '@/utils/ktest.js'
 	export default {
 		name: "trade",
-	components: { ktest },
+		components: {
+			ktest
+		},
 		data() {
 			return {
 				buyList: 7,
 				sellList: 9,
-			kdata: []
+				kdata: [],
+				type:1
 
 			};
 		},
@@ -135,6 +150,19 @@ export default {
 				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')
 			}
 
 		},
@@ -144,7 +172,7 @@ export default {
 	let kline
 	export default {
 		mounted() {
-			console.log('1111',this.kdata);
+			console.log('1111', this.kdata.categoryData);
 			if (typeof window.echarts === 'function') {
 				//this.initEcharts()
 			} else {
@@ -160,6 +188,7 @@ export default {
 
 		methods: {
 			receive(newValue, oldValue, ownerVm, vm) {
+				
 				console.log('newValue', newValue)
 				const script = document.createElement('script');
 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
@@ -167,6 +196,7 @@ export default {
 				script.onload = this.upData.bind(this);
 				document.head.appendChild(script);
 
+				
 			},
 
 			calculateMA(dayCount, data) {
@@ -188,100 +218,41 @@ export default {
 				const upColor = '#00C873';
 				const downColor = '#FF3750';
 				var chartDom = document.getElementById('kline');
-				var myChart = echarts.init(chartDom);
+				if(!this.is){
+					this.myChart = echarts.init(chartDom);
+				}
+				
+				this.is=true;
 				var option;
-				myChart.setOption(
+				this.myChart.setOption(
 					(option = {
-				      animation: false,
+
-				      legend: {
-				        bottom: 10,
-				        left: 'center',
-				        data: []
-				      },
 						tooltip: {
 							trigger: 'axis',
 							axisPointer: {
-				          type: 'cross'
+								animation: false,
-				        },
+								type: 'cross',
-				        borderWidth: 1,
+								lineStyle: {
-				        borderColor: '#ccc',
+									width: 1,
-				        padding: 10,
+									opacity: 3
-				        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: {
+						xAxis: [{
+								type: 'category',
+								data: this.kdata.categoryData,
+								boundaryGap: false,
+								axisLine: {
 									show: false,
-				        seriesIndex: 5,
+									onZero: false
-				        dimension: 2,
-				        pieces: [
-				          {
-				            value: 1,
-				            color: downColor
 								},
-				          {
+								
-				            value: -1,
+								axisTick: {
-				            color: upColor
+									show: false
-				          }
-				        ]
 								},
-				      grid: [ 
+								splitLine: {
-				        {
+									show: false
-				          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: {
@@ -293,26 +264,40 @@ export default {
 								gridIndex: 1,
 								data: this.kdata.categoryData,
 								boundaryGap: false,
-				          axisLine: { onZero: false },
+								axisLine: {
-				          axisTick: { show: false },
+									onZero: false
-				          splitLine: { show: false },
+								},
-				          axisLabel: { show: false },
+								axisTick: {
+									show: false
+								},
+								splitLine: {
+									show: false
+								},
+								axisLabel: {
+									show: false
+								},
 								min: 'dataMin',
 								max: 'dataMax'
 							}
 						],
-				      yAxis: [
+						yAxis: [{
-				        {
+							    
 								scale: true,
-						  axisLine: { show: false },
+								
-						  axisTick: { show: false },
+								axisLine: {
+									
+									show: false
+								},
+								axisTick: {
+									show: true
+								},
 								splitArea: {
-				            show: false,
+									show: false, // areaStyle: {
-							// areaStyle: {
 									// 	color: 'transparency',
 									// },
 								},
-						  splitLine: { show: true,
+								splitLine: {
+									show: true,
 									lineStyle: {
 										// 使用深浅的间隔色
 										color: ['#211F32']
@@ -323,21 +308,58 @@ export default {
 								scale: true,
 								gridIndex: 1,
 								splitNumber: 2,
-				          axisLabel: { show: false },
+								axisLabel: {
-				          axisLine: { show: false },
+									show: false
-				          axisTick: { show: false },
+								},
-				          splitLine: { show: false }
+								axisLine: {
+									show: false
+								},
+								axisTick: {
+									show: false
+								},
+								splitLine: {
+									show: false
+								}
 							}
 						],
-				      dataZoom: [
+
+
+						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',
-				          xAxisIndex: [0, 1],
 								start: 98,
 								end: 100
 							},
 							{
-				          show: true,
+								show: false,
 								xAxisIndex: [0, 1],
 								type: 'slider',
 								top: '85%',
@@ -345,8 +367,7 @@ export default {
 								end: 100
 							}
 						],
-				      series: [
+						series: [{
-				        {
 								name: 'Dow-Jones index',
 								type: 'candlestick',
 								data: this.kdata.values,
@@ -356,11 +377,24 @@ export default {
 									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">',
+											'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/>',
@@ -385,6 +419,7 @@ export default {
 					}),
 					true
 				);
+				
 			}
 		},
 		watch: {
@@ -462,11 +497,26 @@ export default {
 
 			}
 		}
+		.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 {
-		margin-top: 20rpx;
+			
-		padding-left: 32rpx;
-		padding-right: 28rpx;
 			background: #000000;
 		}
 
@@ -483,6 +533,7 @@ export default {
 				font-size: 24rpx;
 
 				.box {
+					padding-left: 32rpx;
 					flex: 1;
 					overflow: hidden;
 					height: 450rpx;