k.js
$(function(){
var myChart=echarts.init(document.getElementById('main'));
var oData='';
//三十天起始值
var start=0;
var end=30;
var newData='';
//时间戳日期转换
function getTime(time){
console.log(time);
var times ='';
var date = new Date(time);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
times=Y+M+D+h+m+s;
return times;
}
//获取数组一定的值
function getArr(arr,first,last){
console.log(last);
if(last >= arr.length){start = 0;end = 30;console.log(11111111);};
var oArr=[];
for(var i = first;i < last;i++){
oArr.push(arr[i]);
};
return oArr;
}
//数据分割函数；
function splitData(rawData) {
var categoryData = [];
var values = [];
var volumns = [];
for (var i = 0; i < rawData.length; i++) {
var orgtime= rawData[i][0];
dataTime = getTime(orgtime);
console.log("orgtime"+rawData[i])
categoryData.push(dataTime);
var value=[];
value.push(rawData[i][1],rawData[i][2],rawData[i][3],rawData[i][4]);
values.push(value);
volumns.push(rawData[i][5])
}
return {
categoryData: categoryData,
values: values,
volumns:volumns
};
};
//计算ma5 ma10 ....
function calculateMA(dayCount, data) {
oValues=getArr(data.values,start,end);
//console.log(data.values.length);
var result = [];
//console.log(data);
for (var i = start, len = oValues.length; i < (len + start); i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
var count = i - j;
//console.log(count);
count = data.values[count][1];
sum += parseFloat(count);
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
};
//返回函数
function dataBack(obj){
var obj = getArr(obj,start,end)//obj.slice(start,end);
//console.log(obj.length);
return obj;
}
$.ajax({
type:"GET",
url:"http://api.bitkk.com/data/v1/kline?market=btc_qc",
cacke:false,
async:false,
dataType:"json",
success:function (datas,textStatus,jqXHR) {
var datajson = datas['data'];
var market = datas['symbol'];
//console.log(datajson);
// console.log(typeof (datajson));
//获取前三十天数据;
data=splitData(datajson);
myChart.setOption(option = {
backgroundColor: '#eee',
animation: false,
legend: {
bottom: 10,
left: 'center',
data: [market, 'MA5', 'MA10', 'MA20', 'MA30']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
grid: [
{
left: '10%',
right: '8%',
height: '50%'
},
{
left: '10%',
right: '8%',
top: '63%',
height: '16%'
}
],
xAxis: [
{
type: 'category',
data: dataBack(data.categoryData),
scale: true,
boundaryGap : false,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
},
{
type: 'category',
gridIndex: 1,
data: dataBack(data.categoryData),
scale: true,
boundaryGap : false,
axisLine: {onZero: false},
axisTick: {show: false},
splitLine: {show: false},
axisLabel: {show: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: {show: false},
axisLine: {show: false},
axisTick: {show: false},
splitLine: {show: false}
}
],
series: [
{
name: market,
type: 'candlestick',
data: dataBack(data.values),
itemStyle: {
normal: {
borderColor: null,
borderColor0: null
}
},
tooltip: {
formatter: function (param) {
var param = param[0];
return [
'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
'开: ' + param.data[0] + '<br/>',
'高: ' + param.data[1] + '<br/>',
'低: ' + param.data[2] + '<br/>',
'收: ' + param.data[3] + '<br/>'
].join('');
}
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5, data),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10, data),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20, data),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30, data),
smooth: true,
lineStyle: {
normal: {opacity: 0.5}
}
},
{
name: '交易量',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: dataBack(data.volumns)//volumns
}
]
}, true);
setInterval(function(){
start++;
end++;
myChart.setOption({
xAxis: [
{
type: 'category',
data: dataBack(data.categoryData)//data.categoryData[start,end],
}
],
series: [
{
name: market,
data: dataBack(data.values)
},
{
name: 'MA5',
data: calculateMA(5, data)
},
{
name: 'MA10',
data: calculateMA(10, data)
},
{
name: 'MA20',
data: calculateMA(20, data)
},
{
name: 'MA30',
data: calculateMA(30, data)
},
{
name: '交易量',
data: dataBack(data.volumns)//data.volumns[start,end]
}
]
});
},5000)
//使用 option
//myChart.setOption(option);
}
});
})
k.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BTCK线图</title>
<script src="js/jQuery v3.1.1.js"></script>
<script src="js/echarts.js"></script>
<script src="js/k.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:800px;"></div>
</body>
</html>
网友评论