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. scrollTop()案例

    设置 <div> 元素中滚动条的垂直偏移: 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏 ...

  2. 【Java】JDBCUtil模板

    package jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; ...

  3. c# partial使用

    1.有2个类   class1.cs  ,class2.cs 2.这2个类里面都可以定义成这样 public partial class ClassAll { } 3.结果,里面的方法都是共享的,就像 ...

  4. 【刷题】BZOJ 1195 [HNOI2006]最短母串

    Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...

  5. [洛谷P4341][BJWC2010]外星联络

    题目大意:给你一个长度为$n(n\leqslant3\times10^3)$的字符串,要你求出其中出现次数大于$1$的子串,并按字典序输出次数. 题解:建$SAM$后求出每个点的$size$,最后按字 ...

  6. 【BZOJ3243】【NOI2013】向量内积（矩阵，数论）

    [BZOJ3243][NOI2013]向量内积(矩阵,数论) 题面 BZOJ 题解 这题好神仙. 首先\(60\)分直接是送的.加点随机之类的可以多得点分. 考虑正解. 我们先考虑一下暴力. 我们把\ ...

  7. x64 win64编译环境下ADO链接Access数据库的问题解决

    原文链接地址:https://blog.csdn.net/HW140701/article/details/71077579 Win32编译环境下,用ADO数据库连接Access数据库一般都不会报错, ...

  8. tomcat7.x远程命令执行（CVE-2017-12615）漏洞漏洞复现

    tomcat7.x远程命令执行(CVE-2017-12615)漏洞漏洞复现 一.漏洞前言 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017 ...

  9. CF1100E

    i207M给的题 省选前-小题解合集 给定一张有向图,每条边有边权.你可以花费边权的代价反转一条边,使得原图中没有环.最小化反转的边权的最大值. 首先二分,然后考虑判定. 转化为有些边可以翻转,有些边 ...

  10. HDU3400 三分套三分

    题意 就是给你两条线段AB , CD ,一个人在AB以速度p跑,在CD上以q跑, 在其他地方跑速度是r.问你从A到D最少的时间. 三分AB ,然后再三分CD ,模板题目,这题卡精度 eps不能少 #i ...