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. 【数据库_Mysql】Mysql知识汇总

    1.将多列字段合并显示用CONCAT(XX,XX,...): 2.查询表中某字段重复的数据: 查重复字段:select 字段 from table group by 字段 having count(* ...

  2. [一]SpringBoot 之 HelloWorld

    (1)新建一个Maven Java工程 (2)在pom.xml文件中添加Spring BootMaven依赖 2.1在pom.xml中引入spring-boot-start-parent spring ...

  3. ans menu list

    ans menu list 1. 系统配置 a) 基本设置 i. NTP ii. 配置模式 iii. 主机信息 b) 高可用性 i. 节点 ii. 路由监视器 iii. 故障转移接口群 c) 设备标识 ...

  4. 【刷题】BZOJ 4025 二分图

    Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考考你. Input ...

  5. 【Cogs2187】帕秋莉的超级多项式（多项式运算）

    [Cogs2187]帕秋莉的超级多项式(多项式运算) 题面 Cogs 题解 多项式运算模板题 只提供代码了.. #include<iostream> #include<cstdio& ...

  6. Round 403 div. 2

    B 可以二分相遇的坐标:也可以二分时间,判断是否存在两个人的区间没有交. An easy way to intersect a number of segments [l1, r1], ..., [l ...

  7. 洛谷P1242 新汉诺塔 【神奇的递归】

    题目描述 设有n个大小不等的中空圆盘,按从小到大的顺序从1到n编号.将这n个圆盘任意的迭套在三根立柱上,立柱的编号分别为A.B.C,这个状态称为初始状态. 现在要求找到一种步数最少的移动方案,使得从初 ...

  8. HSTS的来龙去脉

    前言 安全经常说“云.管.端”,“管”指的是管道,传输过程中的安全.为了确保信息在网络传输层的安全,现在很多网站都开启了HTTPS,也就是HTTP+TLS,在传输过程中对信息进行加密.HTTPS使用了 ...

  9. Android缓存

    一个利用内存缓存和磁盘缓存图片的例子 public class BitmapCache { public static final String TAG = "debug"; pr ...

  10. (转) 使用vivado创建工程 3

    Create a Hello World application In this experiment we will use Xilinx SDK to create a simple Hello ...