var bgcolor = "#fff";//背景
var upcolor = "#ff0000";//涨颜色
var downcolor = "#008b00";//跌颜色
var labelcolor = "#666"; //文字颜色
var bordercolor = "#e7e7e7"; // 图标边框色,会影响坐标轴上悬浮框的背景色
// ma 颜色
var ma5color = "#39afe6";
var ma10color = "#da6ee8";
/**
* 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:30', 1, timearr));
timearr.push('13:00');
timearr.concat(getnexttime('13:00', '15:00', 1, timearr));
if($.inarray('13:00', timearr) == -1){//将11:30和13:00合并放置
//$.inarray(元素, 数组) == -1 表示要删除的元素不在原数组中
}else{
timearr.splice($.inarray('13:00', timearr), 1);
timearr.splice($.inarray('11:30', timearr), 1,'11:30/13:00');
}
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 vol = new array();
var times = time_arr(type);
$.each(m_data.data, function (i, v) {
pricearr.push(v[1]);
vol.push(v[2]); //目前数据没有均价,取值提前一位
})
return {
pricearr: pricearr,
vol: vol,
times: times
}
}
//分时图 option
/**
* 生成分时option
* @param {object} m_data 分时数据
* @param {object} type 股票类型 us-美股 hs-沪深 hk-港股
*/
function initmoption(m_data, type) {
var m_datas = get_m_data(m_data, type);
console.log(m_datas);
var basenumber = number(m_data.yestclose).tofixed(2)
var _minval = number(basenumber-basenumber*handle_num()-0.05).tofixed(2);
var _maxval = (number(basenumber)+basenumber*handle_num()+0.05).tofixed(2);
var _interval = math.abs(number((basenumber - _minval)/3));
function handle_num(){
var _aa = math.abs((math.max.apply(null, m_datas.pricearr)-basenumber)/basenumber).tofixed(2);
var _bb = math.abs((basenumber-math.min.apply(null, m_datas.pricearr))/basenumber).tofixed(2);
return _aa>_bb ? _aa:_bb;
}
function format_y(v) {
v = v.tofixed(2)
if (v > m_data.yestclose) {
return '{red|' + v + '}';
}else if (v == basenumber) {
return v;
}else{
return '{green|' + v + '}';
}
}
return {
tooltip: { //弹框指示器
trigger: 'axis',
backgroundcolor: "#f1f1f1",
bordercolor: "#ccc",
borderwidth: 1,
textstyle: {
color: '#333'
},
axispointer: {
type: 'cross',
label: {
show: true,
backgroundcolor: '#333'
}
},
formatter: function (params, ticket, callback) {
var i = params[0].dataindex;
var color;
if (m_datas.pricearr[i] > m_data.yestclose) {
color = 'style="color:' + upcolor + '"';
} else {
color = 'style="color:' + downcolor + '"';
}
var html = '
\
当前价 ' + m_datas.pricearr[i] + '
\
涨幅 ' + ratiocalculate(m_datas.pricearr[i], m_data.yestclose) + '%
\
成交量 ' + m_datas.vol[i] + '
';
return html;
}
},
// legend: { //图例控件,点击图例控制哪些系列不显示
// icon: 'rect',
// type: 'scroll',
// itemwidth: 14,
// itemheight: 2,
// selectedmode:false,
// left: '40%',
// top: '1%',
// textstyle: {
// fontsize: 12,
// color: labelcolor
// }
// },
color: [ma5color, ma10color],
grid: [{
show: true,
bordercolor: bordercolor,
id: 'gd1',
height: '63%', //主k线的高度,
top: '9%'
},{
show: true,
bordercolor: bordercolor,
id: 'gd2',
height: '63%', //主k线的高度,
top: '9%'
}, {
show: true,
bordercolor: bordercolor,
id: 'gd3',
top: '76%',
height: '19%' //交易量图的高度
}],
xaxis: [ //==== x轴
{ //主图
gridindex: 0,
boundarygap: false,
axistick: {
show: false
},
axisline: {
linestyle: {
color: bordercolor,
}
},
data: m_datas.times,
axislabel: { //label文字设置
show: false
},
splitline: { //分割线设置
show: true,
interval:29,
linestyle: {
type: 'dashed'
}
},
},
{
show: false,
gridindex: 1,
boundarygap: false,
data: m_datas.times,
axislabel: { //label文字设置
show: false
},
axisline: {
linestyle: {
color: bordercolor,
}
},
}, { //交易量图
splitnumber: 2,
type: 'category',
gridindex: 2,
boundarygap: false,
data: m_datas.times,
axislabel: { //label文字设置
interval:29,
color: labelcolor,
fontsize: 10
},
axistick: {
show: false
},
splitline: { //分割线设置
show: false,
linestyle: {
type: 'dashed'
}
},
axisline: {
linestyle: {
color: bordercolor,
}
}
}
],
yaxis: [ //y轴
{
type: 'value',
min: _minval,
max: _maxval,
interval: _interval,
gridindex: 0,
scale: true,
axistick: { // 分割线 短
show: false
},
axisline: {
linestyle: {
color: bordercolor,
}
},
axispointer: {
show: true,
label: {
formatter: function (params) {
return (params.value).tofixed(2);
}
}
},
axislabel: {
color:'#333',
formatter: format_y,
rich: {
red: {
color: 'red',
lineheight: 10
},
green: {
color: 'green',
lineheight: 10
}
}
},
z: 4,
splitline: { //分割线设置
show: true,
linestyle: {
type: 'dashed'
}
},
}, {
scale: true,
gridindex: 1,
min: _minval,
max: _maxval,
interval: _interval,
position: 'right',
z: 4,
axistick: {
show: false
},
axisline: {
linestyle: {
color: bordercolor,
}
},
axislabel: { //label文字设置
color: function (val) {
val = number(val).tofixed(2)
if (val == basenumber) {
return '#333'
}
return val > basenumber ? upcolor : downcolor;
},
inside: false, //label文字朝内对齐
formatter: function (val) {
var resul = ratiocalculate(val, basenumber);
return number(resul).tofixed(2) + '%'
}
},
splitline: { //分割线设置
show: false,
linestyle: {
color: '#181a23'
}
},
axispointer: {
show: true,
label: {
formatter: function (params) { //计算右边y轴对应的当前价的涨幅比例
return ratiocalculate(params.value, basenumber) + '%';
}
}
}
}, { //交易图
// name: '万',
namegap: '0',
nametextstyle: {
color: labelcolor
},
gridindex: 2,
z: 4,
splitnumber: 3,
axisline: {
onzero: false,
linestyle: {
color: bordercolor,
}
},
axistick: {
show: false
},
axispointer: {
show: false,
label: {
formatter: function (params) { //计算右边y轴对应的当前价的涨幅比例
var _p = ((params.value) / 10000).tofixed(1) + '万';
return _p
}
}
},
splitline: { //分割线设置
show: false,
},
axislabel: { //label文字设置
show:false,
color: labelcolor,
inside: false, //label文字朝内对齐
fontsize: 10,
onzero: false,
formatter: function (params) { //计算右边y轴对应的当前价的涨幅比例
var _p = (params / 10000).tofixed(1);
if (params == 0) {
_p = '(万)'
}
return _p
}
},
}
],
backgroundcolor: bgcolor,
blendmode: 'source-over',
series: [{
name: '当前价',
type: 'line',
data: m_datas.pricearr,
smooth: true,
symbol: "circle", //中时有小圆点
linestyle: {
normal: {
opacity: 0.8,
color: '#39afe6',
width: 1
}
},
areastyle: {
normal: {
color: new echarts.graphic.lineargradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.5)'
}, {
offset: 0.5,
color: 'rgba(0, 136, 212, 0.02)'
}], false),
shadowcolor: 'rgba(0, 0, 0, 0.1)',
shadowblur: 10
}
},
markline: {
name:'昨日收盘价',
symbol: ['none', 'none'],
label:{
show:false,
formatter: number(m_data.yestclose).tofixed(2),
position: 'start',
},
linestyle: {
color: '#ccc',
type: 'solid'
},
data: [{
yaxis: m_data.yestclose,
}]
}
},
{
type: 'line',
data: m_datas.pricearr,
smooth: true,
symbol: "none",
gridindex: 1,
xaxisindex: 1,
yaxisindex: 1,
linestyle: { //标线的样式
normal: {
width: 0
}
}
},
{
name: '成交量',
type: 'bar',
gridindex: 2,
xaxisindex: 2,
yaxisindex: 2,
data: m_datas.vol,
barwidth: '60%',
itemstyle: {
normal: {
color: function (params) {
var colorlist;
if (m_datas.pricearr[params.dataindex] > m_datas.pricearr[params.dataindex - 1]) {
colorlist = upcolor;
} else {
colorlist = downcolor;
}
return colorlist;
},
}
}
}
]
};
}
/**
* 计算价格涨跌幅百分比
* @param {object} price 当前价
* @param {object} yclose 昨收价
*/
function ratiocalculate(price, yclose) {
return ((price - yclose) / yclose * 100).tofixed(2);
}