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. P4622 [COCI2012-2013#6] JEDAN

    题目背景 COCI 题目描述 有N个数排成一行(数值代表高度),最初所有的数都为零,你可以选择连续的一段等高的数,将它们都增加1(除了开头和结尾那个数)如下图表示了两次操作: 现在有一些数字看不清了, ...

  2. [APIO2014]回文串 manacher 后缀数组

    题面:洛谷 题解: 还是这个性质:对于每个串而言,本质不同的回文串最多只有O(n)个. 所以我们先求出这O(n)个本质不同的回文串,然后对整个串求一次sa. 然后对于每个回文串,求出它的出现次数,更新 ...

  3. SpringBoot(五) :spring data jpa 的使用

    原文出处: 纯洁的微笑 在上篇文章springboot(二):web综合开发中简单介绍了一下spring data jpa的基础性使用,这篇文章将更加全面的介绍spring data jpa 常见用法 ...

  4. 驱动学习5: zynq实现点亮led

    驱动代码: #include <linux/module.h> #include <linux/kernel.h> #include <linux/fs.h> #i ...

  5. [DeeplearningAI笔记]序列模型3.7-3.8注意力模型

    5.3序列模型与注意力机制 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.7注意力模型直观理解Attention model intuition 长序列问题 The problem of ...

  6. [DeeplearningAI笔记]卷积神经网络3.1-3.5目标定位/特征点检测/目标检测/滑动窗口的卷积神经网络实现/YOLO算法

    4.3目标检测 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.1目标定位 对象定位localization和目标检测detection 判断图像中的对象是不是汽车--Image clas ...

  7. 转:Unable to execute dex: Multiple dex files define 解决方法

    转自:http://blog.csdn.net/mxlxiao7/article/details/8978930 问题发生概述: 程序编译正常,在用Eclipse调试执行时,报错Unable to e ...

  8. MyEclipse+Weblogic+Oracle+PLSQL配置注意事项

    Weblogic配置详情:<Weblogic安装与配置图文详解>Oracle+PLSQL配置详情:<PL/SQL访问远程Oracle服务器(多种方式)>MyEclipse配置: ...

  9. 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  10. Java--图片浏览器

    功能:启动后选择打开文件,可以打开图片进行浏览. v 1.0 :支持上一张 下一张功能.(欠缺,窗口大小未随着图片大小而改变) import java.awt.BorderLayout; import ...