SpringBoot+webSocket+echarts K线图（自动更新）

最新推荐文章于 2024-05-09 12:30:12 发布

paj123456789

最新推荐文章于 2024-05-09 12:30:12 发布

阅读量1.2k

点赞数

分类专栏： spring boot 文章标签： java

本文链接：https://blog.csdn.net/paj123456789/article/details/117600665

版权

spring boot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、前端html代码

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
        <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

        <style type="text/css">
            .tabs {
                text-align: center;
                height: 20%;
                padding-top: 15px;
            }

            .tabs li {
                display: inline-block;
                padding: 0 0 10px 0;
            }
            a {
                text-decoration: none;
                color: #1c84c6;
            }
            .tabs li a {
                display: block;
                min-width: 70px;
                padding: 6px 12px;
                background-color: #f5f5f5;
                color: #333;
                line-height: 1.42857143;
                text-align: center;
                border: 1px solid #ddd;
                border-radius: 2px;
            }
            .tabs li.active a {
                background-color: #1c84c6;
                border-color: #1c84c6;
                color: #fff;
            }
        </style>
    </head>
    <body style="height: 100%; margin: 0">
        <div class="tabs" style="display: block;">
            <ul>
                <li onclick="changeCond(1)" value="1"><a href="javascript:;">分时</a></li>
                <li onclick="changeCond(2)" value="2"><a href="javascript:;">日K</a></li>
                <li onclick="changeCond(3)" value="3"><a href="javascript:;">周K</a></li>
                <li onclick="changeCond(4)" value="4"><a href="javascript:;">月K</a></li>
            </ul>
        </div>


        <div id="container" style="height: 80%"></div>
        <div id="container_week" style="height: 80%;display: none"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
        <script src="js/jquery-2.1.1.js"></script>
        <script src="js/candlestick-sh.js"></script>

    </body>
</html>

2、js代码

/**
 * 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. 定义url
    var 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");

}

3、java代码

@Scheduled(fixedRate = 10000)
public void sendQueueMessage() {
    System.out.println("定时广播推送！");
    ChatMessage chatMessage =new ChatMessage();
    chatMessage.setType(ChatMessage.MessageType.ECHARTS);
    chatMessage.setMap(this.getMap());
    //chatService.sendToUser(chatMessage);
    redisTemplate.convertAndSend(msgToAll, JsonUtil.parseObjToJson(chatMessage));
}


private Map<String,Object> getMap(){
    Map<String,Object> map= new HashMap<>();
    map.put("1",getData(500,DateUtil.getCurrentDateStr()));
    map.put("2",getData(20000,DateUtil.getCurrentDateStr()));
    map.put("3",getData(50000,DateUtil.getFriday()));
    map.put("4",getData(80000,DateUtil.getMonthFirstDay()));
    return map;
}

private List<Object> getData(int val,String date){
    List<Object> list = new ArrayList<>();
    list.add(date);
    list.add(getRandom(val));
    list.add(getRandom(val));
    list.add(getRandom(val));
    list.add(getRandom(val));
    List<Object> candlestickDatas = new ArrayList<>();
    candlestickDatas.add(list);
    return candlestickDatas;
}



private float getRandom(int val){
    int random=(int) (Math.random()*9000+1000);
    
    return (float)(val+random)/10;
}
@RequestMapping("/getEchartsDatas")
@ResponseBody
public String getEchartsDatas(int type) throws ParseException {
   String data=null;
   String nowDate = DateUtil.getCurrentDateStr();
   String startDate ="2020-01-01";
    if(type == 1){
    }else if(type ==2){
        data = buildData(DateUtil.getDateList(startDate,nowDate),10000);
    }else if(type ==3){
        data = buildData(DateUtil.getWeekDate("01/01/2020",DateUtil.DateToString(new Date(),DateUtil.DATE_FORMAT)),50000);
    }else if(type ==4){
        data = buildData(DateUtil.getMonthList(startDate,nowDate),80000);
    }
    return data;
}

private String buildData(List<String> dateList,int val){
    List<Object> l = null;
    List<Object> list = new ArrayList<>();
    for(String date:dateList ){
        l = new ArrayList<>();
        l.add(date);
        l.add(getRandom(val));
        l.add(getRandom(val));
        l.add(getRandom(val));
        l.add(getRandom(val));
        list.add(l);
    }
    return JSON.toJSONString(list);
}

demo链接地址：https://download.csdn.net/download/paj123456789/19405016

K线图：http://127.0.0.1:8080/candlestick-sh.html

群发和点对点发送地址：http://127.0.0.1:8080 /index.html