|
@@ -1,79 +1,105 @@
|
|
|
-
|
|
|
var myChart;
|
|
|
-
|
|
|
+// import $store from "./../../../store"
|
|
|
// post请求封装
|
|
|
-// function post(url,data) {
|
|
|
-// let baseUrl='http://192.168.3.135:8080';
|
|
|
-// return new Promise((resolve,reject)=>{
|
|
|
-// axios({
|
|
|
-// headers:{
|
|
|
-// "Content-Type": "application/x-www-form-urlencoded",
|
|
|
-// },
|
|
|
-// method:'post',
|
|
|
-// url:baseUrl+url,
|
|
|
-// data:Qs.stringify( data || {})
|
|
|
-// })
|
|
|
-// .then(res=>{
|
|
|
-// console.log(res)
|
|
|
-// if(res.data.code==1){
|
|
|
-// resolve(res.data)
|
|
|
-// }else{
|
|
|
-// reject()
|
|
|
-// alertError('请求超时')
|
|
|
-// }
|
|
|
-// })
|
|
|
-// .catch(err=>{
|
|
|
-// alertError('请求超时')
|
|
|
-// })
|
|
|
-// })
|
|
|
-// }
|
|
|
+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() {
|
|
|
+ document.addEventListener('plusready', function() {
|
|
|
console.log('......')
|
|
|
})
|
|
|
- try{
|
|
|
+ try {
|
|
|
plus.nativeUI.toast(title, {
|
|
|
- icon:'/static/common/toast-error.png',
|
|
|
- style:'inline',
|
|
|
- verticalAlign:'top'
|
|
|
+ icon: '/static/common/toast-error.png',
|
|
|
+ style: 'inline',
|
|
|
+ verticalAlign: 'top'
|
|
|
});
|
|
|
- }catch(e){
|
|
|
+ } 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},
|
|
|
+ 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},
|
|
|
+ category: 1,
|
|
|
+ categoryList: [{
|
|
|
+ 'label': '深度',
|
|
|
+ 'value': 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'label': '成交',
|
|
|
+ 'value': 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'label': '简介',
|
|
|
+ 'value': 3
|
|
|
+ },
|
|
|
],
|
|
|
- txData:{},//交易数据统计
|
|
|
- buyList:[],
|
|
|
- sellList:[],
|
|
|
- dealHis:[],
|
|
|
- tokenInfo:{},
|
|
|
- page:1,
|
|
|
-
|
|
|
+ txData: {}, //交易数据统计
|
|
|
+ buyList: [],
|
|
|
+ sellList: [],
|
|
|
+ dealHis: [],
|
|
|
+ tokenInfo: {},
|
|
|
+ page: 1,
|
|
|
+
|
|
|
},
|
|
|
created() {
|
|
|
+ console.log('00')
|
|
|
this.getTxData()
|
|
|
this.getDepth()
|
|
|
},
|
|
@@ -82,73 +108,115 @@ var app = new Vue({
|
|
|
this.draw()
|
|
|
this.getKline()
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
// 返回上一页
|
|
|
- back(){
|
|
|
+ back() {
|
|
|
uni.navigateBack()
|
|
|
},
|
|
|
// 获取24小时交易数据统计
|
|
|
- getTxData(){
|
|
|
- this.txData=txData;
|
|
|
+ getTxData() {
|
|
|
+ this.txData = txData;
|
|
|
},
|
|
|
// 获取k线数据,生成k线
|
|
|
- getKline(){
|
|
|
- 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: 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
|
|
|
- },
|
|
|
- ]
|
|
|
+ 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){
|
|
|
+ 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 = list || [];
|
|
|
+ let len = 20 - list.length;
|
|
|
+ if (len > 0) {
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ if (type == 1) {
|
|
|
list.unshift({})
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
list.push({})
|
|
|
}
|
|
|
}
|
|
@@ -156,34 +224,37 @@ var app = new Vue({
|
|
|
return list;
|
|
|
},
|
|
|
// 获取深度数据
|
|
|
- getDepth(){
|
|
|
- this.buyList=this.addItem(depthList().buyList || []);
|
|
|
- this.sellList=this.addItem(depthList().sellList || []);
|
|
|
+ getDepth() {
|
|
|
+
|
|
|
+ this.buyList = this.addItem(depthList().buyList || []);
|
|
|
+ this.sellList = this.addItem(depthList().sellList || []);
|
|
|
+ // console.log('000' , data)
|
|
|
+
|
|
|
},
|
|
|
// 获取成交记录
|
|
|
- getDealHis(){
|
|
|
- this.dealHis=dealHis();
|
|
|
+ getDealHis() {
|
|
|
+ this.dealHis = dealHis();
|
|
|
},
|
|
|
// 获取项目简介信息
|
|
|
- getTokenInfo(){
|
|
|
- this.tokenInfo=tokenInfo;
|
|
|
+ getTokenInfo() {
|
|
|
+ this.tokenInfo = tokenInfo;
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 切换tab
|
|
|
- switchTab(val){
|
|
|
- if(this.current==val) return;
|
|
|
- this.current=val;
|
|
|
+ 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){
|
|
|
+ switchCategory(val) {
|
|
|
+ if (this.category == val) return;
|
|
|
+ this.category = val;
|
|
|
+ if (this.category == 1) {
|
|
|
this.getDepth()
|
|
|
- }else if(this.category==2){
|
|
|
+ } else if (this.category == 2) {
|
|
|
this.getDealHis()
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.getTokenInfo()
|
|
|
}
|
|
|
},
|
|
@@ -211,16 +282,17 @@ var app = new Vue({
|
|
|
return result;
|
|
|
},
|
|
|
// 绘制(配置项)
|
|
|
- draw(){
|
|
|
- let that=this;
|
|
|
+ draw() {
|
|
|
+ let that = this;
|
|
|
var upColor = '#03ad91';
|
|
|
var downColor = '#dd345b';
|
|
|
- var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
|
|
|
+ var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622',
|
|
|
+ '#bda29a', '#6e7074',
|
|
|
'#546570', '#c4ccd3'
|
|
|
];
|
|
|
var labelFont = 'bold 12px Sans-serif';
|
|
|
var option = {
|
|
|
- backgroundColor: '#0d1723',
|
|
|
+ // backgroundColor: '#0d1723',
|
|
|
title: {
|
|
|
show: false
|
|
|
},
|
|
@@ -228,17 +300,17 @@ var app = new Vue({
|
|
|
show: false
|
|
|
},
|
|
|
visualMap: {
|
|
|
- show: false,
|
|
|
- seriesIndex: 4,
|
|
|
- dimension: 2,
|
|
|
- pieces: [{
|
|
|
- value: 1,
|
|
|
- color: downColor
|
|
|
- }, {
|
|
|
- value: -1,
|
|
|
- color: upColor
|
|
|
- }]
|
|
|
- },
|
|
|
+ show: false,
|
|
|
+ seriesIndex: 4,
|
|
|
+ dimension: 2,
|
|
|
+ pieces: [{
|
|
|
+ value: 1,
|
|
|
+ color: downColor
|
|
|
+ }, {
|
|
|
+ value: -1,
|
|
|
+ color: upColor
|
|
|
+ }]
|
|
|
+ },
|
|
|
grid: [{
|
|
|
top: '5%',
|
|
|
left: 20,
|
|
@@ -259,7 +331,7 @@ var app = new Vue({
|
|
|
label: {
|
|
|
backgroundColor: '#0d1723',
|
|
|
color: '#fff',
|
|
|
- borderColor: 'rgb(99, 117, 139)',
|
|
|
+ // borderColor: 'rgb(99, 117, 139)',
|
|
|
borderWidth: 1,
|
|
|
borderRadius: 2,
|
|
|
fontSize: 10
|
|
@@ -312,7 +384,7 @@ var app = new Vue({
|
|
|
show: true,
|
|
|
margin: 6,
|
|
|
fontSize: 10,
|
|
|
- color: 'rgba(99, 117, 139, 1.0)',
|
|
|
+ // color: 'rgba(99, 117, 139, 1.0)',
|
|
|
formatter: function(value) {
|
|
|
return echarts.format.formatTime('MM-dd', value);
|
|
|
}
|
|
@@ -337,7 +409,7 @@ var app = new Vue({
|
|
|
}, //坐标轴轴线相关设置。
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
- inside:true
|
|
|
+ inside: true
|
|
|
}, //坐标轴刻度相关设置。
|
|
|
axisLabel: { //坐标轴刻度标签的相关设置。
|
|
|
show: true,
|
|
@@ -372,46 +444,67 @@ var app = new Vue({
|
|
|
show: false
|
|
|
}
|
|
|
}],
|
|
|
-
|
|
|
+
|
|
|
animation: false, //是否开启动画。
|
|
|
color: colorList,
|
|
|
tooltip: {
|
|
|
show: true, //是否显示提示框组件,包括提示框浮层和 axisPointer。
|
|
|
trigger: 'axis', //触发类型。item,axis,none
|
|
|
- formatter(params){
|
|
|
+ formatter(params) {
|
|
|
let tooltip = '';
|
|
|
- let time = '', open = 0, high = 0, low = 0, close = 0, amount = 0;
|
|
|
+ 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;
|
|
|
+ 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 = '<div class="charts-tooltip">' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '时间' + '</div><div class="ctr-value">' + time + '</div></div>' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '开' + '</div><div class="ctr-value">' + open + '</div></div>' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '高' + '</div><div class="ctr-value">' + high + '</div></div>' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '低' + '</div><div class="ctr-value">' + low + '</div></div>' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '收' + '</div><div class="ctr-value">' + close + '</div></div>' +
|
|
|
- '<div class="charts-tooltip-row"><div class="ctr-label">' + '数量' + '</div><div class="ctr-value">' +amount + '</div></div></div>';
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '时间' +
|
|
|
+ '</div><div class="ctr-value">' + time + '</div></div>' +
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '开' +
|
|
|
+ '</div><div class="ctr-value">' + open + '</div></div>' +
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '高' +
|
|
|
+ '</div><div class="ctr-value">' + high + '</div></div>' +
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '低' +
|
|
|
+ '</div><div class="ctr-value">' + low + '</div></div>' +
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '收' +
|
|
|
+ '</div><div class="ctr-value">' + close + '</div></div>' +
|
|
|
+ '<div class="charts-tooltip-row"><div class="ctr-label">' + '数量' +
|
|
|
+ '</div><div class="ctr-value">' + amount + '</div></div></div>';
|
|
|
}
|
|
|
if (params[i].seriesName === 'MA5') {
|
|
|
- that.MA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ that.volMA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
|
|
|
+ .data, 2)) : 0
|
|
|
}
|
|
|
}
|
|
|
return tooltip;
|
|
@@ -422,7 +515,7 @@ var app = new Vue({
|
|
|
}, //提示框浮层的文本样式
|
|
|
backgroundColor: 'rgba(30,42,66,0.8);', //提示框浮层的背景颜色。
|
|
|
borderColor: '#2f3a56', //提示框浮层的边框颜色。
|
|
|
- borderWidth:2,
|
|
|
+ borderWidth: 2,
|
|
|
position: function(pos, params, el, elRect, size) { //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
|
|
|
var obj = {
|
|
|
top: 20
|
|
@@ -467,17 +560,15 @@ var app = new Vue({
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
dataZoom: [{ //用于区域缩放
|
|
|
type: 'inside',
|
|
|
xAxisIndex: [0, 1],
|
|
|
realtime: false,
|
|
|
start: 50,
|
|
|
end: 100,
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
type: 'candlestick',
|
|
|
name: '日K',
|
|
|
data: [],
|
|
@@ -515,74 +606,106 @@ var app = new Vue({
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- },
|
|
|
+ },
|
|
|
{
|
|
|
name: 'MA5',
|
|
|
type: 'line',
|
|
|
data: [],
|
|
|
- symbol: 'none',//去除圆点
|
|
|
+ symbol: 'none', //去除圆点
|
|
|
smooth: true,
|
|
|
- lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 1,
|
|
|
+ width: 1,
|
|
|
+ color: "#eef4ba"
|
|
|
+ }
|
|
|
+ },
|
|
|
z: 5
|
|
|
- },
|
|
|
+ },
|
|
|
{
|
|
|
name: 'MA10',
|
|
|
type: 'line',
|
|
|
data: [],
|
|
|
- symbol: 'none',//去除圆点
|
|
|
+ symbol: 'none', //去除圆点
|
|
|
smooth: true,
|
|
|
- lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 1,
|
|
|
+ width: 1,
|
|
|
+ color: '#83c1c5'
|
|
|
+ }
|
|
|
+ },
|
|
|
z: 4
|
|
|
},
|
|
|
{
|
|
|
name: 'MA30',
|
|
|
type: 'line',
|
|
|
data: [],
|
|
|
- symbol: 'none',//去除圆点
|
|
|
+ symbol: 'none', //去除圆点
|
|
|
smooth: true,
|
|
|
- lineStyle: { normal: { opacity: 1, width: 1, color: '#b39cd8' } },
|
|
|
+ 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: '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"
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- name: 'VolumeMA10',
|
|
|
- type: 'line',
|
|
|
- xAxisIndex: 1,
|
|
|
- yAxisIndex: 1,
|
|
|
- data: [],
|
|
|
- symbol: 'none',//去除圆点
|
|
|
- smooth: true,
|
|
|
- lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
|
|
|
- z: 4
|
|
|
+ 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){
|
|
|
+ myChart.on('datazoom', function(params) {
|
|
|
+ let num = params.batch[0]['start'];
|
|
|
+ if (num == 0) {
|
|
|
console.log('到最左边了')
|
|
|
}
|
|
|
})
|
|
|
- window.addEventListener('resize', () => { myChart.resize()})
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
})
|