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
5 years ago
|
(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: '#EEEEEE',
|
||
|
|
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 = {}));
|