From 279789f8cace885eeafcf64f579957bca352b62e Mon Sep 17 00:00:00 2001
From: "[liang]" <[595996918@qq.com]>
Date: Thu, 25 Aug 2022 20:08:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=89=93=E5=8D=B0=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=EF=BC=8CK=E7=BA=BF=E5=9B=BE=E5=8F=82=E8=80=83?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/kEchart/index.vue | 457 +++++++++++++++++++++
 pages/markets/kLine.vue      | 769 +++++++++++++++++------------------
 2 files changed, 835 insertions(+), 391 deletions(-)
 create mode 100644 components/kEchart/index.vue

diff --git a/components/kEchart/index.vue b/components/kEchart/index.vue
new file mode 100644
index 0000000..53a0135
--- /dev/null
+++ b/components/kEchart/index.vue
@@ -0,0 +1,457 @@
+<template>
+  <view class="content">
+    <!-- #ifdef APP-PLUS || H5 -->
+    <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef APP-PLUS || H5 -->
+    <view>非 APP、H5 环境不支持</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)，数量(vol)
+
+function splitData(rawData) {
+  let raw = JSON.parse(JSON.stringify(rawData))
+  let categoryData = [];
+  let values = [];
+  let volumes = [];
+  for (let i = 0; i < raw.length; i++) {
+    categoryData.push(raw[i].splice(0, 1)[0]);
+    values.push(raw[i]);
+    // console.log(raw[i],'*****')
+    // volumes.push([i, raw[i][4], raw[i][0] >= raw[i][1] ? 1 : -1]);
+    volumes.push([i, raw[i][3], raw[i][0] >= raw[i][1] ? 1 : -1]);
+  }
+  return {
+    categoryData: categoryData,
+    values: values,
+    volumes: volumes
+  };
+}
+
+function calculateMA(dayCount, values) {
+  let result = [];
+  for (let i = 0, len = values.length; i < len; i++) {
+    if (i < dayCount) {
+      result.push('-');
+      continue;
+    }
+    let sum = 0;
+    for (let j = 0; j < dayCount; j++) {
+      sum += values[i - j][1];
+    }
+    result.push(+(sum / dayCount).toFixed(3));
+  }
+  return result;
+}
+export default {
+  props: {
+    kData,
+    // 初始数据
+    initData: {
+      type: Array,
+      required: true
+    },
+    upColor: {
+      type: String,
+      default: 'rgb(49,186,160)'
+    },
+    downColor: {
+      type: String,
+      default: 'rgb(252,95,95)'
+    },
+    // 警戒线颜色
+    markLineColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    // 警戒线文字颜色
+    markLineLabelColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    // 警戒线第二排文字
+    markLineYTime: {
+      type: String,
+      default: '最新价'
+    },
+    // 警戒线文字背景颜色
+    markLineLabelBackgroundColor: {
+      type: String,
+      default: '#00b6ff'
+    },
+    // Y轴颜色
+    yAxisSplitLineColor: {
+      type: String,
+      default: '#333'
+    },
+    // Y轴刻度值颜色
+    yAxisAxisLabelColor: {
+      type: String,
+      default: '#fff'
+    },
+    // 背景图
+    backgroundImageUrl: {
+      type: String,
+      default: '#000'
+    },
+  },
+  data() {
+    return {
+      option: {},
+      oldData: {}
+    }
+  },
+  onShow() {
+    console.log(this.kData);
+    this.init(this.kData)
+  },
+  mounted() {
+    if (this.initData.length > 0) {
+      this.init(this.initData)
+    }
+  },
+  methods: {
+    // 追加数据
+    addData(oo) {
+      let isUp = false;
+      let isUpIndex = true;
+      for (let i = 0; i < this.oldData.length; i++) {
+        // console.log(listData[i][0], oo[0],listData[i][0] != oo[0])
+        if (this.oldData[i][0] == oo[0]) {
+          isUp = true;
+          isUpIndex = i;
+          this.oldData[isUpIndex] = oo
+        }
+      }
+
+      if (!isUp) {
+        this.oldData.shift();
+        this.oldData.push(oo)
+      }
+      this.changeOption(this.oldData)
+
+    },
+    // 初始化数据
+    init(data) {
+      console.log(data);
+      this.oldData = JSON.parse(JSON.stringify(data));
+      this.changeOption(this.oldData)
+    },
+    changeOption(res) {
+      let data = splitData(JSON.parse(JSON.stringify(res)));
+      this.option = {
+        // animation: false,
+        animationEasing: 'elasticOut',
+        legend: {
+          show: false,
+          bottom: 10,
+          left: 'center',
+          data: ['Dow-Jones index', 'MA5', 'MA10']
+        },
+        tooltip: {
+          trigger: 'axis',
+          confine: true,
+          axisPointer: {
+            type: 'line',
+          },
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          position: function (pos, params, el, elRect, size) {
+            let obj = { top: 10 };
+            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
+            return obj;
+          },
+          extraCssText: 'width: 170px'
+        },
+        axisPointer: {
+          type: 'line',
+          lineStyle: {
+            type: 'solid',
+            color: '#ffffff'
+          },
+          link: { xAxisIndex: 'all' },
+          label: {
+            backgroundColor: '#777'
+          }
+        },
+        visualMap: {
+          show: false,
+          seriesIndex: 3,
+          dimension: 2,
+          pieces: [{
+            value: 1,
+            color: this.downColor
+          }, {
+            value: -1,
+            color: this.upColor
+          }]
+        },
+        grid: [
+          {
+            top: '4%',
+            left: '2%',
+            right: '18%',
+            height: '65%',
+            bottom: '0%',
+            borderWidth: 20
+          },
+          {
+            left: '2%',
+            right: '18%',
+            bottom: '5%',
+            height: '25%'
+          }
+        ],
+        graphic: [
+          {
+            type: 'image', // 图形元素类型
+            id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
+            right: 'center', // 根据父元素进行定位 （居中）
+            bottom: 'middle', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
+            z: 0,  // 层叠
+            bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
+            style: {
+              image: this.backgroundImageUrl, // 这里一定要注意、注意，必须是https开头的图片路径地址
+              width: '100%',
+              height: '100%'
+            }
+          }],
+        xAxis: [
+          {
+            show: false,
+            type: 'category',
+          },
+          {
+            type: 'category',
+            gridIndex: 1,
+            data: data.categoryData,
+            // scale: true,
+            // boundaryGap: false,
+            axisTick: { show: false },
+            minorTick: { show: false },
+            axisLine: { onZero: false },
+            axisLabel: { onZero: false },
+            // splitNumber: 20,
+            min: 'dataMin',
+            max: 'dataMax',
+            axisPointer: {
+              label: {
+                formatter: function (params) {
+                  let seriesValue = (params.seriesData[0] || {}).value;
+                  return params.value
+                    + (seriesValue != null
+                      ? '\n' + echarts.format.addCommas(seriesValue)
+                      : ''
+                    );
+                }
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            scale: true,
+            position: 'right',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: this.yAxisSplitLineColor
+              }
+            },
+            axisLabel: {
+              show: true,
+              color: this.yAxisAxisLabelColor,
+            },
+            minorTick: {
+              show: true,
+              splitNumber: 10,
+              lineStyle: {
+                color: this.yAxisAxisLabelColor,
+              }
+            }
+          },
+          {
+            scale: true,
+            gridIndex: 1,
+            splitNumber: 1,
+            axisLabel: { show: false },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false }
+          }
+        ],
+        dataZoom: [
+          {
+            type: 'inside',
+            xAxisIndex: [0, 1],
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: false,
+            moveOnMouseWheel: false,
+            start: 0,
+            end: 100,
+          },
+          {
+            show: true,
+            xAxisIndex: [0, 1],
+            type: 'inside',
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: false,
+            moveOnMouseWheel: false,
+            top: '85%',
+            start: 0,
+            end: 100,
+          }
+        ],
+        series: [
+          {
+            name: 'Dow-Jones index',
+            type: 'candlestick',
+            data: data.values,
+            itemStyle: {
+              color: this.upColor,
+              color0: this.downColor,
+              borderColor: null,
+              borderColor0: null
+            },
+            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('');
+              }
+            },
+            markLine: {
+              symbol: 'none', //去掉警戒线最后面的箭头
+              data: [
+                {
+                  silent: false,//鼠标悬停事件  true没有，false有
+                  yAxis: data.values[data.values.length - 1][1],// 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
+                  lineStyle: {               //警戒线的样式  ，虚实  颜色
+                    type: "solid",
+                    color: this.markLineColor,
+                  },
+                  label: {
+                    position: "end",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                    color: this.markLineLabelColor,
+                    // backgroundColor:"#00b6ff",
+                    fontSize: "12px",
+                    formatter: [
+                      '{a|{c}}',
+                      '{b|' + this.markLineYTime + '}'
+                    ].join('\n'),
+                    // formatter:"{c}\n最新价",
+                    rich: {
+                      a: {
+                        padding: 4,
+                        backgroundColor: this.markLineLabelBackgroundColor,
+                        align: 'right',
+                      },
+                      b: {
+                        padding: 4,
+                        backgroundColor: this.markLineLabelBackgroundColor,
+                        align: 'right',
+                      },
+                    }
+                  },
+                },
+              ]
+            },
+          },
+          {
+            name: 'MA5',
+            type: 'line',
+            symbol: "none",
+            data: calculateMA(5, data.values),
+            smooth: true,
+            lineStyle: {
+              opacity: 0.5
+            }
+          },
+          {
+            name: 'MA10',
+            type: 'line',
+            symbol: "none",
+            data: calculateMA(10, data.values),
+            smooth: true,
+            lineStyle: {
+              opacity: 0.5
+            }
+          },
+          {
+            name: 'Volume',
+            type: 'bar',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            data: data.volumes
+          }
+        ]
+      }
+    },
+    onViewClick(options) {
+      console.log(options)
+    }
+  }
+}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = 'static/echarts.min.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echarts'), null, {renderer: 'svg'})
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+        if (myChart) {
+          myChart.setOption(newValue)
+        }
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.echarts {
+  width: 100%;
+  height: 482px;
+  overflow: hidden;
+  width: 100%;
+  background-color: #12023e;
+}
+</style>
diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
index d9a1032..c4df73d 100644
--- a/pages/markets/kLine.vue
+++ b/pages/markets/kLine.vue
@@ -26,8 +26,8 @@
 			</view>
 		</view>
 		<!-- K线图 -->
