调整K线图样式

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 upColor = '#00C873';
-				const downColor = '#ec0000';
+				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%',
+				          right: '0%',
-				          height: '50%'
+				          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;