From 2a492b6be34aa048040e15636e667d77c61e2919 Mon Sep 17 00:00:00 2001
From: "[liang]" <[595996918@qq.com]>
Date: Thu, 25 Aug 2022 21:52:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4K=E7=BA=BF=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/markets/kLine.vue | 52 +++++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
index c4df73d..191396b 100644
--- a/pages/markets/kLine.vue
+++ b/pages/markets/kLine.vue
@@ -98,7 +98,7 @@ export default {
 	},
 	onLoad() {
 		this.kdata = this.splitData(ktest.JSON);
-		console.log(this.kdata, 1111)
+		// console.log(this.kdata, 1111)
 	},
 	onShow() { },
 	methods: {
@@ -144,6 +144,7 @@ export default {
 	let kline
 	export default {
 		mounted() {
+			console.log('1111',this.kdata);
 			if (typeof window.echarts === 'function') {
 				//this.initEcharts()
 			} else {
@@ -184,8 +185,8 @@ export default {
 				return result;
 			},
 			upData(myChart){
-				const upColor = '#00da3c';
-				const downColor = '#ec0000';
+				const upColor = '#00C873';
+				const downColor = '#FF3750';
 				var chartDom = document.getElementById('kline');
 				var myChart = echarts.init(chartDom);
 				var option;
@@ -259,15 +260,16 @@ export default {
 				          }
 				        ]
 				      },
-				      grid: [
+				      grid: [ 
 				        {
 				          left: '10%',
-				          right: '8%',
-				          height: '50%'
+				          right: '0%',
+				          height: '50%',
+						  backgroundColor:'transparent',
 				        },
 				        {
 				          left: '10%',
-				          right: '8%',
+				          right: '0%',
 				          top: '63%',
 				          height: '16%'
 				        }
@@ -277,7 +279,8 @@ export default {
 				          type: 'category',
 				          data: this.kdata.categoryData,
 				          boundaryGap: false,
-				          axisLine: { onZero: false },
+				          axisLine: {show: false, onZero: false },
+						  axisTick: { show: false },
 				          splitLine: { show: false },
 				          min: 'dataMin',
 				          max: 'dataMax',
@@ -301,9 +304,20 @@ export default {
 				      yAxis: [
 				        {
 				          scale: true,
+						  axisLine: { show: false },
+						  axisTick: { show: false },
 				          splitArea: {
-				            show: true
-				          }
+				            show: false,
+							// areaStyle: {
+                			// 	color: 'transparency',
+            				// },
+				          },
+						  splitLine: { show: true,
+						   	lineStyle: {
+        						// 使用深浅的间隔色
+        						color: ['#211F32']
+    						}
+						  }
 				        },
 				        {
 				          scale: true,
@@ -355,6 +369,17 @@ export default {
 				            }
 				          }
 				        },
+						{
+                    		name: 'Volume',
+                    		type: 'bar',
+                    		xAxisIndex: 1,
+                    		yAxisIndex: 1,
+                    		data: this.kdata.volumes,
+							itemStyle: {
+				            	color: upColor,
+				            	borderColor: undefined,
+				          	},
+        				}
 				        
 				      ]
 				    }),
@@ -438,6 +463,13 @@ export default {
 		}
 	}
 
+	.kline {
+		margin-top: 20rpx;
+		padding-left: 32rpx;
+		padding-right: 28rpx;
+		background: #000000;
+	}
+
 	.MarketTrades {
 		.headTitle {
 			padding-left: 32rpx;