1.加载插件，实例化chart.2.链接websocket3.接收数据，处理数据，调用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>
时间： 2024-07-29 00:51:39