You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
767 lines
16 KiB
767 lines
16 KiB
(function(owner) { |
|
owner.langues = { |
|
zh_CN: { |
|
date: '时间', |
|
open: '开', |
|
close: '收', |
|
lowest: '低', |
|
highest: '高', |
|
changeAmount: '涨跌额', |
|
change: '涨跌幅', |
|
volume: '成交量', |
|
amount: '成交价' |
|
}, |
|
zh_HK: { |
|
date: '時間', |
|
open: '開', |
|
close: '收', |
|
lowest: '低', |
|
highest: '高', |
|
changeAmount: '漲跌額', |
|
change: '漲跌幅', |
|
volume: '成交量', |
|
amount: '成交價' |
|
}, |
|
en_US: { |
|
date: 'Date', |
|
open: 'Open', |
|
close: 'Close', |
|
lowest: 'Lowest', |
|
highest: 'Highest', |
|
changeAmount: 'CA', |
|
change: 'Change', |
|
volume: 'Volume', |
|
amount: 'Amount' |
|
} |
|
}; |
|
owner.langue = owner.langues[app.getLanguageLocalStorage()]; |
|
owner.getKOption = function(data, chartType) { |
|
var lastIndex = data.categoryData.length - 1; |
|
var volume = data.volumes[lastIndex]; |
|
var calculateMA5 = owner.calculateMA(5, data); |
|
var calculateMA10 = owner.calculateMA(10, data); |
|
var calculateMA20 = owner.calculateMA(20, data); |
|
var calculateMA30 = owner.calculateMA(30, data); |
|
document.getElementById(chartType + '-chart-MA5').innerHTML = 'MA5:' + calculateMA5[lastIndex]; |
|
document.getElementById(chartType + '-chart-MA10').innerHTML = 'MA10:' + calculateMA10[lastIndex]; |
|
document.getElementById(chartType + '-chart-MA20').innerHTML = 'MA20:' + calculateMA20[lastIndex]; |
|
document.getElementById(chartType + '-chart-MA30').innerHTML = 'MA30:' + calculateMA30[lastIndex]; |
|
var upColor = '#4CD49B'; |
|
var downColor = '#FD595D'; |
|
var splitLineColor = '#999999'; |
|
var backgroupColor = '#FFFFFF'; |
|
var tooltipColor = '#666666'; |
|
var labelColor = '#376691'; |
|
var fontSize = 10; |
|
var borderColor = '#F1F1F1'; |
|
var axisPointerColor = '#999999'; |
|
var barWidth = '80%'; |
|
var dataZoomStart = 96; |
|
if(lastIndex < 50) { |
|
dataZoomStart = 20; |
|
} else if(lastIndex < 100) { |
|
dataZoomStart = 50; |
|
} else if(lastIndex < 200) { |
|
dataZoomStart = 75; |
|
} else if(lastIndex < 300) { |
|
dataZoomStart = 85; |
|
} else if(lastIndex < 400) { |
|
dataZoomStart = 88; |
|
} else if(lastIndex < 500) { |
|
dataZoomStart = 90; |
|
} else if(lastIndex < 600) { |
|
dataZoomStart = 92; |
|
} else if(lastIndex < 700) { |
|
dataZoomStart = 94; |
|
} else if(lastIndex < 900) { |
|
dataZoomStart = 95; |
|
} |
|
return { |
|
backgroundColor: backgroupColor, |
|
animation: false, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'cross' |
|
}, |
|
backgroundColor: '#FFFFFF', |
|
borderWidth: 1, |
|
borderColor: borderColor, |
|
padding: 10, |
|
textStyle: { |
|
color: tooltipColor, |
|
fontSize: fontSize |
|
}, |
|
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(params) { |
|
var index = 0; |
|
var barIndex = 5; |
|
if(params[index].componentSubType == "bar") { |
|
index = 1; |
|
barIndex = 0; |
|
} |
|
var open = params[index].data[1]; |
|
var close = params[index].data[2]; |
|
var subCount = close - open; |
|
var percent = (subCount * 100 / open).toFixed(2); |
|
var percentColor = upColor; |
|
if(subCount < 0) { |
|
percentColor = downColor; |
|
} |
|
subCount = app.formatValue(subCount); |
|
document.getElementById(chartType + '-chart-MA5').innerHTML = 'MA5:' + app.formatValue(params[index + 1].data); |
|
document.getElementById(chartType + '-chart-MA10').innerHTML = 'MA10:' + app.formatValue(params[index + 2].data); |
|
document.getElementById(chartType + '-chart-MA20').innerHTML = 'MA20:' + app.formatValue(params[index + 3].data); |
|
document.getElementById(chartType + '-chart-MA30').innerHTML = 'MA30:' + app.formatValue(params[index + 4].data); |
|
return '<div><span>'+owner.langue.date+'</span><span style="float:right;"> ' + params[index].axisValue + '</span></div>' + |
|
'<div><span>'+owner.langue.open+'</span><span style="float:right;"> ' + app.formatValue(params[index].data[1]) + '</span></div>' + |
|
'<div><span>'+owner.langue.highest+'</span><span style="float:right;"> ' + app.formatValue(params[index].data[4]) + '</span></div>' + |
|
'<div><span>'+owner.langue.lowest+'</span><span style="float:right;"> ' + app.formatValue(params[index].data[3]) + '</span></div>' + |
|
'<div><span>'+owner.langue.close+'</span><span style="float:right;"> ' + app.formatValue(params[index].data[2]) + '</span></div>' + |
|
'<div><span>'+owner.langue.changeAmount+'</span><span style="float:right;color:' + percentColor + ';"> ' + subCount + '</span></div>' + |
|
'<div><span>'+owner.langue.change+'</span><span style="float:right;color:' + percentColor + ';"> ' + percent + '%</span></div>' + |
|
'<div><span>'+owner.langue.volume+'</span><span style="float:right;"> ' + app.formatValue(params[index].data[5]) + '</span></div>'; |
|
} |
|
}, |
|
axisPointer: { |
|
link: { |
|
xAxisIndex: 'all' |
|
}, |
|
label: { |
|
color: axisPointerColor, |
|
backgroundColor: backgroupColor, |
|
borderWidth: 1, |
|
borderColor: axisPointerColor, |
|
shadowBlur: 0, |
|
fontSize: fontSize |
|
} |
|
}, |
|
visualMap: { |
|
show: false, |
|
seriesIndex: 5, |
|
dimension: 2, |
|
pieces: [{ |
|
value: 1, |
|
color: downColor |
|
}, { |
|
value: -1, |
|
color: upColor |
|
}] |
|
}, |
|
grid: [{ |
|
left: '10px', |
|
right: '10px', |
|
top: '30px', |
|
height: '240px' |
|
}, |
|
{ |
|
left: '10px', |
|
right: '10px', |
|
top: '270px', |
|
height: '60px' |
|
} |
|
], |
|
xAxis: [{ |
|
type: 'category', |
|
data: data.categoryData, |
|
scale: true, |
|
boundaryGap: false, |
|
min: 'dataMin', |
|
max: 'dataMax', |
|
axisPointer: { |
|
color: 'rgba(255,255,255,0.3)', |
|
type: 'shadow', |
|
z: 100, |
|
shadowStyle: { |
|
opacity: 0.5 |
|
}, |
|
label: { |
|
show: false |
|
} |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
//轴线 |
|
axisLine: { |
|
lineStyle: { |
|
width: 0 |
|
} |
|
}, |
|
//坐标刻度 |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
show: false, |
|
color: splitLineColor |
|
} |
|
}, |
|
{ |
|
type: 'category', |
|
gridIndex: 1, |
|
data: data.categoryData, |
|
scale: true, |
|
boundaryGap: false, |
|
axisLine: { |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: labelColor, |
|
fontSize: fontSize |
|
}, |
|
splitNumber: 20, |
|
min: 'dataMin', |
|
max: 'dataMax', |
|
axisPointer: { |
|
color: 'rgba(255,255,255,0.3)', |
|
type: 'shadow', |
|
z: 100, |
|
shadowStyle: { |
|
opacity: 0.5 |
|
} |
|
} |
|
} |
|
], |
|
yAxis: [{ |
|
scale: true, |
|
gridIndex: 0, |
|
splitNumber: 4, |
|
position: 'right', |
|
axisLine: { |
|
show: false, |
|
onZero: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//坐标文字 |
|
axisLabel: { |
|
margin: 0, |
|
color: '#376691', |
|
align: 'right', |
|
verticalAlign: 'bottom', |
|
fontSize: fontSize |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisPointer: { |
|
show: false, |
|
type: 'line', |
|
z: 110, |
|
lineStyle: { |
|
color: axisPointerColor, |
|
type: 'solid' |
|
} |
|
} |
|
}, |
|
{ |
|
scale: true, |
|
gridIndex: 1, |
|
interval: 1, |
|
axisLabel: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisPointer: { |
|
show: false, |
|
type: 'line', |
|
z: 110, |
|
lineStyle: { |
|
color: axisPointerColor, |
|
type: 'solid' |
|
} |
|
} |
|
} |
|
], |
|
dataZoom: [{ |
|
type: 'inside', |
|
xAxisIndex: [0, 1], |
|
start: dataZoomStart, |
|
end: 100 |
|
}], |
|
series: [{ |
|
name: 'Dow-Jones index', |
|
type: 'candlestick', |
|
data: data.values, |
|
barWidth: barWidth, |
|
itemStyle: { |
|
normal: { |
|
color: upColor, |
|
color0: downColor, |
|
borderColor: upColor, |
|
borderColor0: downColor |
|
} |
|
}, |
|
}, |
|
{ |
|
name: 'MA5', |
|
type: 'line', |
|
symbol: 'none', |
|
data: owner.calculateMA(5, data), |
|
smooth: true, |
|
lineStyle: { |
|
color: '#8B7500', |
|
width: 1 |
|
} |
|
}, |
|
{ |
|
name: 'MA10', |
|
type: 'line', |
|
symbol: 'none', |
|
data: owner.calculateMA(10, data), |
|
smooth: true, |
|
lineStyle: { |
|
color: '#4CD49B', |
|
width: 1 |
|
} |
|
}, |
|
{ |
|
name: 'MA20', |
|
type: 'line', |
|
symbol: 'none', |
|
data: owner.calculateMA(20, data), |
|
smooth: true, |
|
lineStyle: { |
|
color: '#DD5F9E', |
|
width: 1 |
|
} |
|
}, |
|
{ |
|
name: 'MA30', |
|
type: 'line', |
|
symbol: 'none', |
|
data: owner.calculateMA(30, data), |
|
smooth: true, |
|
lineStyle: { |
|
normal: { |
|
color: '#9751DC', |
|
width: 1 |
|
} |
|
} |
|
}, |
|
{ |
|
name: '成交量', |
|
type: 'bar', |
|
xAxisIndex: 1, |
|
yAxisIndex: 1, |
|
barWidth: barWidth, |
|
data: data.volumes |
|
} |
|
] |
|
}; |
|
} |
|
owner.getTOption = function(data) { |
|
var lastIndex = data.values.length - 1; |
|
var splitLineColor = '#999999'; |
|
var backgroupColor = '#FFFFFF'; |
|
var tooltipColor = '#666666'; |
|
var labelColor = '#376691'; |
|
var fontSize = 10; |
|
var borderColor = '#F1F1F1'; |
|
var axisPointerColor = '#999999'; |
|
var lineColor = '#478DF8'; |
|
var barColor = '#87CEFF'; |
|
var barWidth = '60%'; |
|
var dataZoomStart = 92; |
|
if(lastIndex < 50) { |
|
dataZoomStart = 10; |
|
} else if(lastIndex < 100) { |
|
dataZoomStart = 30; |
|
} else if(lastIndex < 200) { |
|
dataZoomStart = 60; |
|
} else if(lastIndex < 300) { |
|
dataZoomStart = 75; |
|
} else if(lastIndex < 400) { |
|
dataZoomStart = 80; |
|
} else if(lastIndex < 500) { |
|
dataZoomStart = 85; |
|
} else if(lastIndex < 600) { |
|
dataZoomStart = 88; |
|
} else if(lastIndex < 700) { |
|
dataZoomStart = 90; |
|
} |
|
return { |
|
backgroundColor: backgroupColor, |
|
animation: false, |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'cross' |
|
}, |
|
backgroundColor: '#EEEEEE', |
|
borderWidth: 1, |
|
borderColor: borderColor, |
|
padding: 10, |
|
confine: true, |
|
textStyle: { |
|
color: tooltipColor, |
|
fontSize: fontSize |
|
}, |
|
position: function(pos, params, el, elRect, size) { |
|
var obj = { |
|
top: 50 |
|
}; |
|
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; |
|
return obj; |
|
}, |
|
formatter: function(params) { |
|
var index = 0; |
|
var barIndex = 1; |
|
if(params[index].componentSubType == "bar") { |
|
index = 1; |
|
barIndex = 0; |
|
} |
|
return '<div><span>'+owner.langue.date+'</span><span style="float:right;"> ' + params[index].axisValue + '</span></div>' + |
|
'<div><span>'+owner.langue.amount+'</span><span style="float:right;"> ' + app.formatValue(params[index].data) + '</span></div>' + |
|
'<div><span>'+owner.langue.volume+'</span><span style="float:right;"> ' + app.formatValue(params[barIndex].data) + '</span></div>'; |
|
} |
|
}, |
|
axisPointer: { |
|
link: { |
|
xAxisIndex: 'all' |
|
}, |
|
label: { |
|
color: axisPointerColor, |
|
backgroundColor: backgroupColor, |
|
borderWidth: 1, |
|
borderColor: axisPointerColor, |
|
shadowBlur: 0, |
|
fontSize: fontSize |
|
} |
|
}, |
|
grid: [{ |
|
left: '10px', |
|
right: '10px', |
|
top: '30px', |
|
height: '240px' |
|
}, |
|
{ |
|
left: '10px', |
|
right: '10px', |
|
top: '270px', |
|
height: '60px' |
|
} |
|
], |
|
xAxis: [{ |
|
type: 'category', |
|
data: data.categoryData, |
|
scale: true, |
|
boundaryGap: false, |
|
min: 'dataMin', |
|
max: 'dataMax', |
|
axisPointer: { |
|
color: 'rgba(255,255,255,0.3)', |
|
type: 'shadow', |
|
z: 100, |
|
shadowStyle: { |
|
opacity: 0.5 |
|
}, |
|
label: { |
|
show: false |
|
} |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
//轴线 |
|
axisLine: { |
|
lineStyle: { |
|
width: 0 |
|
} |
|
}, |
|
//坐标刻度 |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
show: false, |
|
color: labelColor |
|
} |
|
}, |
|
{ |
|
type: 'category', |
|
gridIndex: 1, |
|
data: data.categoryData, |
|
scale: true, |
|
boundaryGap: false, |
|
axisLine: { |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: labelColor, |
|
fontSize: fontSize |
|
}, |
|
min: 'dataMin', |
|
max: 'dataMax', |
|
axisPointer: { |
|
color: '#EEEEEE', |
|
type: 'shadow', |
|
z: 100, |
|
shadowStyle: { |
|
opacity: 0.5 |
|
} |
|
} |
|
} |
|
], |
|
yAxis: [{ |
|
scale: true, |
|
gridIndex: 0, |
|
splitNumber: 4, |
|
position: 'right', |
|
axisLine: { |
|
show: false, |
|
onZero: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//坐标文字 |
|
axisLabel: { |
|
margin: 0, |
|
color: '#999999', |
|
align: 'right', |
|
verticalAlign: 'bottom', |
|
fontSize: fontSize |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisPointer: { |
|
show: false, |
|
type: 'line', |
|
z: 110, |
|
lineStyle: { |
|
color: axisPointerColor, |
|
type: 'solid' |
|
}, |
|
label: { |
|
show: false |
|
} |
|
} |
|
}, |
|
{ |
|
scale: true, |
|
gridIndex: 1, |
|
interval: 1, |
|
axisLabel: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//分隔线 |
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisPointer: { |
|
show: false, |
|
type: 'line', |
|
z: 110, |
|
lineStyle: { |
|
color: axisPointerColor, |
|
type: 'solid' |
|
}, |
|
label: { |
|
show: false |
|
} |
|
} |
|
} |
|
], |
|
dataZoom: [{ |
|
type: 'inside', |
|
xAxisIndex: [0, 1], |
|
start: dataZoomStart, |
|
end: 100 |
|
}], |
|
series: [{ |
|
type: 'line', |
|
data: data.values, |
|
symbol: 'none', |
|
color: lineColor, |
|
width: 1, |
|
areaStyle: { |
|
opacity: 0.1 |
|
} |
|
}, |
|
{ |
|
name: '成交量', |
|
type: 'bar', |
|
color: barColor, |
|
xAxisIndex: 1, |
|
yAxisIndex: 1, |
|
barWidth: barWidth, |
|
data: data.volumes |
|
} |
|
] |
|
}; |
|
} |
|
owner.getDepthOption = function(data) { |
|
var upColor = '#4CD49B'; |
|
var downColor = '#FD595D'; |
|
var splitLineColor = '#2B5072'; |
|
var backgroupColor = '#FFFFFF'; |
|
var labelColor = '#376691'; |
|
return { |
|
backgroundColor: backgroupColor, |
|
animation: false, |
|
grid: [{ |
|
left: '10px', |
|
right: '10px', |
|
top: '30px', |
|
height: '200px' |
|
}], |
|
xAxis: { |
|
type: 'value', |
|
scale: true, |
|
boundaryGap: false, |
|
min: 'dataMin', |
|
max: 'dataMax', |
|
//分隔线 |
|
splitLine: { |
|
show: false |
|
}, |
|
//轴线 |
|
axisLine: { |
|
lineStyle: { |
|
color: splitLineColor |
|
} |
|
}, |
|
axisLabel: { |
|
show: true, |
|
interval: 3 |
|
}, |
|
axisTick: { |
|
show: false |
|
} |
|
}, |
|
yAxis: { |
|
scale: true, |
|
splitNumber: 4, |
|
position: 'right', |
|
axisLine: { |
|
show: false, |
|
onZero: false |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
//坐标文字 |
|
axisLabel: { |
|
margin: 0, |
|
color: labelColor, |
|
align: 'right', |
|
verticalAlign: 'bottom' |
|
}, |
|
splitLine: { |
|
show: false |
|
}, |
|
axisPointer: { |
|
show: false |
|
} |
|
}, |
|
series: [{ |
|
type: 'line', |
|
showSymbol: false, |
|
hoverAnimation: false, |
|
color: downColor, |
|
data: data[0], |
|
areaStyle: { |
|
opacity: 0.1 |
|
} |
|
}, |
|
{ |
|
type: 'line', |
|
showSymbol: false, |
|
hoverAnimation: false, |
|
color: upColor, |
|
data: data[1], |
|
areaStyle: { |
|
opacity: 0.1 |
|
} |
|
} |
|
] |
|
}; |
|
} |
|
owner.calculateMA = function(dayCount, data) { |
|
var result = []; |
|
for(var i = 0, len = data.values.length; i < len; i++) { |
|
if(i < dayCount) { |
|
result.push('-'); |
|
continue; |
|
} |
|
var sum = 0; |
|
for(var j = 0; j < dayCount; j++) { |
|
sum += data.values[i - j][1]; |
|
} |
|
result.push(+(sum / dayCount).toFixed(3)); |
|
} |
|
return result; |
|
} |
|
|
|
}(window.options = {})); |