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. 洛谷 P4114 Qtree1

    Qtree系列都跟树有着莫大的联系,这道题当然也不例外 我是题面 读完题,我们大概就知道了,这道题非常简单,可以说是模板题.树剖+线段树轻松解决 直接看代码吧 #include<algorith ...

  2. OSPF虚连接简单配置

    实验实例:<华为路由器学习指南>P715 本实例的拓扑结构如图:Area 2没有直接与骨干区域直接相连,Area 1被用作传输区域来连接Area 0与Area2.为了使Area2与骨干区域 ...

  3. HTTP摘要认证原理以及HttpClient4.3实现

    基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种HTTP认证协议,它试图修 ...

  4. 利用MailSniper越权访问Exchange邮箱

    0x01 概述 Microsoft Exchange用户可以授权给其他用户对其邮箱文件夹进行各种级别的访问.例如,用户可以授予其他用户读取访问其收件箱中里面的电子邮件,但是要是用户(或Exchange ...

  5. linux下shell显示-bash-3.2$ 不显示路径解决方法

       linux操作下脚本不小心误删了很多东西,变成了下面的样子 在linux shell中不显示路径了,用起来很不方便. 如何改为显示路径的shell呢 步骤如下: vi ~/.bash_profi ...

  6. “Spring.Context.Support.ContextRegistry”的类型初始值设定项引发异常。-解决方法

    注释掉web/app.config中的:

  7. Spring MVC @RequestParam

    案例来说明 @RequestMapping("user/add") public String add(@RequestParam("name") String ...

  8. mysql 如何解决字段不区分大小写的问题

    当我们输入不管大小写都能查询到数据,例如:输入 aaa 或者aaA ,AAA都能查询同样的结果,说明查询条件对大小写不敏感. 解决方案一: 于是怀疑Mysql的问题.做个实验:直接使用客户端用sql查 ...

  9. 装饰器--decorator3

    装饰器添加返回值 import time def timer(func): def wrapper(*args,**kwargs): #wrapper包装的意思 start_time = time.t ...

  10. Java常量池详解之Integer缓存

    一个Java question,求输出结果   public class IntegerTest { public static void main(String[] args) { objPoolT ...