动态更新echarts k线图数据 通过websocket取数据
Posted 黑黑哈哈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态更新echarts k线图数据 通过websocket取数据相关的知识，希望对你有一定的参考价值。
1.加载插件，实例化chart.
2.链接websocket
3.接收数据，处理数据，调用chart的实例,不断更新数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<p id="CommodityNo">50</p>
<script src="k/esl.js"></script>
<script>
//加载插件
var aa=require.config({
paths:{
‘echarts‘ :‘k/echarts‘,
‘echarts/chart/pie‘ :‘k/echarts‘,
}
});
function loadK(){
// 使用
require(
[
‘echarts‘,
‘echarts/chart/pie‘, // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById(‘container‘));
echarts=ec;
}
);
};
var marketSocketUrl="";//websocket地址
var marketUserName="";//websocket名字
var marketPassword="";//websocket密码
marketSocket = new WebSocket(marketSocketUrl);
var setIntvalTime = null;
marketSocket.onopen = function(evt){
masendMessage(‘Login‘,‘{"UserName":"‘+marketUserName+‘","PassWord":"‘+marketPassword+‘"}‘);
};
marketSocket.onclose = function(evt){};
marketSocket.onmessage = function(evt){
var data = evt.data;
if(method == "OnRspQryHistoryData"){
var historyParam = jsonData;
if(historyParam.Parameters==null){
return
};
processingData(data);
}
};
marketSocket.onerror = function(evt){
};
var rawData = [];
var CandlestickChartOption=null;
var CandlestickVolumeChartOption=null;
var newData=[];
function processingData(jsonData){
var parameters = jsonData.Parameters.Data;
if(jsonData == null)return;
newData=parameters.data;//处理数据，更新数据
var x=0;
if(dataPricesList.length!=0){
for(var i=0;i<dataPricesList.length;i++){
if(dataPricesList[i].id==$("#CommodityNo").text()){
x=dataPricesList[i].prices;//获取标线的价格
}
}
}
CandlestickChartOption = setOption(newData,x);
myChart.setOption(CandlestickChartOption);
myChart.resize();
}
//设置数据参数（为画图做准备）
function setOption(rawData,x){
var dates = rawData.map(function (item) {
return item[0];
});
var data = rawData.map(function (item) {
return [+item[1], +item[2], +item[5], +item[6]];
});
var option = {
backgroundColor: ‘rgba(43, 43, 43, 0)‘,
tooltip: {
trigger: ‘axis‘,
axisPointer : {
type : ‘line‘,
animation: false,
lineStyle: {
color: ‘#ffffff‘,
width: 1,
opacity: 1
}
},
formatter: function (params) {
var res = "时间:"+params[0].name;
res += ‘<br/> 开盘 : ‘ + params[0].value[0] + ‘<br/> 最高 : ‘ + params[0].value[3];
res += ‘<br/> 收盘 : ‘ + params[0].value[1] + ‘<br/> 最低 : ‘ + params[0].value[2];
return res;
}
},
grid: {
x: 43,
y:20,
x2:46,
y2:5
},
xAxis: {
type: ‘category‘,
data: dates,
show:false,
axisLine: { lineStyle: { color: ‘#8392A5‘ } }
},
yAxis: {
scale: true,
axisLine: { lineStyle: { color: ‘#8392A5‘ } },
splitLine: { show: false },
axisTick:{
show:false,
},
splitArea: {
show: false
},
axisLabel: {
inside: false,
margin: 4
},
splitLine: {
show: true,
lineStyle: {
color: "#8392A5"
}
}
},
animation: false,
series: [
{
type: ‘candlestick‘,
name: ‘‘,
data: data,
markLine: {
symbol: [‘none‘, ‘none‘],
clickable:false,
data: [
{name: ‘标线2起点‘, value: x, xAxis: "1", yAxis: x}, //持仓均线
{name: ‘标线2终点‘, xAxis: "2", yAxis: x}
]
},
itemStyle: {
normal: {
color: ‘#FD1050‘,
color0: ‘#0CF49B‘,
borderColor: ‘#FD1050‘,
borderColor0: ‘#0CF49B‘
}
}
}
]
}
return option;
};
</script>
</body>
</html>
以上是关于动态更新echarts k线图数据 通过websocket取数据的主要内容，如果未能解决你的问题，请参考以下文章