//var bgColor = "#1f212d";//背景
var bgColor = "#000000";//背景
var upColor="#F9293E";//涨颜色
//var downColor="#00aa3b";//跌颜色
var downColor="#54FCFC";//跌颜色
// ma 颜色
//var ma5Color = "#39afe6";
var ma5Color = "#FFFFFF";
var ma10Color = "#ffab42";
var ma20Color = "#da6ee8";
var ma30Color = "#00940b";
var option = initKOption();
function initKOption(){
var str = '{"code":1,"msg":"\u64cd\u4f5c\u6210\u529f\uff01","stockcode":"000860","name":"\u987a\u946b\u519c\u4e1a","data":[["2019-01-09",33.2,34.37,33.15,34.88,323805809,-42.01,-4.52,null,null],["2019-01-10",34.3,34.22,34.08,34.76,208373777,-57.21,45.02,null,null],["2019-01-11",34.5,34.63,34.04,35.1,183689036,-44.75,69.53,1,-182.78],["2019-01-14",34.3,34.61,33.88,34.92,146061888,32.42,137.9,null,null],["2019-01-15",34.61,36.65,34.41,36.88,372430544,-60.59,231.39,null,null],["2019-01-16",36.5,36.65,36.1,37.08,280606605,-9.37,229.71,null,null],["2019-01-17",36.68,35.95,35.95,36.92,211470094,-13.17,218.16,null,null],["2019-01-18",35.96,36.9,35.9,37.8,321291139,24.8,201.86,-14.65,-51.81],["2019-01-21",36.98,37.21,36.88,37.96,271589775,1,222.42,null,null],["2019-01-22",36.8,37.09,36.61,37.25,197527447,15.23,218.05,null,null],["2019-01-23",36.85,38.62,36.8,38.89,349603059,-39.05,211.59,null,null],["2019-01-24",38.4,39.37,38.2,39.86,304809685,15.36,242.13,null,null],["2019-01-25",39.63,38.98,38.63,39.8,275472017,-25.24,159.75,0,55.32],["2019-01-28",39.07,40.52,39.01,40.7,384821343,51.72,280.12,null,null],["2019-01-29",40.39,40.48,39.6,40.7,259715968,-23.99,171.59,null,null],["2019-01-30",40,39.46,39.43,40.92,210069665,-26.44,247.71,null,null],["2019-01-31",39.47,39.9,39.23,40.49,241722170,12.9,203.99,null,null],["2019-02-01",39.95,39.78,39.51,40.4,200584710,-7.3,102.74,-86.01,151.43],["2019-02-11",39.96,41.18,39.02,41.66,379968244,-11.66,113.52,null,null],["2019-02-12",41.17,41.17,40.51,41.84,315618555,-13.52,178.35,null,null],["2019-02-13",41.25,41.1,40.56,41.5,310706680,-20.15,134.95,null,null],["2019-02-14",41.11,41.41,40.81,42.15,230409862,-3,117.31,null,null],["2019-02-15",41.35,40.1,40.1,41.35,231931494,-3.93,86.59,103.39,234.31],["2019-02-18",40.39,42.64,40.38,43,404266781,19.86,126.56,null,null],["2019-02-19",42.59,42.28,41.6,43.15,273566797,12.03,110.29,null,null],["2019-02-20",41.8,42.1,41.6,42.65,232117133,8.93,91,null,null],["2019-02-21",42.2,41.7,41.44,42.48,240612040,-2.24,88.63,null,null],["2019-02-22",41.61,41.35,40.6,41.61,284922434,-0.63,79.63,-118.6,200.28],["2019-02-25",40.98,42.5,40.9,42.84,446776560,-1.86,88.05,null,null],["2019-02-26",42.1,41.83,41.5,42.84,305207648,4,36.49,null,null],["2019-02-27",42,42.1,41.89,44.2,467743030,-2.12,39.49,null,null],["2019-02-28",41.98,42.24,40.88,42.77,312307021,-4.32,43.67,null,null],["2019-03-01",42.5,43.27,41.64,43.6,468914818,-16.69,73.48,22.33,271.3],["2019-03-04",43.1,43.3,42.2,44.84,591651198,-0.07,74.43,null,null],["2019-03-05",43.42,45.4,43.3,45.4,574741888,-45.29,84.93,null,null],["2019-03-06",45.7,44.48,43.83,45.7,401426966,-34.91,83.82,null,null],["2019-03-07",44.5,43.14,41.9,44.7,500473941,7.15,80.19,null,null],["2019-03-08",42.11,42.08,41.9,43.39,278556975,-6.7,56.86,-73.82,303.28],["2019-03-11",42.56,43.69,42.5,44.1,378343404,-4.82,50.84,null,null],["2019-03-12",43.68,44.7,42.6,44.94,500318983,2.57,50.05,null,null],["2019-03-13",44.5,45.86,44.49,46.88,494987424,-36.82,65.04,null,null],["2019-03-14",45.98,45.2,44.85,46.85,439916251,25.29,67.96,null,null],["2019-03-15",48.5,49.72,48.5,49.72,722553975,-92.75,156.43,138.3,563.78],["2019-03-18",53,54.69,51.12,54.69,1167284323,136.24,209.18,null,null],["2019-03-19",57.46,56.19,53.91,58.88,2242763085,147.02,519.03,null,null],["2019-03-20",55.35,55.45,54.7,58.2,1488077677,4,420.59,null,null],["2019-03-21",55.53,54.39,53,56.35,1176297163,-51.23,451.45,null,null],["2019-03-22",54.58,56.96,54.41,58.14,1395614055,-35.48,588.3,215.37,738.51],["2019-03-25",54.14,56,53.1,56.86,677460360,-41.68,320.9,null,null],["2019-03-26",56,58.37,55.8,61.3,1102807417,-6.86,537.93,null,null],["2019-03-27",58.6,58.29,57.11,60.88,1211431721,-13.59,318.79,null,null],["2019-03-28",58.04,58.88,56.7,59.66,1018436539,7.32,356.92,null,null],["2019-03-29",59.3,60.63,58.51,62.26,1374762733,36.16,223.32,-118.05,597.84],["2019-04-01",59.21,60.55,59,60.73,991018730,22.44,304.51,null,null],["2019-04-02",60.04,59.11,58.01,60.09,836366394,15.31,302.14,null,null],["2019-04-03",58.68,59,58.5,59.9,0,-0.14,138.17,null,null],["2019-04-04",58.31,59.37,58.26,61.2,0,3.61,189.94,-2,918.5],["2019-04-08",60.5,58.5,57.5,60.9,897306904,11.41,141.54,null,null],["2019-04-09",58.12,59.89,56.89,59.89,584331571,2.99,88.87,null,null],["2019-04-10",59.15,59.6,57.82,60.68,671128830,-3.46,89.08,null,null],["2019-04-11",59.25,56.45,56.13,60.3,639079631,30.45,23.58,null,null],["2019-04-12",55.99,59.04,55.65,59.21,613034755,-2.26,11.2,-1,654.16],["2019-04-15",59.9,58.57,58.05,60.5,533765305,9.31,-0.48,null,null],["2019-04-16",58.02,58.74,57.12,59.28,379525837,3.41,1.17,null,null],["2019-04-17",58.29,59.9,57.3,60.37,518701110,7.69,15.63,null,null],["2019-04-18",59.57,62.26,59.03,63.48,710922194,7.1,45.96,null,null],["2019-04-19",61.91,61.8,60.56,62.6,427526306,5,51.8,-82.4,644.34],["2019-04-22",61.8,60.1,60.1,63.24,0,-0.85,51.04,null,null],["2019-04-23",60.37,60.09,58.88,62.2,598185106,0.53,57.15,null,null],["2019-04-24",60.39,59.3,57.71,60.7,476211398,8.21,30.44,null,null],["2019-04-25",59.12,58.71,58.5,60.97,431711811,-7.11,12.36,null,null],["2019-04-26",58.1,58.19,57.41,59.89,466239073,34.39,-11.37,9.35,912.36],["2019-04-29",55,55.66,52.77,56.99,1196849538,-8.59,-39.28,null,null],["2019-04-30",55.7,58,55.01,59.5,656310216,1,-67.03,2.64,468.82],["2019-05-06",56,52.91,52.2,56.6,538101368,4,-130.6,null,null],["2019-05-07",52.9,54.49,52.89,55.77,392154601,2,-111.43,null,null],["2019-05-08",53.45,55.7,53.25,57.45,430129161,-18.16,-136,null,null],["2019-05-09",55,53.9,52.91,55.99,539134949,-12.03,-160.85,null,null],["2019-05-10",54.66,57.1,54.02,57.1,459294401,3.51,-135.35,3.45,410.1],["2019-05-13",56.22,56.25,55.1,57.59,418734185,-14.72,-119.3,null,null],["2019-05-14",55.5,56.15,55.5,57.47,296501234,-12.04,-57.93,null,null],["2019-05-15",56.71,57.86,55.9,58.7,595904097,30.2,-22.58,null,null],["2019-05-16",57.44,59.27,57.02,59.8,505803344,-17.6,27.18,null,null],["2019-05-17",59.25,57.69,57.5,59.88,387471182,25.08,54.75,10.05,465.88],["2019-05-20",57.26,55.44,54.8,57.69,382016958,-5.83,13.42,null,null],["2019-05-21",56.15,56.3,55,56.97,257882594,3,18.69,null,null],["2019-05-22",56.01,55.3,54.6,56.24,287602879,-7.7,0.95,null,null],["2019-05-23",54.73,52.91,52.05,55,541329347,-50.69,-40.12,null,null],["2019-05-24",53,54.17,52.82,54.9,358902780,-22.27,-47.93,-50.49,305.17],["2019-05-27",41.59,41.95,40.58,42.68,310336260,2,-50.7,null,null],["2019-05-28",41.95,42.25,41.3,43.21,380221249,2.6,-71.41,null,null],["2019-05-29",41.71,42,41.6,42.71,0,2,-44.69,null,null],["2019-05-30",41.98,41.28,40.65,42.47,273184346,-7.31,-78.59,null,null],["2019-05-31",41.26,41.2,40.6,41.87,211770195,-3.92,-103.13,29.87,105.1]]}';
var cdata = JSON.parse(str);
var data = splitData(cdata.data);
var code = cdata.stockcode;
var stockname = cdata.name;
//console.log(cdata);
var option = {
tooltip: { //弹框指示器
trigger: 'axis',
alwaysShowContent: true,
axisPointer: {
type: 'cross'
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
formatter: function (param) {
var params = param[0];
$date = params.name;
$today = data.datas[params.dataIndex];
// $today = params.data;
$yestoday = data.datas[params.dataIndex-1];
//console.log(params.dataIndex);
//console.log(data.datas[params.dataIndex-1][1]); // 昨天收盘价
//console.log(data.datas[params.dataIndex]);
//console.log(params.data);
//console.log(666);
if ($date) {
return [
'日期: ' + $date + '<hr size=1 style="margin: 3px 0">',
'开盘: ' + $today[0] + '<br/>',
'收盘: ' + $today[1] + '<br/>',
'最低: ' + $today[2] + '<br/>',
'最高: ' + $today[3] + '<br/>',
'涨幅: ' + (($today[1] - $yestoday[1])/$yestoday[1]*100).toFixed(2) + '%<br/>'+ '<hr size=1 style="margin: 3px 0">',
'MACD1: ' + $today[5] + ($today[5]>$yestoday[5]?'↑':'↓')+'<br/>',
'MACD2: ' + $today[6] + ($today[6]>$yestoday[6]?'↑':'↓')+'<br/>',
].join('');
}else{
//return
}
},
},
legend: { //图例控件,点击图例控制哪些系列不显示
icon: 'rect',
type:'scroll',
itemWidth: 14,
itemHeight: 2,
left: 0,
top: '-1%',
animation:true,
textStyle: {
fontSize: 12,
color: '#0e99e2'
},
pageIconColor:'#0e99e2'
},
axisPointer: {
//show: true,
link: {xAxisIndex: 'all'},
//label: {
// backgroundColor: '#777'
//}
},
color: [ma5Color, ma10Color, ma20Color, ma30Color],
grid: [{
id: 'gd1',
left: '0%',
right: '1%',
height: '42%', //主K线的高度,
top: '5%'
}, {
left: '0%',
right: '1%',
top: '43%',
height: '7%' //交易量图的高度
}, {
left: '0%',
right: '1%',
top: '42%', //MACD 指标
height: '12%'
}, {
left: '0%',
right: '1%',
top: '54%', //MACD2 指标
height: '30%'
}, {
left: '0%',
right: '1%',
top: '74%', //MACD3 指标
height: '20%'
}],
xAxis: [ //==== x轴
{ //主图
type: 'category',
data: data.times,
scale: true,
axisLine: {
onZero: false
},
axisPointer: {
z: 100,
label: {
show: false
}
},
axisLabel: { //label文字设置
show: false
},
splitLine: {
show: false,
lineStyle: {
color: '#3a3a3e'
}
},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}, { //交易量图
type: 'category',
gridIndex: 1,
data: data.times,
axisLabel: { //label文字设置
color: '#9b9da9',
fontSize: 10,
show: false
},
axisPointer: {
label: {
show: false
}
}
}, { //幅图
type: 'category',
gridIndex: 2,
data: data.times,
axisLabel: {
show: false
},
axisPointer: {
label: {
show: false
}
}
}, { //庄家散户
type: 'category',
gridIndex: 3,
data: data.times,
triggerEvent : false,
triggerTooltip: false,
axisPointer: {
label: {
show: false
}
},
axisLabel: {
show: false
}
}, { //庄家散户长线
type: 'category',
gridIndex: 4,
triggerTooltip: false,
data: data.times,
axisLabel: {
show: false
},
}
],
yAxis: [ //y轴
{ //==主图
scale: true,
z:4,
axisLabel: { //label文字设置
color: '#c7c7c7',
inside: true, //label文字朝内对齐
},
splitLine: { //分割线设置
show: false,
lineStyle: {
color: '#181a23'
}
},
}, { //交易图
gridIndex: 1, splitNumber: 3, z:4,
axisLine: {
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: { //label文字设置
color: '#c7c7c7',
inside: true, //label文字朝内对齐
fontSize: 8
},
}, { //幅图
z:4, gridIndex: 2,splitNumber: 4,
axisLine: {
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: { //label文字设置
color: '#c7c7c7',
inside: true, //label文字朝内对齐
fontSize: 8
},
}, { //幅图
z:4, gridIndex: 3,splitNumber: 4,
axisLine: {
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: { //label文字设置
color: '#c7c7c7',
inside: true, //label文字朝内对齐
fontSize: 8
},
}, { //幅图
z:4, gridIndex: 4,splitNumber: 4,
axisLine: {
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: { //label文字设置
color: '#c7c7c7',
inside: true, //label文字朝内对齐
fontSize: 8
},
}
],
dataZoom: [{
type: 'slider',
xAxisIndex: [0, 1, 2, 3, 4], //控件联动
start: 0,
end: 100,
throttle: 10,
top: '94%',
height: '6%',
borderColor: '#696969',
textStyle: {
color: '#dcdcdc'
},
handleSize: '90%', //滑块图标
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
dataBackground: {
lineStyle: {
color: '#fff'
}, //数据边界线样式
areaStyle: {
color: '#000000'
} //数据域填充样式
}
},
{
type: 'inside',
xAxisIndex: [0, 1, 2, 3, 4],//控件联动
},
],
visualMap: [
{
show: false,
seriesIndex: 6,
dimension: 0,
pieces: [
// {
// lte: 0,
// color: 'green'
// }, {
// gt: 1,
// color: 'red'
// }
], //pieces的值由动态数据决定
outOfRange: {
color: 'green'
},
},
{
show: false,
seriesIndex: 7,
dimension: 0,
pieces: [], //pieces的值由动态数据决定
outOfRange: {
color: 'green'
},
},
],
animation: false, //禁止动画效果
backgroundColor: bgColor,
blendMode: 'source-over',
series: [{
name: code+ stockname +'日K线',
type: 'candlestick',
data: data.datas,
barWidth: '55%',
large: true,
largeThreshold: 100,
itemStyle: {
normal: {
color: upColor, //fd2e2e ff4242
color0: downColor,
borderColor: upColor,
borderColor0: downColor,
//opacity:0.8
}
},
}, {
name: 'MA5',
type: 'line',
data: calculateMA(5,data),
smooth: true,
symbol: "none", //隐藏选中时有小圆点
lineStyle: {
normal: {
opacity: 0.8,
color: '#39afe6',
width: 1
}
},
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10,data),
smooth: true,
symbol: "none",
lineStyle: { //标线的样式
normal: {
opacity: 0.8,
color: '#da6ee8',
width: 1
}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20,data),
smooth: true,
symbol: "none",
lineStyle: {
opacity: 0.8,
width: 1,
color: ma20Color
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30,data),
smooth: true,
symbol: "none",
lineStyle: {
normal: {
opacity: 0.8,
width: 1,
color: ma30Color
}
}
},
{
name: 'Volumn',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data.vols,
barWidth: '60%',
itemStyle: {
normal: {
color: function(params) {
var colorList;
if (data.datas[params.dataIndex][1] > data.datas[params.dataIndex][0]) {
colorList = upColor;
} else {
colorList = downColor;
}
return colorList;
},
}
}
},
{
name: 'macd1',
type: 'line',
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: data.zj,
connectNulls: true,
// itemStyle: {
// normal: {
// color: function(params) {
// var colorList;
// if (params.dataIndex>1 && data.zj[params.dataIndex][1] > data.zj[params.dataIndex-1][1]) {
// colorList = upColor;
// } else {
// colorList = downColor;
// }
// return colorList;
// },
// }
// },
lineStyle: {
normal: {
//color: '#FF0000',
width: 1
}
},
}, {
name: 'macd2',
type: 'line',
symbol: "none",
//smooth:0, //关键点，为true时不支持虚线，实线就用true
xAxisIndex: 3,
yAxisIndex: 3,
data: data.sh,
lineStyle: {
normal: {
opacity: 1,
//color: '#39afe6',
width: 1,
type: 'dotted' // 这个是虚线 dashed， dotted更密集
}
},
},
{
name: '0',
type: 'line',
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: data.lz,
lineStyle: {
normal: {
opacity: 0.8,
color: '#0000e6',
width: 1
}
}
},
]
};
//console.log(option.visualMap[0].pieces);
//console.log(option.series[9].data);
//console.log(data);
// 设置macd折线涨就红色，跌就绿色
var mydata = data.zj;
var piecesn = 0;
var j = 0;
for(let i = 1; i < mydata.length; i++) {
//console.log(i);
if(mydata[i][2] == 1) {
option.visualMap[piecesn].pieces[j] = {gt:i-1,lte:i,color:'red'};
j++;
}
}
// 设置macd折线涨就红色，跌就绿色
var mydata = data.sh;
var piecesn = 1;
var j = 0;
for(let i = 1; i < mydata.length; i++) {
//console.log(i);
if(mydata.indexOf(i) && mydata[i] >= mydata[i-1]) {
option.visualMap[piecesn].pieces[j] = {gt:i-1,lte:i,color:'red'};
j++;
}
}
return option;
}
/**
* 15:20 时:分 格式时间增加num分钟
* @param {Object} time 起始时间
* @param {Object} num
*/
function addTimeStr(time,num){
var hour=time.split(':')[0];
var mins=Number(time.split(':')[1]);
var mins_un=parseInt((mins+num)/60);
var hour_un=parseInt((Number(hour)+mins_un)/24);
if(mins_un>0){
if(hour_un>0){
var tmpVal=((Number(hour)+mins_un)%24)+"";
hour=tmpVal.length>1? tmpVal:'0'+tmpVal;//判断是否是一位
}else{
var tmpVal=Number(hour)+mins_un+"";
hour=tmpVal.length>1? tmpVal:'0'+tmpVal;
}
var tmpMinsVal=((mins+num)%60)+"";
mins=tmpMinsVal.length>1? tmpMinsVal:0+tmpMinsVal;//分钟数为 取余60的数
}else{
var tmpMinsVal=mins+num+"";
mins=tmpMinsVal.length>1? tmpMinsVal:'0'+tmpMinsVal;//不大于整除60
}
return hour+":"+mins;
}
//获取增加指定分钟数的 数组 如 09:30增加2分钟 结果为 ['09:31','09:32']
function getNextTime(startTime, endTIme, offset, resultArr) {
var result = addTimeStr(startTime, offset);
resultArr.push(result);
if (result == endTIme) {
return resultArr;
} else {
return getNextTime(result, endTIme, offset, resultArr);
}
}
/**
* 不同类型的股票的交易时间会不同
* @param {Object} type hs=沪深 us=美股 hk=港股
*/
var time_arr = function(type) {
if(type.indexOf('us')!=-1){//生成美股时间段
var timeArr = new Array();
timeArr.push('09:30')
return getNextTime('09:30', '16:00', 1, timeArr);
}
if(type.indexOf('hs')!=-1){//生成沪深时间段
var timeArr = new Array();
timeArr.push('09:30');
timeArr.concat(getNextTime('09:30', '11:29', 1, timeArr));
timeArr.push('13:00');
timeArr.concat(getNextTime('13:00', '15:00', 1, timeArr));
return timeArr;
}
if(type.indexOf('hk')!=-1){//生成港股时间段
var timeArr = new Array();
timeArr.push('09:30');
timeArr.concat(getNextTime('09:30', '11:59', 1, timeArr));
timeArr.push('13:00');
timeArr.concat(getNextTime('13:00', '16:00', 1, timeArr));
return timeArr;
}
}
var get_m_data = function(m_data,type) {
var priceArr = new Array();
var avgPrice = new Array();
var vol = new Array();
var times = time_arr(type);
$.each(m_data.data, function(i, v) {
priceArr.push(v[1]);
avgPrice.push(v[2]);
vol.push(v[3]);
})
return {
priceArr: priceArr,
avgPrice: avgPrice,
vol: vol,
times: times
}
}
/**
* 计算价格涨跌幅百分比
* @param {Object} price 当前价
* @param {Object} yclose 昨收价
*/
function ratioCalculate(price,yclose){
return ((price-yclose)/yclose*100).toFixed(3);
}
//数组处理
function splitData(rawData) {
var datas = []; var times = [];var vols = [];
var zj = [];var sh = [];var lz = [];var zjw = [];var shw = [];var lzw = [];
for (var i = 0; i < rawData.length; i++) {
datas.push(rawData[i]);
times.push(rawData[i].splice(0, 1)[0]);
vols.push(rawData[i][4]);
zj.push([i,rawData[i][5],((i>0 && rawData[i][5]>rawData[i-1][5])?1:-1)]);
sh.push(rawData[i][6]);
lz.push(0);
}
return {datas:datas,times:times,vols:vols,zj:zj,sh:sh,lz:lz,zjw:zjw,shw:shw,lzw:lzw};
}
//================================MA计算公式
function calculateMA(dayCount,data) {
var result = [];
for (var i = 0, len = data.times.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data.datas[i - j][1];
}
result.push((sum / dayCount).toFixed(2));
}
return result;
}