HQChart实战教程40 - 如何制作hqchart组件(uniapp版本)

最新推荐文章于 2024-05-30 01:52:00 发布
最新推荐文章于 2024-05-30 01:52:00 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： hqchart高级应用教程 文章标签： hqchart kline uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/116034602
版权
本文档详细介绍了如何在uni-app中封装hqchart组件，包括组件创建步骤、实例容器创建、配置数据设定、接口说明及组件使用方法，提供了一个在同一页面展示两个hqchart图形的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HQChart实战教程40 - 如何制作hqchart组件 uniapp版本

hqchart组件

通过模板封装， 把单个hqchart图形封装成一个组件，这样在外部需要使用多个hqchart图形的时候，就可以通过组件的引入，快速创建，减少重复代码。

预备知识

需要了解如何制作vue组件， 不清楚的可以google搜下。

样例效果图

在一个页面里面同时使用2个hqchart图形， 通过组件的方式引入
在这里插入图片描述

组件创建步骤

1 创建组件模板元素

由于h5和app画布实现不一样，所以创建元素的时候通过条件编译分h5，和app两种情况
具体可以看教程
HQChart使用教程44-uniapp使用条件编译同时支持h5,app,小程序

了解本专栏 订阅专栏 解锁全文
HQChart实战教程36-A股后台指标对接-uniapp版本
小银
03-18 1064
HQChart实战教程36-A股后台指标对接-uniapp版本预备知识步骤1. 配置远程指标2. NetworkFilter截获后台指标请求3. 对接自己的后台指标4. 指标数据更新交流QQ群: 950092318HQChart代码地址完整代码index.vue600000_index.js600000_day.js 预备知识 HQChart使用教程30-K线图如何对接第3方数据5-指标数据 HQChart使用教程30-K线图如何对接第3方数据9-BS指标数据 HQChart使用教程30-K线图如何对接第
HQChart实战教程57-远程指标提示信息
小银
01-11 364
远程指标提示信息配置
HQChart使用教程37 - 如何在uni-app创建k线图(app)
小银
09-20 1万+
HQChart使用教程37 - 如何在uni-app创建k线图 app插件目录创建步骤1. 拷贝插件到工程中2. 创建一个page页 在page页中3.运行到模拟器注意事项 插件目录 创建步骤 1. 拷贝插件到工程中 创建一个空的uni-app 工程， 把wechathqchart 目录拷贝到工程中。 例子里 我建了一个hqchart.uniapp的目录， 把插件的文件拷贝到这个目录里 2. ...
uniapp使用HQChart的k线，用webSocket更新数据
空&白的博客
07-24 1543
项目：不借用HQChart的各种接口数据，即数据后端返回，但是数据格式要和原数据格式一样。
HQChart实战教程3-http+ws对接分钟K线数据
小银
01-07 4226
HQChart实战教程3-http+ws对接分钟数据要求流程图数据格式样例 要求 http下载历史分钟K线数据 ws更新最新的分钟K数据 流程图 数据格式 分钟K线使用 下面2个格式的数据 HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据 HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据 样例 <!DOCTYPE html PUB...
HQChart使用教程63-uniapp使用renderjs+hqchart(h5)
小银
06-23 4872
HQChart使用教程63-uniapp使用renderjs+hqchart序步骤1. 安装依赖模块2. 创建 renderjs qhchart模块3. 使用HQChartCtrl对hqchart进行简单的封装4. page页面创建一个view元素绑定到HQChartCtrl5. 分时K线切换说明HQChart代码地址如果教程或hqchart对你有帮助， 请在git上star，教程点下赞 。谢谢~~ 序 uniapp的画布实在是太烂了， 导致app很卡， 但是h5页面却很流畅，如果可以直接在uniapp里使
HQChart使用教程79-uniapp中hqchart内置组件使用教程
小银
05-10 3076
HQChart使用教程79-uniapp中hqchart内置组件使用教程hqchart组件步骤1. 下载插件导入组件组件接口函数介绍SetSize(width, height)ClearChart()OnSize()CreateHQChart()ChangeKLinePeriod(period)ChangeMinutePeriod(dayCount)ChangeKLineIndex(windowId,name)ChangeSymbol(symbol)NetworkFilter(data, callback)
HQChart实战教程30-A股日K线数据对接-uniapp版本
小银
01-25 1649
HQChart实战教程30-A股日K线数据对接-uniapp版本日线数据对接预备知识创建K线图教程步骤1. HQChart数据回调函数部分代码2. 全量数据对接部分代码3. 增量数据更新部分代码4. 流通股本数据部分代码交流QQ群: 950092318HQChart代码地址完整demo代码1. index.vue2. 600000_day.js 日线数据对接预备知识 HQChart使用教程30-K线图如何对接第3方数据1 HQChart使用教程30-K线图如何对接第3方数据2-日K数据 HQChart使用
HQChart使用教程100-uniapp如何在vue3运行微信小程序
最新发布
小银
05-30 961
查了下资料，这个Proxy是vue3特有的，我们只要让它不生成这个Proxy就可以解决这个报错。通过uniapp编译出来的小程序没有”markRaw“这个函数， 看了下uniapp自动生成的verndor.js，内部是有markRaw，只是没有导出，手动加上吧，并且在调用markRaw的地方加上导出的名称。获取画布节点，并且把这个节点赋值给一个变量（this.CanvasNode），由于vue3导致this.CanvasNode最后的值不是原始节点，而是一个Proxy的封装的数值。
HQChart行情图形库及麦语法脚本执行器 v1.0
12-29
为您提供HQChart行情图形库及麦语法脚本执行器下载，HQChart是一个基于国内传统PC股票客户端软件(C++)移植到js/py平台的一个项目，包含K线图图形库及麦语法(分析家语法)指标执行器。js版本的K线图形库支持原生js，VUE，uniapp，小程序。麦语法(分析家语法)指标执行器支持js，nodejs，py。 其中py的FastHQChart版本是由c++底层开发，通过cpython来对接py，能高效的完成指标执行。 可以应用于回测，选股等
HQChart使用教程44-uniapp使用条件编译同时支持h5,app,小程序
小银
10-13 3687
HQChart使用教程44-uniapp使用条件编译同时支持h5,app,小程序背景安装插件template 设置创建插件设置HQChart大小调整效果图完整代码 背景 由于小程序/app很多局限性（无法创建DOM，canvas异步绘图等）导致HQChart开发的时候分成两个版本(小程序版本和H5页面版本）。 使用条件编译我们可以把这2个版本组件同时包含的工程中，并且通过平台判断动态加载对应版本的...
HQChart使用教程1- 如何快速创建一个K线图页面
热门推荐
小银
05-16 3万+
快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明 效果图 HQChart介绍 功能: 提供K线，走势图， 支持通达信语法指标（麦语法), 画图工具，等等… 支持PC端页面， 小程序，手机端页面。 地址：https://github.com/jones2000/HQChart demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一......
HQChart实战教程9-自定义A股分时图
小银
04-17 1906
HQChart实战教程9-自定义A股分时图A股分时图交易时间段步骤1. 替换hqchart内置A股交易时间段2. 替换hqchart内置的A股X轴显示信息3. 注意完整例子代码 A股分时图交易时间段 hqchart内置的A股分时图交易时间段为： 9：25， 9：30 - 11：30 ， 13：00 - 15：00 如果你的数据不是这个时间段就需要在外部自己定义好你的交易时间段 样例页面地址：dem...
HQChart使用教程13-5分钟完成一个小程序K线图
小银
06-11 6400
HQChart使用教程13-5分钟完成一个小程序K线图效果图下载HQChart组件配置 WXML配置页面js文件HQChart代码地址 效果图 下载HQChart组件 https://github.com/jones2000/HQChart 把 \trunk\wechathqchart 目录拷贝到小程序项目的目录里面。 配置 WXML 新建一个小程序页面， 在WXML里面增加一个’canvas...
HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本 (源码付费)
小银
05-22 1556
HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本数据源支持周期平台支持demo安卓apk下载源码售价 580元效果截图HQChart代码地址 数据源 使用公开的新浪+腾讯的A股票Api数据, h5页面需要自己配代理跨域. app直接就可以访问, 无需自己提供数据后台. 支持周期 分时, 5日, 日K, 周K, 1分钟K, 5分钟K, 15分钟K, 30分钟K, 36分钟K 平台支持 uniapp开发, 支持h5和app demo安卓apk下载 https://opensource
HQChart使用教程60 - 解决uniapp-app页面隐藏后在显示白屏的问题
小银
04-13 1682
HQChart使用教程60 - 解决uniapp-app页面隐藏后在显示白屏的问题 问题描述： 第1次app打开K线页面是可以正常显示，然后切换到其他页面， 再切换到K线页面就不能显示出来了。 解决方法： 每次页面隐藏退出的时候把hqchart示例清空， 每次页面显示的时候重新初始化hqchart实例 部分代码： onReady() //把原来初始化hqchart的代码 迁移到onShow()里...
HQChart使用教程92-如何创建分笔明细表
小银
04-23 1854
HQChart使用教程92-如何创建分笔明细表成交明细初始化成交明细Option的配置项说明TypeSymbolIsAutoUpdateAutoUpdateFrequencyColumnTypeTitleTextAlignBorderHQChart代码地址 成交明细 键盘支持 Up/Down 翻页 滚轴上下 翻页 注意 目前成交明细只支持PC页面。 初始化成交明细 <div id="deal" style="width: 900px;height:400px;"></div> ..
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据
小银
10-12 3997
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据协议名称-当天1分钟K线数据协议日志截图Request 字段说明symbolfield返回json数据结构数据截图stockminute 协议名称-当天1分钟K线数据 KLineChartContainer::RequestMinuteRealtimeData 协议日志截图 Request 字段说明 symbol......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HQChart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值