/*** Created by 42 on 2021/6/3.*/
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
var type = 2;
//建立socket链接
var socket = new SockJS('http://17.18.41.189:8080/ws');
stompClient = Stomp.over(socket);
//stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
stompClient.connect({}, onConnected, onError);function onConnected() {stompClient.subscribe('/topic/public', onMessageReceived);
}function onMessageReceived(payload) {var message = JSON.parse(payload.body);if(message.type === 'ECHARTS' && message.map) {message.candlestickDatas = message.map[type];if(message.candlestickDatas){var candlestickDatas = message.candlestickDatas[0];var dateStr =candlestickDatas.splice(0, 1);console.log(candlestickDatas+" "+dateStr)var flag =false;console.log(data0.categoryData[data0.categoryData.length-1]+" -- ")console.log(dateStr[0]+" ## "+(data0.categoryData[data0.categoryData.length-1] == dateStr[0]))if(data0.categoryData[data0.categoryData.length-1]==dateStr[0]){data0.values[data0.categoryData.length-1]=candlestickDatas;flag =true;}if(!flag){data0.categoryData.push(dateStr[0]);data0.values.push(candlestickDatas);}myChart.setOption(option);}}}function onError(error) {var log = 'Could not connect to WebSocket server. Please refresh this page to try again!';console.log(log)
}// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)var data0 = null;//splitData(rowData);
function splitData(rawData) {var categoryData = [];var values = []for (var i = 0; i < rawData.length; i++) {categoryData.push(rawData[i].splice(0, 1)[0]);values.push(rawData[i])}return {categoryData: categoryData,values: values};
}function calculateMA(dayCount) {var result = [];for (var i = 0, len = data0.values.length; i < len; i++) {if (i < dayCount) {result.push('-');continue;}var sum = 0;for (var j = 0; j < dayCount; j++) {sum += data0.values[i - j][1];}result.push(sum / dayCount);}return result;
}if (option && typeof option === 'object') {myChart.setOption(option);
}changeCond(2);function getSeriesName(type) {if(type == 1){return "分时";}else if(type == 2){return "日K";}else if(type == 3){return "周K";}else if(type == 4){return "月K";}
}
function changeCond(param) {type=param;// 1. 定义urlvar url = "http://192.168.41.189:18801/getEchartsDatas?type="+param;// 2. 请求参数// 3. 发送异步请求, 处理响应结果// 向服务器发送Get请求$.get(url, function(result) { // 用于处理结果console.log("result: "+result);data0 = splitData(result);option = {title: {text: '上证指数',left: 0},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},legend: {data: [getSeriesName(param), 'MA5', 'MA10', 'MA20', 'MA30']},grid: {left: '10%',right: '10%',bottom: '15%'},xAxis: {type: 'category',data: data0.categoryData,scale: true,boundaryGap: false,axisLine: {onZero: false},splitLine: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax'},yAxis: {scale: true,splitArea: {show: true}},dataZoom: [{type: 'inside',start: 50,end: 100},{show: true,type: 'slider',top: '90%',start: 50,end: 100}],series: [{name: getSeriesName(param),type: 'candlestick',data: data0.values,itemStyle: {color: upColor,color0: downColor,borderColor: upBorderColor,borderColor0: downBorderColor},markPoint: {label: {normal: {formatter: function (param) {return param != null ? Math.round(param.value) : '';}}},data: [{name: 'XX标点',coord: ['2013/5/31', 2300],value: 2300,itemStyle: {color: 'rgb(41,60,85)'}},{name: 'highest value',type: 'max',valueDim: 'highest'},{name: 'lowest value',type: 'min',valueDim: 'lowest'},{name: 'average value on close',type: 'average',valueDim: 'close'}],tooltip: {formatter: function (param) {return param.name + '<br>' + (param.data.coord || '');}}},markLine: {symbol: ['none', 'none'],data: [[{name: 'from lowest to highest',type: 'min',valueDim: 'lowest',symbol: 'circle',symbolSize: 10,label: {show: false},emphasis: {label: {show: false}}},{type: 'max',valueDim: 'highest',symbol: 'circle',symbolSize: 10,label: {show: false},emphasis: {label: {show: false}}}],{name: 'min line on close',type: 'min',valueDim: 'close'},{name: 'max line on close',type: 'max',valueDim: 'close'}]}},{name: 'MA5',type: 'line',data: calculateMA(5),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA10',type: 'line',data: calculateMA(10),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA20',type: 'line',data: calculateMA(20),smooth: true,lineStyle: {opacity: 0.5}},{name: 'MA30',type: 'line',data: calculateMA(30),smooth: true,lineStyle: {opacity: 0.5}},]};myChart.setOption(option);}, "json");}
|
