1. 程式人生 > >Echarts分時圖繪製

Echarts分時圖繪製

應為公司要做一個手機端的分時圖,百度echats中只有折線圖所以這邊查看了api進行了些改造,有需要的可以私聊我。

首先可以參考echats中的折線圖demo這邊就不具體說明了

function printKtime() {
// 獲取金額陣列
var data = ktimeArray;
option = {
tooltip : {
trigger : 'axis',            
position : function(point, params, dom, rect, size) {
var pos = point[0];
// 當到最右邊時候tip框顯示在左邊
if (pos > size.viewSize[0] / 2) {
pos = pos - size.contentSize[0];
}
return [ pos, '16%' ];
},
formatter : function(param) {
param = param[0];
return [
'時間: ' + getJustMin(param.name) + '<br/>',
'金額: ' + param.value[1].toFixed(jindu) + '<br/>',
'漲跌: '
+ ((param.value[1] - lastClose) * 100 / lastClose)
.toFixed(jindu) + '%' ].join('');
}


},
grid : [ {
left : '60',
right : '50',
top:'5',
} ],
xAxis : {
type : 'time',
splitLine : {
show : false
},
position : 'bottom',
splitNumber : 5,
axisLabel : {
interval : false,
formatter : function(value, index) {
// 格式化成月/日,只在第一個刻度顯示年份
var date = new Date(value);
date = date.Format('hh:mm');
if (index > 0 && date == '23:59:59') {
date = "24:00";
}
return date;
}
}
},
yAxis : [
{
type : 'value',
position : 'left',
max : maxValue,
min : minValue,
interval : yAxisSpan,
splitLine : {
show : true
},
axisLabel : {
formatter : function(value, index) {
return value.toFixed(jindu);
},
textStyle : {
color : function(value, index) {
return getColor(value, lastClose);
}
}
}
},
{
type : 'value',
interval : yAxisSpan,
position : 'right',
max : maxValue,
min : minValue,
splitLine : {
show : false
},
axisLine : {
onZero : false
},
axisLabel : {
formatter : function(value, index) {
return ((value - lastClose) * 100 / lastClose)
.toFixed(jindu)
+ '%';
},
textStyle : {
color : function(value, index) {
return getColor(value, lastClose);
}
}
}
} ],
series : [ {
name : '模擬資料',
type : 'line',
showSymbol : false,
hoverAnimation : false,
smooth : 'spline',
itemStyle : {
normal : {
lineStyle : {
color : '#74C2D8'
}
}
},
areaStyle : {
normal : {
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
offset : 0,
color : '#74C2D8'
}, {
offset : 1,
color : '#FFFFFF'
} ])
}
},
data : data
}, {
name : '.anchor',
type : 'line',
showSymbol : false,
data : anchor,
itemStyle : {
normal : {
opacity : 0
}
},
lineStyle : {
normal : {
opacity : 0
}
}
} ]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}

}

這裡我是用websocket接收資料的,資料格式參考echarts的折線demo

demo改版已經上傳了  https://download.csdn.net/download/zhanghuaikun/10409623