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取数据的更多相关文章

  1. 百度 echarts K线图使用

    看个效果图先 首先在需要插入图例的HTML中嵌入 <div id="main" style="height:400px"></div> ...

  2. 【带着canvas去流浪（5）】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  3. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  4. C#下如何用NPlot绘制期货股票K线图(2):读取数据文件让K线图自动更新

    [内容介绍]上一篇介绍了K线图的基本绘制方法,但很不完善,本篇增加了它直接读取数据的功能,这对于金融市场的数据量大且又需要动态刷新功能的实现很重要. [实现方法] 1.需要一个数据文件,这里用的是直接 ...

  5. 使用ECharts画K线图

    需引入echarts.js插件,开发环境建议选择源代码版本,该版本包含了常见的警告和错误提示.下载地址 http://echarts.baidu.com/download.html 下面是代码,注释很 ...

  6. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  7. echarts画k线图

    var charset = echarts.init(document.getElementById("k_line")) $.get(k_line.url_A).done(fun ...

  8. [python]沪深龙虎榜数据导入通达信的自选板块，并标注于K线图上

    将沪深龙虎榜数据导入通达信的自选板块,并标注于K线图上 原理:python读取前一次处理完的计算5日后涨跌幅输出的csv文件 文件名前加"[paint]" 安照通达信的画图文件和板 ...

  9. C#下如何用NPlot绘制期货股票K线图(3):设计要显示的股票价格图表窗口并定义相应类的成员及函数

    [内容简介] 上一篇介绍了要显示K线图所需要的数据结构,及要动态显示K线图,需要动态读取数据文件必需的几个功能函数.本篇介绍要显示蜡烛图所用到的窗口界面设计及对应类定义.下面分述如下: [窗口界面] ...

随机推荐

  1. 【刷题】BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  2. Zookeeper(一) zookeeper基础使用

    一.Zookeeper是什么 (安装的是3.4.7) ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现.它提供了简单原始的功能, ...

  3. bzoj3709: [PA2014]Bohater（贪心）

    贪心... 可以回血的按d[i]升序防止死掉 不能回血的按a[i]降序,因为只考虑d我们要扣除的血量是一定的,为了不死显然回血多的放前面更好 #include<iostream> #inc ...

  4. Subseq

    Portal --> broken qwq Description  给你一个长度为\(n\)的整数序列,要支持以下两个操作: \((0,i,x)\):将第\(i\)个数改成\(x\) \((1 ...

  5. hiho 1044 : 状态压缩

    #1044 : 状态压缩·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车 ...

  6. bnuoj53075 外挂使用拒绝

    题目链接:http://www.bnuoj.com/v3/problem_show.php?pid=53075 第一次给校赛出题,来为自己的题目写一发题解吧. 其实我原本的题意非常简洁: 结果被另一位 ...

  7. Nginx修改access.log日志时间格式

    一.修改原因 因为要获取nginx访问信息,作为开发的数据使用,但是nginx的access.log文件中的默认的时间格式是这样的: [02/Nov/2017:20:48:25 +0800] 而要求的 ...

  8. 「Python」人脸识别应用

    人脸识别主要步骤: face_recognition 库的安装 安装此库,首先需要安装编译dlib,此处我们偷个懒,安装软件Anaconda(大牛绕过),此软件预装了dlib. 安装好后,我们直接通过 ...

  9. Creating a Cron Job in K8S

    Creating a Cron Job Cron jobs require a config file. This example cron job config .spec file prints ...

  10. CF835 C 前缀和

    100*100规模上第一象限坐标系上有1e5规模的点,每个点随时间在同一个值域内(最大10)周期递增,但初始值不同,给出一个矩阵和时间询问此时范围内点的值的和. 预处理初始时刻不同权值下的二维前缀和, ...