-		<view class="kline" id="kline"  :kdata="kdata"
-									:change:kdata="klineE.receive" style="height:1000rpx;color:aliceblue ">
+		<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
+			style="height:1000rpx;color:aliceblue ">
 
 		</view>
 		<!-- 买卖挂牌表 -->
@@ -78,107 +78,94 @@
 	</view>
 </template>
 
-<script>
-	import ktest from '@/utils/ktest.js'
-	export default {
-		name: "trade",
-		components: { ktest },
-		data() {
-			return {
-				buyList: 7,
-				sellList: 9,
-				kdata:[]
+<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() {
 
-			};
 		},
-		computed: {
-			i18n() {
-				return this.$t("markets");
-			},
+		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
+			};
 		},
-		onLoad() {
-			this.kdata=this.splitData(ktest.JSON);
-			console.log(this.kdata,1111)
+		depthChange(e) {
+			console.log(e);
 		},
-		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,
-				});
+		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') {
+			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);
-				
+		methods: {
+			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) {
@@ -195,184 +182,184 @@
 					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
-				  );
+			},
+			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: {
@@ -386,183 +373,183 @@
 </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;
-
-				.price {
-					line-height: 80rpx;
-					font-size: 40rpx;
-				}
+		.top {
+			height: 80rpx;
+			border-bottom: 2rpx solid #A1A0A8;
 
-				.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);
-					}
-				}
+			.price {
+				line-height: 80rpx;
+				font-size: 40rpx;
 			}
 
