云迈博客

您现在的位置是:首页 > 前端技术 > 正文

前端技术

echart k线图之交易策略信号展示图(三)

徐颖2020-08-28前端技术498
本章讲解K线图上如何根据需求锚点。k线图常见高低点锚点//signal0平仓1开多-1开空null没信号(不提示)//1高点-1低点0出

本章讲解K线图上如何根据需求锚点。

k线图 常见高低点锚点

// signal 0 平仓 1 开多 -1 开空 null 没信号(不提示)
// 1高点 -1低点 0出现多空平仓信号 signal

var test1 = []; //低点
var test2 = []; //高点
//遍历数组signal_arr_new,根据上面注释,把高点低点提取出来,然后再根据出现高点低点的当前数组的位置获取当前位置K线图的x时间轴与y轴进行锚点
for (var i = 0; i < signal_arr_new.length; i++) {
if (signal_arr_new[i] == 1) {
test1.push(i);
} else if (signal_arr_new[i] == -1) {
test2.push(i);
}
}
var didian_arr = [];
var gaodian_arr = [];
for (var x = 0; x < data0.categoryData.length; x++) {
for (var y = 0; y < test1.length; y++) {
if (x == test1[y]) {
let arr = [];
arr.push(data0.categoryData[x], data0.values[x][3]) gaodian_arr.push(arr)
}
}
for (var z = 0; z < test2.length; z++) {
if (x == test2[z]) {
let arr = [];
arr.push(data0.categoryData[x], data0.values[x][3]) didian_arr.push(arr)
}
}
}

===============================================
锚点的时候,主要给到markPoint中data的coord[‘x轴’,’y轴’]
这里需要注意的是不能在markPoint内或者data内循环遍历数组把值给到coord。
定义一个数组,把需要锚的高低点提前设置好。
var maodian = [];
for (var i = 0; i < didian_arr.length; i++) {
maodian.push({
name: ‘低点标点’,
coord: didian_arr[i],
value: ‘低’,
itemStyle: {
color: ‘rgb(255,180,0)’
}
})
}
for (var i = 0; i < gaodian_arr.length; i++) {
maodian.push({
name: ‘高点标点’,
coord: gaodian_arr[i],
value: ‘高’,
itemStyle: {
color: ‘rgb(90,215,187)’
}
})

}

/* data: [{
name: ‘XX标点’,
coord: [‘2013/5/31’, 2300],
value: 2300,
itemStyle: {
color: ‘rgb(41,60,85)’
}
}], */

markPoint: {
data: maodian, //锚点,高低点
},

以上已经完成设置,详见效果图。
k线图-锚点-高低点

发表评论

评论列表