var myChart; // import $store from "./../../../store" // post请求封装 function post(url, data) { let baseUrl = 'https://biking.okenx.com'; return new Promise((resolve, reject) => { axios({ headers: { "Content-Type": "application/x-www-form-urlencoded", }, method: 'get', url: baseUrl + '/api/currency/new_timeshar?from=1685422833&to=1685520093&symbol=LTC/USDT&period=1min', }) .then(res => { console.log('res ======', res) if (res.data.code == 1) { resolve(res.data.data) } else { reject() alertError('请求超时') } }) .catch(err => { alertError('请求超时') }) }) } // 弹窗 function alertError(title) { document.addEventListener('plusready', function() { console.log('......') }) try { plus.nativeUI.toast(title, { icon: '/static/common/toast-error.png', style: 'inline', verticalAlign: 'top' }); } catch (e) { //TODO handle the exception } } var app = new Vue({ el: '#app', data: { MA5: '', MA10: '', MA30: '', volMA5: '', volMA10: '', current: 1, tabs: [{ 'label': '1分钟', 'value': 1 }, { 'label': '15分钟', 'value': 2 }, { 'label': '30分钟', 'value': 3 }, { 'label': '1小时', 'value': 4 }, { 'label': '4小时', 'value': 5 }, { 'label': '1天', 'value': 6 }, ], category: 1, categoryList: [{ 'label': '深度', 'value': 1 }, { 'label': '成交', 'value': 2 }, { 'label': '简介', 'value': 3 }, ], txData: {}, //交易数据统计 buyList: [], sellList: [], dealHis: [], tokenInfo: {}, page: 1, }, created() { console.log('00') this.getTxData() this.getDepth() }, mounted() { myChart = echarts.init(document.getElementById('main')); this.draw() this.getKline() }, methods: { // 返回上一页 back() { uni.navigateBack() }, // 获取24小时交易数据统计 getTxData() { this.txData = txData; }, // 获取k线数据,生成k线 getKline() { post().then(res => { const dataX = [] res.forEach(el => { dataX.push(el.time) rawData.push([new Date(el.time).getTime() , el.open , el.high , el.low, el.close , el.volume ]) // var data = rawData.map(function(item) { // return [+item[1], +item[2], +item[3], +item[4], +item[5]]; // }); // var volumes = rawData.map(function(item, index) { // return [index, item[5], item[1] > item[2] ? 1 : -1]; // }); }) // var dataList = res.map(data => { // // ["2004-01-05", 10411.85, 10544.07, 10411.85, 10575.92, 221290000], // // return [new Date(data.time).getTime() , data.open , data.high , data.low, data.close , data.volume ] // return{ // timestamp: new Date(data.time).getTime(), // open: +data.open, // high: +data.high, // low: +data.low, // close: +data.close, // volume: +data.volume // } // }) var dates = rawData.map(function(item) { console.log('dates--------' , item) return item[0]; }); var data = rawData.map(function(item) { return [+item[1], +item[2], +item[3], +item[4], +item[5]]; }); var volumes = rawData.map(function(item, index) { return [index, item[5], item[1] > item[2] ? 1 : -1]; }); // this.buyList=this.addItem(res.buyList || []); // this.sellList=this.addItem(res.sellList || []); console.log('rawData 1= ', rawData) var dataMA5 = this.calculateMA(5, data); var dataMA10 = this.calculateMA(10, data); var dataMA30 = this.calculateMA(30, data); var volumeMA5 = this.calculateMA(5, volumes); var volumeMA10 = this.calculateMA(10, volumes); myChart.setOption({ xAxis: [{ // data: dates data: dataX }, { data: dataX // data: dates }, ], series: [{ name: '日K', data: data }, { name: 'MA5', data: dataMA5 }, { name: 'MA10', data: dataMA10 }, { name: 'MA30', data: dataMA30 }, { name: 'Volume', data: volumes }, { name: 'VolumeMA5', data: volumeMA5 }, { name: 'VolumeMA10', data: volumeMA10 }, ] }) }) }, // 列表条数不足补全 addItem(list, type) { // type: 1开头加,2末尾加 list = list || []; let len = 20 - list.length; if (len > 0) { for (let i = 0; i < len; i++) { if (type == 1) { list.unshift({}) } else { list.push({}) } } } return list; }, // 获取深度数据 getDepth() { this.buyList = this.addItem(depthList().buyList || []); this.sellList = this.addItem(depthList().sellList || []); // console.log('000' , data) }, // 获取成交记录 getDealHis() { this.dealHis = dealHis(); }, // 获取项目简介信息 getTokenInfo() { this.tokenInfo = tokenInfo; }, // 切换tab switchTab(val) { if (this.current == val) return; this.current = val; this.getKline() }, // 切换类目 switchCategory(val) { if (this.category == val) return; this.category = val; if (this.category == 1) { this.getDepth() } else if (this.category == 2) { this.getDealHis() } else { this.getTokenInfo() } }, // 截取数字字符串 保留precision小数 formatterNum(value, precision) { // console.log(value) let reg = new RegExp('^\\d+(?:\\.\\d{0,' + precision + '})?') return value.toString().match(reg) }, // 计算MA calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += data[i - j][1]; } // console.log(sum, dayCount) result.push((sum / dayCount).toFixed(2)); } return result; }, // 绘制(配置项) draw() { let that = this; var upColor = '#03ad91'; var downColor = '#dd345b'; var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3' ]; var labelFont = 'bold 12px Sans-serif'; var option = { // backgroundColor: '#0d1723', title: { show: false }, legend: { show: false }, visualMap: { show: false, seriesIndex: 4, dimension: 2, pieces: [{ value: 1, color: downColor }, { value: -1, color: upColor }] }, grid: [{ top: '5%', left: 20, right: 20, height: '70%' }, { top: '80%', left: 20, right: 20, height: '16%' }, ], axisPointer: { //坐标轴指示器配置项 link: { xAxisIndex: 'all' }, label: { backgroundColor: '#0d1723', color: '#fff', // borderColor: 'rgb(99, 117, 139)', borderWidth: 1, borderRadius: 2, fontSize: 10 } }, xAxis: [{ type: 'category', //坐标轴类型。(value:数值轴,适用于连续数据。,category:类目轴,适用于离散的类目数据,time: 时间轴,适用于连续的时序数据,log:对数轴。适用于对数数据) data: [], //类目数据,在类目轴(type: 'category')中有效。 scale: true, boundaryGap: false, //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。 axisLine: { show: false }, //坐标轴轴线相关设置 axisTick: { show: false }, //坐标轴刻度相关设置。 axisLabel: { show: false, }, //坐标轴刻度标签的相关设置。 splitLine: { show: false, lineStyle: { color: 'rgba(255,255,255, 0.1)' } }, //坐标轴在 grid 区域中的分隔线。 min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。 max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。 axisPointer: { label: { margin: 200 } }, }, { type: 'category', gridIndex: 1, //x 轴所在的 grid 的索引,默认位于第一个 grid。 data: [], //类目数据,在类目轴(type: 'category')中有效。 scale: true, boundaryGap: false, //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。 axisLine: { show: false, lineStyle: { color: 'rgba(255,255,255,1)', width: 1 } }, //坐标轴轴线相关设置 axisTick: { show: false }, //坐标轴刻度相关设置。 axisLabel: { //坐标轴刻度标签的相关设置。 show: true, margin: 6, fontSize: 10, // color: 'rgba(99, 117, 139, 1.0)', formatter: function(value) { return echarts.format.formatTime('MM-dd', value); } }, splitNumber: 20, splitLine: { show: false, lineStyle: { color: 'rgba(255,255,255, 0.1)' } }, //坐标轴在 grid 区域中的分隔线。 min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。 max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。 // axisPointer: { show: true, type: 'none', label: { show: false }}, }], yAxis: [{ type: 'value', //坐标轴类型。(value:数值轴,适用于连续数据。,category:类目轴,适用于离散的类目数据,time: 时间轴,适用于连续的时序数据,log:对数轴。适用于对数数据) position: 'right', //y 轴的位置。'left','right' scale: true, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。(在设置 min 和 max 之后该配置项无效。) axisLine: { show: true }, //坐标轴轴线相关设置。 axisTick: { show: true, inside: true }, //坐标轴刻度相关设置。 axisLabel: { //坐标轴刻度标签的相关设置。 show: true, color: 'rgba(99, 117, 139, 1.0)', inside: true, fontSize: 10, formatter: function(value) { return Number(value).toFixed(2) } }, splitLine: { show: false, lineStyle: { color: 'rgba(255,255,255, 0.1)' } }, //坐标轴在 grid 区域中的分隔线。 }, { type: 'value', position: 'right', scale: true, gridIndex: 1, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }], animation: false, //是否开启动画。 color: colorList, tooltip: { show: true, //是否显示提示框组件,包括提示框浮层和 axisPointer。 trigger: 'axis', //触发类型。item,axis,none formatter(params) { let tooltip = ''; let time = '', open = 0, high = 0, low = 0, close = 0, amount = 0; for (var i = 0; i < params.length; i++) { if (params[i].seriesName === '日K') { time = params[i].name; open = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[ 1], 2)) : 0; close = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[ 2], 2)) : 0; low = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[ 3], 2)) : 0; high = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[ 4], 2)) : 0; amount = params[i].data.length > 1 ? Number(that.formatterNum(params[i] .data[5], 2)) : 0; // console.log(time,open,close,low,high,amount) tooltip = '
' + '
' + '时间' + '
' + time + '
' + '
' + '开' + '
' + open + '
' + '
' + '高' + '
' + high + '
' + '
' + '低' + '
' + low + '
' + '
' + '收' + '
' + close + '
' + '
' + '数量' + '
' + amount + '
'; } if (params[i].seriesName === 'MA5') { that.MA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i] .data, 2)) : 0 } if (params[i].seriesName === 'MA10') { that.MA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i] .data, 2)) : 0 } if (params[i].seriesName === 'MA30') { that.MA30 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i] .data, 2)) : 0 } if (params[i].seriesName === 'VolumeMA5') { that.volMA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i] .data, 2)) : 0 } if (params[i].seriesName === 'VolumeMA10') { that.volMA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i] .data, 2)) : 0 } } return tooltip; }, triggerOn: 'click', //提示框触发的条件 'mousemove','click','mousemove|click','none' textStyle: { fontSize: 10 }, //提示框浮层的文本样式 backgroundColor: 'rgba(30,42,66,0.8);', //提示框浮层的背景颜色。 borderColor: '#2f3a56', //提示框浮层的边框颜色。 borderWidth: 2, position: function(pos, params, el, elRect, size) { //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。 var obj = { top: 20 }; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10; return obj; }, axisPointer: { //坐标轴指示器配置项。 label: { color: 'rgba(255,255,255,.87)', fontSize: 9, backgroundColor: '#020204', borderColor: "#9c9fa4", shadowBlur: 0, borderWidth: 0.5, padding: [4, 2, 3, 2], }, animation: false, type: 'cross', lineStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(30, 42, 66, 0.1)' // 0% 处的颜色 }, { offset: 0.7, color: 'rgba(30, 42, 66,0.9)' // 100% 处的颜色 }, { offset: 1, color: 'rgba(30, 42, 66,0.2)' // 100% 处的颜色 }] }, width: 10, shadowColor: 'rgba(30, 42, 66,0.7)', shadowBlur: 0, shadowOffsetY: 68, } } }, dataZoom: [{ //用于区域缩放 type: 'inside', xAxisIndex: [0, 1], realtime: false, start: 50, end: 100, }], series: [{ type: 'candlestick', name: '日K', data: [], itemStyle: { color: upColor, color0: downColor, borderColor: upColor, borderColor0: downColor }, markPoint: { symbol: 'rect', symbolSize: [-10, 0.5], symbolOffset: [5, 0], itemStyle: { color: 'rgba(255,255,255,.87)' }, label: { color: 'rgba(255,255,255,.87)', offset: [10, 0], fontSize: 10, align: 'left', formatter: function(params) { return Number(params.value).toFixed(2) } }, data: [{ name: 'max', type: 'max', valueDim: 'highest' }, { name: 'min', type: 'min', valueDim: 'lowest' } ] }, }, { name: 'MA5', type: 'line', data: [], symbol: 'none', //去除圆点 smooth: true, lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } }, z: 5 }, { name: 'MA10', type: 'line', data: [], symbol: 'none', //去除圆点 smooth: true, lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } }, z: 4 }, { name: 'MA30', type: 'line', data: [], symbol: 'none', //去除圆点 smooth: true, lineStyle: { normal: { opacity: 1, width: 1, color: '#b39cd8' } }, z: 3 }, { name: 'Volume', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [] }, { name: 'VolumeMA5', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: [], symbol: 'none', //去除圆点 smooth: true, lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } }, z: 5 }, { name: 'VolumeMA10', type: 'line', xAxisIndex: 1, yAxisIndex: 1, data: [], symbol: 'none', //去除圆点 smooth: true, lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } }, z: 4 }, ] }; myChart.setOption(option); // 加载上一页数据 myChart.on('datazoom', function(params) { let num = params.batch[0]['start']; if (num == 0) { console.log('到最左边了') } }) window.addEventListener('resize', () => { myChart.resize() }) } } })