1. Load the plugin and instantiate the chart.
2. Link WebSocket
3. Receive data, process data, invoke an instance of chart, and update data continuously
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<div id= "Container" ></div>
<p id= "Commodityno" >50</p>
<script src= "K/esl.js" ></script>
<script>
Loading plugins
var aa=require.config ({
paths:{
' Echarts ': ' K/echarts ',
' Echarts/chart/pie ': ' K/echarts ',
}
});
function Loadk () {
Use
Require
[
' Echarts ',
' Echarts/chart/pie ',//load bar module with histogram, load on demand
],
Function (EC) {
Initialize the Echarts chart based on the prepared DOM
MyChart = Ec.init (document.getElementById (' container '));
Echarts=ec;
}
);
};
var marketsocketurl= "";//websocket address
var marketusername= "";//websocket name
var marketpassword= "";//websocket password
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;//processing data, updating 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;//get the price of the markings
}
}
}
Candlestickchartoption = SetOption (newdata,x);
Mychart.setoption (candlestickchartoption);
Mychart.resize ();
}
Set data parameters (prepare for drawing)
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 = "Time:" +params[0].name;
Res + = ' <br/> open: ' + params[0].value[0] + ' <br/> highest: ' + params[0].value[3];
Res + = ' <br/> close: ' + params[0].value[1] + ' <br/> lowest: ' + 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: ' Marking 2 beginnings ', value:x, Xaxis: "1", yaxis:x},//Position average
{name: ' Marking 2 end point ', Xaxis: ' 2 ', yaxis:x}
]
},
ItemStyle: {
Normal: {
Color: ' #FD1050 ',
Color0: ' #0CF49B ',
BorderColor: ' #FD1050 ',
BorderColor0: ' #0CF49B '
}
}
}
]
}
return option;
};
</script>
</body>
Dynamically update Echarts K line graph data with WebSocket data