HQChart使用教程37 - 如何在uni-app创建k线图 app

插件目录
创建步骤
- 1. 拷贝插件到工程中
- 2. 创建一个page页在page页中
- 3.运行到模拟器
通过uniapp下载hqchart插件
- 安装
- 使用
特别感谢秋云
交流QQ群: 950092318
HQChart代码地址

插件目录

创建步骤

1. 拷贝插件到工程中

创建一个空的uni-app 工程，把wechathqchart 目录拷贝到工程中。
例子里我建了一个hqchart.uniapp的目录，把插件的文件拷贝到这个目录里

2. 创建一个page页在page页中

import umychart.wechat.3.0.js
创建一个画布元素
绑定手势事件

代码如下：

<template><view><view> <canvas id="kline" canvas-id='kline' class='kline' style="width: 400px; height: 600px" @touchstart="KLineTouchStart" @touchmove='KLineTouchMove' @touchend='KLineTouchEnd' ></canvas>  </view><view class="button-sp-area"><button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(PERIOD_ID.KLINE_DAY_ID)">日线</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(PERIOD_ID.KLINE_WEEK_ID)">周线</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(PERIOD_ID.KLINE_MINUTE_ID)">1分钟</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(PERIOD_ID.KLINE_15MINUTE_ID)">15分钟</button></view><view class="button-sp-area"><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(0,'BOLL')">BOLL</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(1,'RSI')">RSI</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(2,'WR')">WR</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(0,'MA')">MA</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(1,'VOL')">VOL</button><button class="mini-btn" type="default" size="mini" @click="ChangeKLineIndex(1,'MACD')">MACD</button></view><view class="button-sp-area"><button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('000001.sz')">000001.sz</button><button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('600000.sh')">600000.sh</button></view></view></template><script>
import {JSCommon} from '../../umychart.uniapp/umychart.wechat.3.0.js'function DefaultData() { }DefaultData.GetKLineOption = function ()
{let data = {Type: '历史K线图', Windows: //窗口指标[{Index:"MA",Modify: false, Change: false}, {Index:"VOL",Modify: false, Change: false},{Index:"MACD",Modify: false, Change: false},], CorssCursorTouchEnd:true,IsShowRightMenu:false,       //是否显示右键菜单CorssCursorInfo:{ Left:2,Right:2 },Border: //边框{Left:   1,Right:  1, //右边间距Top:    1,Bottom: 25,},KLine:{Right:1,                            //复权 0 不复权 1 前复权 2 后复权Period:0,                           //周期: 0 日线 1 周线 2 月线 3 年线 PageSize:12,IsShowTooltip:false,},Frame:  //子框架设置 (Height 窗口高度比例值)[{   SplitCount:3,//Height:4,IsShowLeftText:true, IsShowRightText:false},{SplitCount:2,//Height:2,IsShowLeftText:true, IsShowRightText:false},{SplitCount:2,//Height:2,IsShowLeftText:true, IsShowRightText:false}],ExtendChart:[{Name:'KLineTooltip' },],};return data;
}//周期枚举
var PERIOD_ID=
{KLINE_DAY_ID:0,KLINE_WEEK_ID:1,KLINE_MONTH_ID:2,KLINE_YEAR_ID:3,KLINE_MINUTE_ID:4,KLINE_5MINUTE_ID:5,KLINE_15MINUTE_ID:6,KLINE_30MINUTE_ID:7,KLINE_60MINUTE_ID:8
}var g_KLine=
{JSChart:null
};export default
{name:'HQChart',data() {let data={Symbol:'600000.sh',KLine:{Option:DefaultData.GetKLineOption(),IsShow:false,Display:'none',Width:400,Height:600,},PERIOD_ID:PERIOD_ID,};return data;},onLoad() {},onReady(){this.ChangeKLinePeriod(PERIOD_ID.KLINE_DAY_ID);},methods: {//CreateKLineChart:function(){if (this.KLine.JSChart) return;let element = new JSCommon.JSCanvasElement();// #ifdef APP-PLUSelement.IsUniApp=true; //canvas需要指定下 是uniapp的app// #endifelement.ID = 'kline';element.Height = this.KLine.Height;  //高度宽度需要手动绑定!!element.Width = this.KLine.Width;g_KLine.JSChart = JSCommon.JSChart.Init(element);this.KLine.Option.NetworkFilter=this.NetworkFilter;this.KLine.Option.Symbol=this.Symbol;this.KLine.Option.IsFullDraw=true;     //每次手势移动全屏重绘g_KLine.JSChart.SetOption(this.KLine.Option);},//K线周期切换ChangeKLinePeriod:function(period){if (!g_KLine.JSChart)    //不存在创建{this.KLine.Option.Period=period;this.CreateKLineChart();}else{g_KLine.JSChart.ChangePeriod(period);}},//切换指标 windowIndex=窗口索引 0开始, name=指标名字/IDChangeKLineIndex:function(windowIndex, name){if (!g_KLine.JSChart) return;g_KLine.JSChart.ChangeIndex(windowIndex,name);},//切换股票ChangeSymbol:function(symbol){if (!g_KLine.JSChart) return;g_KLine.JSChart.ChangeSymbol(symbol);},NetworkFilter:function(data, callback){console.log('[HQChart:NetworkFilter] data', data.Name);},//KLine事件KLineTouchStart: function (event) {if (g_KLine.JSChart) g_KLine.JSChart.OnTouchStart(event);},KLineTouchMove: function (event) {if (g_KLine.JSChart) g_KLine.JSChart.OnTouchMove(event);},KLineTouchEnd: function (event) {if (g_KLine.JSChart) g_KLine.JSChart.OnTouchEnd(event);},}
}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200upx;width: 200upx;margin-top: 200upx;margin-left: auto;margin-right: auto;margin-bottom: 50upx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36upx;color: #8f8f94;}
</style>

注意

 element.IsUniApp=true

如果是uniapp-app平台的需要设置为true,其他平台的不需要设置

3.运行到模拟器

通过uniapp下载hqchart插件

安装

插件地址: https://ext.dcloud.net.cn/plugin?id=4591
直接通过HBuilder X就可以安装，一般安装的目录在uni_modules\jones-hqchart2下面

使用

改下import路径就可以，其他不变

// #ifdef H5
import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
//HQChart.JSChart.SetDomain("xxxxx.com");
//HQChart.JSComplier.SetDomain("xxxx.com");
// #endif// #ifndef H5
import {JSCommon} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.wechat.3.0.js'
import {JSCommonHQStyle} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.style.wechat.js'
import {JSCommonComplier} from "@/uni_modules/jones-hqchart2/js_sdk/umychart.complier.wechat.js"//禁用日志
JSConsole.Complier.Log=()=>{ };
JSConsole.Chart.Log=()=>{ };
// #endif

特别感谢秋云

帮我解决了在uniapp-app 环境中measureText 无法计算的问题。
官方bugi地址： https://ask.dcloud.net.cn/question/70374

交流QQ群: 950092318

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：github.com/jones2000/HQChart

HQChart使用教程37 - 如何在uni-app创建k线图(app)相关推荐

HQChart使用教程2- 如何把自定义指标显示在K线图页面
如何把自定义指标显示在K线图页面自定义一个指标通过Option设置指标自定义一个带参数的指标让我们用上证指数来回测这个奇葩的BS指标吧 HQChart代码地址效果图自定义一个指标假设我们 ...
HQChart使用教程35 - 如何在uni-app创建K线图(h5)
HQChart使用教程35 - 如何使用uni-app创建K线图插件目录创建步骤 1. 创建一个空的uni-app 工程, 把umychart_uniapp_h5 目录拷贝到工程中. 2. 创建一 ...
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图
HQChart小程序教程3-新版2D单画布如何切换K线图和分时图 K线图和分时图图形切换流程图代码讲解 K线周期切换创建K线图步骤配色修改禁止hqchart缓存绘制 HQChart代码地址 ...
HQChart钉钉小程序教程1-创建K线图
HQChart钉钉小程序教程1-创建K线图,分时图钉钉小程序HQChart效果图步骤 1. 创建画布 2. 添加HQChart插件文件 3. import插件 4. 初始化HQChart插件 5. ...
HQChart使用教程4- 如何自定义K线图颜色风格
如何自定义K线图颜色风格切换整体风格函数 uniapp/小程序修改部分配置颜色风格配置字段说明配置项说明 y轴顶部刻度文字向下偏移 X轴底部刻度文字,向下偏移 K线标题字段配色修改 PC端to ...
HQChart使用教程1- 如何快速创建一个K线图页面
快速创建一个K线图页面 HQChart介绍 demo页面代码 Option的配置项说明 Type Symbol IsAutoUpdate IsShowRightMenu IsShowCorssCurs ...
keyshot聚光灯_【KeyShot教程】如何在KeyShot中创建和使用物理灯光？
原标题:[KeyShot教程]如何在KeyShot中创建和使用物理灯光? 在KeyShot中,有两种方法可以点亮场景.HDRI是默认方法,但也可以使用物理灯.HDRI和物理照明的组合也很有效.要添加物 ...
HQChart使用教程9- 如何快速创建K线训练页面
HQChart使用教程9- 如何快速创建K线训练页面 K线训练已重构新版本使用详见 demo页面部分代码 Option的配置项说明注册K线训练K线移动的监听 K线训练操作接口 HQChart代码地址 ...
AXURE教程：中继器制作K线图
K线图应用于股票.贵金属.期货等等的金融交易中,所以K线图成了金融交易软件必不可少的一个元件. 目前市面上的k线图原型都是图片,不能让老板或者甲方爸爸更直观的看到交互效果:所以作者出了这期教程,教你们 ...

HQChart使用教程37 - 如何在uni-app创建k线图(app)

HQChart使用教程37 - 如何在uni-app创建k线图 app

插件目录

创建步骤

1. 拷贝插件到工程中

2. 创建一个page页在page页中

3.运行到模拟器

通过uniapp下载hqchart插件

安装

使用

特别感谢秋云

交流QQ群: 950092318

HQChart代码地址

HQChart使用教程37 - 如何在uni-app创建k线图(app)相关推荐

最新文章

热门文章

HQChart使用教程37 - 如何在uni-app创建k线图(app)

HQChart使用教程37 - 如何在uni-app创建k线图 app

插件目录

创建步骤

1. 拷贝插件到工程中

2. 创建一个page页 在page页中

3.运行到模拟器

通过uniapp下载hqchart插件

安装

使用

特别感谢 秋云

交流QQ群: 950092318

HQChart代码地址

HQChart使用教程37 - 如何在uni-app创建k线图(app)相关推荐

最新文章

热门文章

2. 创建一个page页在page页中

特别感谢秋云