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. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  2. 洛谷 P4114 Qtree1

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

  3. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

  4. TCP（Transmission Control Protocol）学习笔记

    一.TCP(Transmission Control Protocol)原理介绍(参考维基百科) TCP连接包括三种状态:连接建立.数据传送和连接终止. TCP用三路握手(three-way hand ...

  5. 【loj2064】找相同字符

    Portal --> loj2064 Solution 这里是用后缀数组做的版本!(晚点再用Sam写一遍qwq) ​ 首先一个字符串的子串其实就是这个字符串某个后缀的前缀,所以我们有一个十分简单 ...

  6. 使用Masonry在UIScrollView内布局

    理论分析 首先,我们知道Autolayout改变了传统的以frame为主的布局思想.它其实是一种相对布局,核心思想是视图与视图之间的位置关系.比如,我们可以根据矩形的起始横坐标.纵坐标.长和宽这四个变 ...

  7. 我的emacs简易配置

    ;;------------语言环境字符集设置(utf-8)------------- (set-language-environment 'Chinese-GB) (set-keyboard-cod ...

  8. Servlet 介绍

    JSP 的本质就是 Servlet,开发者把编写好的 JSP 页面部署在 Web 容器中后,Web 容器会将 JSP 编译成对应的 Servlet. Servlet 的开发 Servlet 是个特殊的 ...

  9. UVA-11582 数学

    UVA-11582 题意: 求f[a^b]%n ,其中f是斐波那契数列,1<=n<=1000,0<=a,b<=2^64; 代码: //这题重点是要发现 f[i]%n会出现循环, ...

  10. Qt ------ 再论事件循环

    在介绍在以前,我们要认识两个术语: 可重入的(Reentrant):如果多个线程可以在同一时刻调用一个类的所有函数,并且保证每一次函数调用都引用一个唯一的数据,就称这个类是可重入的(Reentrant ...