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

最新推荐文章于 2024-05-30 01:52:00 发布
最新推荐文章于 2024-05-30 01:52:00 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： hqchart高级应用教程 文章标签： hqchart kline uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jones2000/article/details/116034602
版权
hqchart高级应用教程 专栏收录该内容
27 篇文章 166 订阅 ¥299.90 ¥99.00
订阅专栏

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

hqchart组件

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

预备知识

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

样例效果图

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

组件创建步骤

1 创建组件模板元素

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

<template>
	
	<!--  #ifdef
了解本专栏 订阅专栏 解锁全文
HQChart
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
HQChart使用教程60-新版k线训练使用教程
01-20
新版k线训练使用教程样例页面K线训练重构创建K线图操作接口下一个K线自动/停止自动移动K线买卖股票K线移动监听事件买卖数据计算K线背景色设置功能买卖图标修改完整代码HQChart代码地址如果教程或hqchart对你有帮助，...
HQChart-master.zip
03-15
HQChart - H5, 微信小程序 沪深/港股/数字货币/美股/期货 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3放数据替换接口
深度学习入门-mnist数据集
weixin_45720751的博客
10-03 1611
深度学习入门-基于python的理论与实现 3.6.1 MNIST数据集 我使用的是pyhcharm 可以直接通过setting里Install tensorflow模块导入mniset数据集 tensorflow是一个采用数据流图（data flow graphs），用于数值计算的开源软件库 MNIST是一个入门级的计算机视觉数据集，它包含各种手写数字图片 数据集被分成两部分：60000行的训练数据集（mnist.train）和10000行的测试数据集（mnist.test）。 每一个MNIST数据单元有
HQChart使用教程1- 如何快速创建一个K线图页面
热门推荐
小银
05-16 3万+
快速创建一个K线图页面HQChart介绍demo页面代码Option的配置项说明 效果图 HQChart介绍 功能: 提供K线，走势图， 支持通达信语法指标（麦语法), 画图工具，等等… 支持PC端页面， 小程序，手机端页面。 地址：https://github.com/jones2000/HQChart demo页面代码 git下载代码 在webhqchart.demo\demo 目录下创建一......
HQChart使用教程100-uniapp如何在vue3运行微信小程序
最新发布
小银
05-30 586
查了下资料，这个Proxy是vue3特有的，我们只要让它不生成这个Proxy就可以解决这个报错。通过uniapp编译出来的小程序没有”markRaw“这个函数， 看了下uniapp自动生成的verndor.js，内部是有markRaw，只是没有导出，手动加上吧，并且在调用markRaw的地方加上导出的名称。获取画布节点，并且把这个节点赋值给一个变量（this.CanvasNode），由于vue3导致this.CanvasNode最后的值不是原始节点，而是一个Proxy的封装的数值。
HQChart使用教程17- 多技术指标独立坐标叠加
小银
07-12 2757
多技术指标独立坐标叠加应用场景效果图部分页面代码配置参数说明动态添加和删除叠加接口HQChart代码地址 应用场景 有的时候我们需要在一个窗口里面显示多个指标，但每个指标的数值单位相差太大，这个时候我们就需要给每个指标分配一个独立的坐标 效果图 测试地址:https://opensource.zealink.com/hqweb/demo/phone22.html 部分页面代码 我们只需要在opt...
HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标
小银
09-30 2485
HQChart使用教程30-K线图如何对接第3方数据11-如何绘制多组自定义图标效果图步骤1.创建iconfont文件2. 配置一个第3方指标3. 网络协议回调计算指标自定义图标json格式nametypeDrawDraw.DrawTypeDraw.DrawDataDraw.DrawData.FamilyDraw.DrawData.Icon 使用自定义svg图标显示再指标上，这里我们只支持svg图...
HQChart商业使用说明及用户使用协议
小银
02-27 3577
HQChart商用使用说明及用户使用协议增加醒目的提醒文字HQChart用户使用协议内置数据说明商用去掉提醒文字技术支持HQChart代码地址 增加醒目的提醒文字 HQChart使用Apache License 2.0允许免费商用及修改源码。但由于HQChart是一个金融行业的标准插件，所以1.17022版本以后默认会在UI界面上增加”仅学习使用“文字，避免作者连带承担使用者商用化以后造成的法律责任，或被不法分子利用的犯罪工具。 HQChart用户使用协议
HQChart日K线图(Vue)
10-02
【HQChart日K线图(Vue)】是一个基于Vue2技术框架实现的股票图表组件，主要专注于展示股票的日K线数据。此项目提供了一个示例，演示如何将第三方数据源（如东方财富网）与HQChart组件相结合，为用户提供实时、直观的...
HQChart行情图形库及麦语法脚本执行器-其他
06-12
js版本的K线图形库支持原生js，VUE，uniapp，小程序。 麦语法(分析家语法)指标执行器支持js，nodejs，py。 其中py的FastHQChart版本是由c++底层开发，通过cpython来对接py，能高效的完成指标执行。 可以应用于回测，...
HQChart分时图(Vue)
09-13
【HQChart分时图(Vue)】是一款基于Vue2框架的股票实时分时图表组件，专为数据可视化设计。此项目旨在提供一个示例，展示如何将HQChart库与Vue2相结合，实现实时更新的股票分时走势展示。通过运行`npm run dev`命令，...
K线图，走势图，支持通达信语法
11-30
开源地址：https://github.com/jones2000/HQChart 目录结构 webhqchart.demo 页面行情测试用例 |--jscommon 行情前端js代码 是webhqchart的一个拷贝 |--demo 测试用 *注意！ 目前代码使用了ES6的特性， 所有会导致有些老的浏览器无法显示， 需要使用Babel转成es5 功能： 1. K线图 支持前复权,后复权 支持日线,月线,周线,年线. 主图支持股票叠加 支持常用指标指标(目前以录入系统指标85个) 均线，BOLL，MACD，KDJ，VOL，RSI，BRAR，WR，BIAS，OBV，DMI，CR，PSY，CCI， DMA，TRIX，VR，EMV，ROC，MIM，FSL，CYR，MASS，WAD，CHO ..... 支持画图工具(小程序不支持) 线段，射线，矩形，圆弧线 支持区间统计， 区间形态匹配 (微信小程序版本不支持) 数据鼠标左右拖拽移动, 键盘移动十字光标移动，键盘缩放 支持通达信语法指标 2. 走势图 支持指标 支持沪深和港股 分钟数据显示 支持多日分钟数据显示
HQChart5日分时图(Vue)
09-14
【HQChart5日分时图(Vue)】是一款基于Vue2技术栈的股票实时图表组件，主要用于展示股票近五个交易日的分时走势。这款组件能够帮助投资者清晰地观察到股票在最近五个工作日内每个小时的价格变化，从而进行更精准的...
HQChart分钟K线图(Vue)
10-03
【HQChart分钟K线图(Vue)】是一个基于Vue2技术框架实现的股票市场分析工具，主要用于展示股票的分钟级K线数据。K线图，又称阴阳烛图，是金融图表分析中的重要工具，用于直观地展示股票价格的变动情况，包括开盘价、...
HQChart美股分时图h5页面
10-11
【HQChart美股分时图h5页面】是一个项目，它展示了如何使用HQChart库来创建一个展示美股分时数据的Web页面。这个项目的核心在于通过对接第三方数据源，特别是使用东方财富网的数据，来实时更新和展示股票的分时图表...
HQChart行情图形库及麦语法脚本执行器 v1.0
12-29
js版本的K线图形库支持原生js，VUE，uniapp，小程序。麦语法(分析家语法)指标执行器支持js，nodejs，py。 其中py的FastHQChart版本是由c++底层开发，通过cpython来对接py，能高效的完成指标执行。 可以应用于回测，...
HQChart实战教程6-自定义分时图
小银
02-04 3453
HQChart实战教程6-自定义分时图分时图要求具体步骤步骤1(自定义品种后缀)步骤2(定义交易区间段）步骤3(定义X轴分割线)步骤4 （替换自定义品种接口函数）步骤5 （接口数据）完整代码 分时图 hqchart分时图是根据不品种，内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示 要求 假设 XXYY品种交易时间段如下 8:00 -10:00 ,...
hqchart使用总结及方法--react+hqchart
Uxiao7的博客
10-26 1019
1.根据不同的 Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线去使用NetworkFilter里的data会返回Name。//hqchart图形适配 把chart 放在最外面就可以控制。//引用HQChart ,要使用状态栏的小图标必须引用css。1.在react项目中下载hqchart。1.创建一个hqchart图形。//动态请求网络数据接口。//需要的Option。
HQChart使用教程80-自定义指标标题信息
小银
06-11 1624
HQChart使用教程80-自定义指标标题信息指标标题demo地址自定义显示步骤关闭内置的指标标题显示注册指标信息回调事件回调事件参数说明eventdataobj完整demo代码交流QQ群: 950092318HQChart代码地址 指标标题 显示当前指标及十字光标所在位置的指标数据. 内置是使用画布画上去的. HQChart也支持外部自定义一个div来显示内容 demo地址 https://opensource2.zealink.com/hqweb/demo/demo_indextitle.html
hqchart 教程视频
09-27
hqchart 是一款基于 HTML5 技术的股票图表库，为开发者提供了丰富的图表展示功能和交互效果。对于想要了解和学习 hqchart 的开发者来说，教程视频是一个很好的学习资源。 教程视频通常会从基础的安装和配置开始，介绍如何使用 hqchart 的开发环境和相关工具。接着会逐步讲解 hqchart 的主要功能和组件，如图表的数据结构、数据的导入和处理、图表的创建和配置等。同时还会介绍 hqchart 的常用属性和方法，如图表的样式设置、交互行为的响应等。 视频教程也会演示如何使用 hqchart 来绘制不同类型的图表，如K线图、折线图、柱状图等。通过实例，开发者能够清楚地了解 hqchart 的用法和特性。此外，视频教程还会介绍如何对图表进行数据更新和动态刷新，以及如何添加和自定义各种技术指标等。 除了基本的功能和用法，教程视频也会分享一些高级技巧和实战经验，如如何优化图表性能、如何处理大量数据、如何实现图表的联动等。这些内容将帮助开发者更好地应用 hqchart 进行股票数据的可视化分析和展示。 通过观看 hqchart 的教程视频，开发者可以快速入门和掌握 hqchart 的使用方法，从而更高效地开发出符合自己需求的股票图表应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

HQChart

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

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

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

打赏作者

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

抵扣说明：

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

余额充值