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线图的更多相关文章

  1. 使用ECharts画K线图

    需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...

  2. 【React】react项目引入echarts插件 K线图

    参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...

  3. echarts绘制k线图为什么写candlestick类型就报错

    错误提示:echarts-en.common.js:11713 Uncaught Error: Component series.candlestick not exists. Load it fir ...

  4. 功能分解——Android下画分时图与k线图有感

    最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是 ...

  5. 在MPAndroidChart库K线图的基础上画均线

    CombinedChart 可以直接使用MPAndroidChart库里面提供的CombinedChart实现组合图形 Demo:CombinedChartDemo ------分割线(如果想在一个图 ...

  6. 关于k Line Chart (k线图)

    K Line Chart python实现k线图的代码,之前找过matplotlib中文文档但是画k线图的finance方法已经弃用了.所以自己在网上搜寻一下加上改编,很好的实现出k线图, 代码如下: ...

  7. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  8. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  9. K线图学习

    本博文(适合入门的股民朋友)内容来自网络,股市有风险,入市需谨慎 一.起源 K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,起源于日本十八世纪德川 ...

随机推荐

  1. mysql的select的五子句

    转: http://www.cnblogs.com/billyu/p/5033167.html http://www.cnblogs.com/xiadong90-2015/p/4222965.html ...

  2. JQuery学习六

    <JQuery cookie>插件 cookie是保存在浏览器上的内容,用户在这次浏览页面的时候向cookie中保存文本内容.下次再访问页面的时侯就可以取出来上次保存的内容.这样可以得到上 ...

  3. JSP动态合并单元格

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table ...

  4. C11性能之道:转移和转发

    1.move C++11中可以将左值强制转换为右值,从而避免对象的拷贝来提升性能.move将对象的状态或者所有权从一个对象转移到另一个对象,没有内存拷贝.深拷贝和move的区别如图: 从图可以看出,深 ...

  5. PowerDesigner16 修改表或表的字段Name的时候不让Code不自动跟着变

    在修改表或表的字段Name的时候不让Code不自动跟着变,设置如下: tools-> General   Options-> Dialog 去掉勾选 Name To Code mirror ...

  6. 51nod 1363 最小公倍数之和 ——欧拉函数

    给出一个n,求1-n这n个数,同n的最小公倍数的和.例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mod 1000 ...

  7. 【BZOJ】1731: [Usaco2005 dec]Layout 排队布局

    [题意]给定按编号顺序站成一排的牛,给定一些约束条件如两牛距离不小于或不大于某个值,求1和n的最大距离.无解输出-1,无穷解输出-2. [算法]差分约束+最短路 [题解]图中有三个约束条件,依次分析: ...

  8. Computer(HDU2196+树形dp+树的直径)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2196 题目: 题意:有n台电脑,每台电脑连接其他电脑,第i行(包括第一行的n)连接u,长度为w,问你每 ...

  9. 25、如何实现redis集群?

    由于Redis出众的性能,其在众多的移动互联网企业中得到广泛的应用.Redis在3.0版本前只支持单实例模式,虽然现在的服务器内存可以到100GB.200GB的规模,但是单实例模式限制了Redis没法 ...

  10. JSP九大内置对象,七大动作,三大指令

    JSP之九大内置对象 隐藏对象入门探索 Servlet 和JSP中输出数据都需要使用out对象.Servlet 中的out对象是通过getWriter()方法获取的.而JSP中没有定义out对象却可以 ...