uniapp使用HQChart的k线，用webSocket更新数据

项目：不借用HQChart的各种接口数据，即数据后端返回，但是数据格式要和原数据格式一样。

//k线图
CreateHQChartKLine(){var chartHeight=uni.upx2px(this.ChartHeight);let hqchartCtrl=this.$refs.HQChartCtrl;hqchartCtrl.KLine.Option.Type="历史K线图";hqchartCtrl.KLine.Option.Language = uni.getLocale() == 'zh-CN' ? 'CN' : uni.getLocale() == 'zh-HK' ? 'TC' : 'EN'//设置语言hqchartCtrl.KLine.Option.DragDownload = {Minute:{Enable:true}}hqchartCtrl.KLine.Option.IsApiPeriod=true;hqchartCtrl.KLine.Option.Border.Right=1;hqchartCtrl.KLine.Option.Border.Left=1;hqchartCtrl.KLine.Option.Border.Top=0;hqchartCtrl.KLine.Option.Border.Bottom=25;hqchartCtrl.KLine.Option.IsCorssOnlyDrawKLine = falsehqchartCtrl.KLine.Option.CorssCursorTouchEnd = truehqchartCtrl.KLine.Option.EnableScrollUpDown = true//手势上下允许滚动页面hqchartCtrl.KLine.Option.IsClickShowCorssCursor = falsehqchartCtrl.KLine.Option.IsFullDraw=true;hqchartCtrl.KLine.Option.Windows = [{Index: "MA",Modify: true,Change: true,IsMainIndex: true,},{Index: "VOL",Modify: false,Change: false}]hqchartCtrl.KLine.Option.Frame = [{SplitCount: 4, //最多输出3个分隔线IsShowLeftText: false, //不显示左边刻度文字IsShowRightText: true, //显示右边刻度文字},{SplitCount: 2, //最多输出3个分隔线IsShowLeftText: false, //不显示左边刻度文字IsShowRightText: true, //显示右边刻度文字}]hqchartCtrl.KLine.Option.KLine = {Right: 0, //复权 0 不复权 1 前复权 2 后复权Period: 6, //周期: 0 日线 1 周线 2 月线 3 年线PageSize: 50,IsShowTooltip: false,//是否显示K线的tooltip信息}hqchartCtrl.KLine.Option.ExtendChart = [{Name: 'KLineTooltip'}]hqchartCtrl.KLine.Option.SplashTitle = ' ';let coinPrecision = uni.getStorageSync('coinPrecision')//设置保留小数位数// #ifdef H5// h5在this.DrawMaxMinPrice(26741 - umychart.uniapp.h5.js 2个Number()中)// 深度图 FrameSplitXDepth 46569 umychart.uniapp.h5.js Number()//this.SplitDefault 44919 umychart.uniapp.h5.js Number()HQChart.MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=> { return coinPrecision[this.detailMsg.coin].precision }// #endif// #ifndef H5// app在this.DrawMaxMinPrice(1541 - umychart.chartpaint.wechat.js 2个Number()中)//this.SplitDefault 627 umychart.framesplit.wechat.jsJSCommon.MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=> { return coinPrecision[this.detailMsg.coin].precision }// #endifhqchartCtrl.NetworkFilter=this.NetworkFilterKLine;//不使用插件接口，数据由后端返回hqchartCtrl.SetSize(uni.upx2px(this.ChartWidth),chartHeight);hqchartCtrl.OnSize();hqchartCtrl.CreateHQChart()hqchartCtrl.ChangeKLineIndex(this.kSetList[this.kSetIndex].windowId, this.kSetList[this.kSetIndex].name) //设置主图、MA\BOLL\隐藏
},
NetworkFilterKLine(data, callback){data.PreventDefault=true;//阻止插件接口请求var hqChartData={code:0, data:[]};hqChartData.symbol=this.detailMsg.coin + this.detailMsg.quoteUnit //这边用币种名称代替hqChartData.name=this.detailMsg.coin + this.detailMsg.quoteUnit	//这边用币种名称代替if(data.Name == 'KLineChartContainer::RequestDragMinuteData'){//拉到最左侧，获取下一页数据this.page++}let a = {maxTime:this.page == 1 ? 0 : this.kLinesList[0].time,quote_unit:this.detailMsg.quoteUnit,pageSize:100,interval:this.kList[this.kCurrent].key,page:this.page,coin:this.detailMsg.coin}if(data.Name == 'KLineChartContainer::ReqeustHistoryMinuteData' || data.Name == 'KLineChartContainer::RequestDragMinuteData'){getKLinesDetail(a).then(res=>{if(res.code == 1){if(res.data.length != 0){this.kLinesList = res.datalet arr = []res.data.forEach((item,index)=>{//时间、null、开、高、低、收、量 插件的数据格式，time已经被我改成uview时间格式化形式，如果不想该源代码，就跟着作者大佬的数据结构来let objArr = [Number(item.time),null,Number(item.open),Number(item.high),Number(item.low),Number(item.close),Number(item.volume)]arr.push(objArr)})this.kLinesArr = this.page == 1 ? arr : this.kLinesArr.concat(arr)hqChartData.data = this.kLinesArr.sort(this.geiSfun())//重新排序// #ifdef H5callback(hqChartData);// #endif// #ifndef H5callback({data:hqChartData});// #endif}}})}//webSocket - 更新K线uni.$on('webSocket', item => {if (!isJSON(item.data.msgContent)){return}if (item.data.msgType==3&&this.kLinesList&&this.kLinesArr){let kObj = JSON.parse(item.data.msgContent)if(kObj.coin == this.detailMsg.coin){// 时间、null、开、高、低、收、量let kArr = [Number(kObj.time),null,Number(kObj.open),Number(kObj.high),Number(kObj.low),Number(kObj.close),Number(kObj.volume)]let itemIndex = this.kLinesArr.findIndex(item => {return item[0] == Number(kObj.time);});//查询webSocket的数据是否存在kLinesArr数组中，存在替换，不存在添加//因为项目的webSocket有时候会推送时间相同但是其他不同的数据，要查询到该时间所在下标并且替换，不要问为什么，问就是k线就是这么搞的（我也不懂，鶸）if(itemIndex == -1){this.kLinesArr.push(kArr)}else{this.kLinesArr[itemIndex] = kArr}let d = {code:0, data:[],ver:2}d.data = this.kLinesArr.sort(this.geiSfun())//不加symbol和name会报错d.symbol = this.detailMsg.coin + this.detailMsg.quoteUnitd.name = this.detailMsg.coin + this.detailMsg.quoteUnitcallback(d)}}})
},
geiSfun(){return function (a, b) {return a[0] - b[0];}
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/12222.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【触觉智能Purple Pi OH开发板体验】开箱体验：开源主板Purple Pi RK3566 上手指北

【触觉智能Purple Pi OH开发板体验】开箱体验：开源主板Purple Pi RK3566 上手指北

前言 前段时间收到来自【电子发烧友】的一款开发板，名叫：PurplePi，216G售价仅249元。它使用的芯片是rk3566，适配的OpenHarmony版本为3.2 Release 是目前最便宜的OpenHarmony标准系统开源开发板，并且软硬件全部开源&am…
阅读更多...
QT 使用串口

QT 使用串口

目录 1.1.1 添加库，添加类 1.1.2 定义串口 1.1.3 搜索串口 1.1.4 设置和打开串口 1.1.5 读取数据 1.1.6 发送数据 1.1.7 关闭串口 1.1.1 添加库，添加类 首先，QT5 是自带 QSerialPort(Qt5 封装的串口类)这个类的，使用时…
阅读更多...
中级工程师职称评审条件

中级工程师职称评审条件

一.评审范围 全省范围具有合法生产，经营手续的中小企业局和非公有制经济从事工程师工作专业技术人员和高技能人员，均可申报 当年达到法定退休或已办退休…
阅读更多...
sql dateadd函数的用法有哪些

sql dateadd函数的用法有哪些

SQL的DATEADD函数用于在日期或时间上添加一个指定的间隔，并返回结果。 DATEADD函数的语法如下： DATEADD(datepart, number, date) 其中，datepart是指定要添加的间隔的部分，number是要添加的数量，date是要添加间隔的日…
阅读更多...
【深度学习笔记】Softmax 回归

【深度学习笔记】Softmax 回归

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记，视频由网易云课堂与 deeplearning.ai 联合出品，主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习，视频的链接如下： 神经网络和…
阅读更多...
每日一题——有序链表去重

每日一题——有序链表去重

题目 删除给出链表中的重复元素（链表中元素从小到大有序），使链表中的所有元素都只出现一次。 例如：给出的链表为1→1→2,返回1→2。 给出的链表为1→1→2→3→3,返回1→2→3。 数据范围：链表长度满足 0≤n≤100&#…
阅读更多...
学习笔记|百度文心千帆大模型平台测试及页面交互简易代码

学习笔记|百度文心千帆大模型平台测试及页面交互简易代码

目前百度文心一言的内测资格申请相当拉胯，提交申请快3个月，无任何音讯。不知道要等到什么时候。 百度适时开放了百度文心千帆大模型平台，目前可以提交申请测试，貌似通过的很快，已取得测试申请资格，可以用起…
阅读更多...
Oracle恢复删除的数据

Oracle恢复删除的数据

不下心删除了生产库的数据或者不小心删除了一部分数据，如何恢复找回。 Oracle恢复删除数据的方法 方案一 利用oracle提供的闪回方法进行数据恢复，适用于delete删除方式 首先获取删除数据的时间点： select * from v$sql where sql_text l…
阅读更多...
无线投屏手机(安卓）屏幕到 Linux(ubuntu 22.04)桌面

无线投屏手机(安卓）屏幕到 Linux(ubuntu 22.04)桌面

1.安装 scrcpy 安装 scrcpy会自动安装 adb. 这个版本的adb功能不是最全的，需要删掉，然后从链接 https://dl.google.com/android/repository/platform-tools-latest-darwin.zip 下载，解压安装即可。 2. 在手机上 打开开发者模式和 USB调试…
阅读更多...
Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用

Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用

Unity UGUI的EventTrigger (事件监听器)组件的介绍及使用 1. 什么是EventTrigger组件？ EventTrigger是Unity UGUI中的一个组件，用于监听和响应UI元素的各种事件，例如点击、拖拽、进入、离开等。通过EventTrigger组件，我们可以方…
阅读更多...
使用python爬取淘宝商品信息

使用python爬取淘宝商品信息

要使用Python爬取淘宝商品信息，您可以按照以下步骤： 安装必要的库 您需要安装Python的requests库和BeautifulSoup库。 要使用Python爬取淘宝商品信息，您可以按照以下步骤：安装必要的库 您需要安装Python的requests库和Beautifu…
阅读更多...
国内好用的企业级在线文档有哪些？

国内好用的企业级在线文档有哪些？

在当今数字化时代，企业级在线文档已经成为了现代办公环境中不可或缺的一部分。它不仅能够提高工作效率，还能够实现多人协同编辑，满足团队协作的需求。那么，在国内市场上，哪些企业级在线文档产品备受企业青睐呢&#xf…
阅读更多...
Python（四十七）列表对象的创建

Python（四十七）列表对象的创建

❤️ 专栏简介：本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中，我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 ：本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…
阅读更多...
“深入理解Spring Boot：构建高效、可扩展的Java应用程序“

“深入理解Spring Boot：构建高效、可扩展的Java应用程序“

标题：深入理解Spring Boot：构建高效、可扩展的Java应用程序 摘要：Spring Boot是一个用于构建Java应用程序的开源框架，它提供了一种简单且高效的方式来创建独立的、生产级别的应用程序。本文将深入探讨Spring Boot的核心概念和特性…
阅读更多...
Git工作中常用命令

Git工作中常用命令

模拟一个git完整命令流程 有一个名为 example.txt 的文本文件 Hello, this is some text.1、做一些修改并查看文件的差异： # 修改 example.txt 文件 echo "Hello, this is some updated text." > example.txt查看文件的差异 git diffgit diff 命令…
阅读更多...
【【51单片机红外遥控小风车】】

【【51单片机红外遥控小风车】】

51单片机红外遥控小风车 今天结束了51单片机的学习，明天开始学习stm32 我是学习江科大的视频一步一步完成的 ，他讲的非常好，非常好 特别通俗易懂 学习复刻他的作品我也自己创作了一些 但是现在暂时脱离这块板子了 以后可能会更新一个应用51单…
阅读更多...
ffmpeg最简单方式支持nvidia硬编解码

ffmpeg最简单方式支持nvidia硬编解码

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、nvidia硬编解码是什么？二、使用步骤1.安装2.确认1.硬件解码器2.硬件编码器 3.测试 总结 前言 因为工作内容的需要，之前写过一篇文章…
阅读更多...
使用SVM模型完成分类任务

使用SVM模型完成分类任务

SVM，即支持向量机（Support Vector Machine），是一种常见的机器学习算法，用于分类和回归分析。SVM的基本思想是将数据集映射到高维空间中，在该空间中找到一个最优的超平面，将不同类别的数据点分开…
阅读更多...
Jsp+Ssh+Mysql实现的简单的企业物资信息管理系统项目源码附带视频指导运行教程

Jsp+Ssh+Mysql实现的简单的企业物资信息管理系统项目源码附带视频指导运行教程

由jspssh（springstruts2mysql）实现的企业物资信息管理系统，系统功能比较简单，实现了基本的管理员、操作员等用户管理、物品分类管理、物品管理、入库管理、出库管理、库存预警、客户管理、供应商管理等基本功能需要的可以联系我分…
阅读更多...
接口参数设计原则

接口参数设计原则

1. 不能太动态. 不相信客户端的原则 例如传递 filterFields , 推送一个表的某些字段给上游. 2. 可以服务端提供一些封装. 这个封装可以是写死的组合, 也可以是后端配置的. 最好的是 代码里的领域类bean 1,1对应一个名称. 可以是 classReference. 运营态有很多字段是给用户看的…
阅读更多...
最新文章

Copyright @ 2022~2023