echarts画k线图
Posted webSong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts画k线图相关的知识，希望对你有一定的参考价值。
var charset = echarts.init(document.getElementById("k_line"))
$.get(k_line.url_A).done(function (info) {
var rawData = info.Data.History;
var single = info.Data.Signal;
var single_ = [];
var arr = [];
for (var i = 0; i < single.length; i++) {
var data = single[i][0];
var y = single[i][1];
var origle = single[i][2];
arr.push(data);
var obj = {};
if (origle == ‘0‘) {
obj = {
name: ‘0‘,
coord: [data, y],
symbol: k_line.buy_,
symbolSize: [40, 40],
label: "卖出"
}
} else {
obj = {
name: ‘1‘,
coord: [data, y],
symbol: k_line.sell_,
symbolSize: [40, 40],
label: "卖出"
}
}
single_.push(obj)
}
var dates = rawData.map(function (item) {
return item[0];
});
var data = rawData.map(function (item) {
return [+item[1], +item[2], +item[5], +item[6], ];
});
var option = {
title: {
text: k_line.title,
textStyle: {
color: "rgba(255,255,255,0.4)",
fontSize: "18"
}
},
backgroundColor: ‘#000‘,
brush: {
toolbox: [‘rect‘],
xAxisIndex: 0,
inBrush: {
symbolSize: ‘40px‘,
color: ‘#000‘,
color0: ‘#54FFFF‘,
borderColor: ‘#FF3232‘,
borderColor0: ‘#54FFFF‘
},
outOfBrush: {
color: ‘#000‘,
color0: ‘#54FFFF‘,
borderColor: ‘#FF3232‘,
borderColor0: ‘#54FFFF‘
},
z: 1000
},
toolbox: {
color: "red",
borderWidth: "10px",
itemGap: 25,
itemSize: 25,
left: ‘center‘,
iconStyle: {
normal: {
color: ‘red‘,
borderType: "solid",
borderColor: "red",
textPosition: "left"
},
emphasis: {
fontSize: "24px"
}
},
feature: {
brush: {
title: {
rect: "点击进入选中模式"
},
}
}
},
tooltip: {
trigger: ‘axis‘,
axisPointer: {
animation: false,
type: ‘cross‘,
lineStyle: {
color: ‘#376df4‘,
width: 2,
opacity: 1
}
},
formatter: function (params) {//鼠标在k线上显示的模态框
var res = params[0].seriesName + ‘ ‘ + params[0].name;
res += ‘<br/> 开盘 : ‘ + params[0].value[1];
res += ‘<br/> 最高 : ‘ + params[0].value[3];
res += ‘<br/> 收盘 : ‘ + params[0].value[2];
res += ‘<br/> 最低 : ‘ + params[0].value[4];
return res;
},
axisPointer: {
type: "cross",
crossStyle: {
color: "#666",
type: "solid"
},
},
textStyle: {
backgroundColor: "blue"
}
},
xAxis: {
type: ‘category‘,
data: dates,
axisLine: { lineStyle: { color: ‘red‘ } },
axisLabel: {//坐标轴文本样式
textStyle: {
color: "red",
},
}
},
yAxis: {
scale: true,
position: "right",
axisLine: { lineStyle: { color: ‘red‘ } },
//背景的虚线
splitLine: {
show: true,
lineStyle: {
color: "red",
type: "dashed"
}
},
axisLabel: {//坐标轴文本样式
textStyle: {
color: "red",
}
},
boundaryGap: [0, 0.2]
},
grid: {//网格的区域 大小
width: "95%",
height: "100%",
left: 0,
bottom: 80
},
dataZoom: [
{
type: ‘inside‘,
start: 88,
}],
animation: false,
series: [//放跟数据相关的
{
type: ‘candlestick‘,
name: ‘日K‘,
data: data,
markPoint: {
data: single_
},
itemStyle: {
normal: {
color: ‘#FF3232‘,
color0: ‘#54FFFF‘,
borderColor: ‘#FF3232‘,
borderColor0: ‘#54FFFF‘
},
emphasis: {
color: ‘#FF3232‘,
color0: ‘#54FFFF‘,
borderColor: ‘#FF3232‘,
borderColor0: ‘#54FFFF‘
}
}
},
]
};
//实现响应式
window.onresize = charset.resize;
//绘图
charset.setOption(option);
//鼠标框选事件
charset.on(‘brushSelected‘, renderBrushed);
function renderBrushed(params) {
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push(rawIndices)
}
var start = brushed[0][0];
s_ = start = rawData[start][0];//框选开始位置
var end = brushed[0][brushed[0].length - 1];
n_ = end = rawData[end][0];//框选结束位置
var v1 = ‘您选择的回测的日期是:\n\n\n‘ + start + "--" + end + ‘\n\n\n点击进入回测页面‘;
var url_1 = k_line.success_link + "?" + start + "&" + end;
var v2 = ‘您选择的回测的日期不存在可回测数据‘;
var v3 = "您选择的区间过大，请重新选择";
var len_ = arr.length;
for (var i = 0; i < len_; i++) {
if (arr[i] > start && arr[i] < end) {
if (getDays(end, start) > 360) {
k_line.msg(v3, ‘javascript:;‘)
break;
}
k_line.msg(v1, url_1);
break;
} else {
k_line.msg(v2, ‘javascript:;‘)
}
}
}
})//画图完毕
function getDays(strDateStart,strDateEnd){
var strSeparator = "-"; //日期分隔符
var oDate1;
var oDate2;
var iDays;
oDate1= strDateStart.split(strSeparator);
oDate2= strDateEnd.split(strSeparator);
var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
return iDays;
}//判断日期
需求是通过后台给的数据去框选区间回测数据，如果超出一年了，就不让其回测了。
var k_line = { //k线图对象
msg: function (v, url) {//提示框函数
charset.setOption({
title: {
backgroundColor: ‘#333‘,
text: v,
top: ‘50px‘,
right: 0,
width: ‘100px‘,
height: ‘80px‘,
textStyle: {
fontSize: 12,
color: ‘#fff‘,
},
link: url,
target: "self",
}
});
},
url_A: "/Home/GetKLineData?code=" + nums_code + "&areaType=" + areatype,//后台接口
buy_: ‘image:///public/imags/gou.png‘, //买入图片
sell_: ‘image:///public/imags/sale.png‘,//卖出图片
title: areaname_ + ‘:‘ + nums_code,
success_link: ‘javascript:void(0)‘,//框选成功后的跳转链接
};
layer.open({ //打开k线图
type: 1,
title: 0,
shade: 0.8,
shadeClose: false,
area: [‘90%‘, ‘90%‘],
content: "<div style=‘position:relative;width:100%;height:100%;‘><div id=‘k_line‘ style=‘width:100%;height:100%;‘></div><div id=‘k_line_‘ style=‘width:158px;height:28px;position:absolute;right:0;top:116px;z-index:99999;cursor:pointer‘></div></div>"
});
var s_ = "", n_ = "";
$(‘#k_line_‘).on("click", function () { //关闭k线图
if (s_ != ‘‘ && n_ != ‘‘) {
jBcs.s_time = s_, jBcs.n_time = n_;
jBcs.iSdisabled = false;
layer.close(layer.index);
}
});
以上是关于echarts画k线图的主要内容，如果未能解决你的问题，请参考以下文章