-			.bottom {
-				display: flex;
+			.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;
 
-				.title {
-					margin-top: 24rpx;
-					line-height: 32rpx;
+				&.rise {
+					color: #00E8A2;
+					background-color: rgba($color: #00E8A2, $alpha: 0.2);
 				}
+			}
+		}
 
-				.value {
-					margin: 24rpx 0;
-					color: #A1A0A8;
-				}
+		.bottom {
+			display: flex;
+			font-size: 24rpx;
 
-				.left {
-					flex: 1;
-					text-align: left;
-				}
+			.title {
+				margin-top: 24rpx;
+				line-height: 32rpx;
+			}
 
-				.center {
-					flex: 1;
-					text-align: center;
-				}
+			.value {
+				margin: 24rpx 0;
+				color: #A1A0A8;
+			}
 
-				.right {
-					flex: 1;
-					text-align: right;
-				}
+			.left {
+				flex: 1;
+				text-align: left;
+			}
 
+			.center {
+				flex: 1;
+				text-align: center;
 			}
-		}
 
-		.MarketTrades {
-			.headTitle {
-				padding-left: 32rpx;
-				font-size: 34rpx;
-				height: 80rpx;
-				line-height: 80rpx;
+			.right {
+				flex: 1;
+				text-align: right;
 			}
 
-			.table {
-				display: flex;
-				font-size: 24rpx;
+		}
+	}
 
-				.box {
-					flex: 1;
-					overflow: hidden;
-					height: 450rpx;
+	.MarketTrades {
+		.headTitle {
+			padding-left: 32rpx;
+			font-size: 34rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+		}
 
-					.title {
-						display: flex;
-						margin-bottom: 16rpx;
-						color: #A1A0A8;
+		.table {
+			display: flex;
+			font-size: 24rpx;
 
-						.quantity {
-							flex: 1;
-						}
+			.box {
+				flex: 1;
+				overflow: hidden;
+				height: 450rpx;
 
-						.price {
-							flex: 1;
-							text-align: center;
-						}
+				.title {
+					display: flex;
+					margin-bottom: 16rpx;
+					color: #A1A0A8;
+
+					.quantity {
+						flex: 1;
 					}
 
-					.list {
-						overflow: hidden;
+					.price {
+						flex: 1;
+						text-align: center;
+					}
+				}
 
-						.item {
-							position: relative;
-							width: 100%;
-							height: 50rpx;
-							line-height: 50rpx;
-							display: flex;
+				.list {
+					overflow: hidden;
 
-							.price {
-								display: block;
-								width: 50%;
-								text-align: left;
-								z-index: 1;
+					.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;
-								}
+						.num {
+							display: block;
+							width: 50%;
+							text-align: right;
+							padding-right: 32rpx;
+							z-index: 1;
 
-								&.sell {
-									color: #F4506A;
-								}
+							&.buy {
+								color: #00E8A2;
 							}
 
-							.buybg {
-								height: 100%;
-								position: absolute;
-								top: 0;
-								left: 0;
-								z-index: 0;
-								background: rgba($color: #00E8A2, $alpha: 0.1)
+							&.sell {
+								color: #F4506A;
 							}
+						}
 
-							.sellbg {
-								height: 100%;
-								position: absolute;
-								top: 0;
-								right: 0;
-								z-index: 0;
-								background: rgba($color: #F4506A, $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)
 						}
+
 					}
 				}
+			}
 
 
 
 
-			}
 		}
+	}
 
-		.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>