HQChart使用教程35 - 如何使用uni-app创建K线图

插件目录
创建步骤
- 1. 创建一个空的uni-app 工程，把umychart_uniapp_h5 目录拷贝到工程中。
- 2. 创建一个page页在page页中 import umychart.uniapp.h5.js
- 3.在浏览器里运行
- 效果图
通过uniapp下载hqchart插件
- 安装
- 使用
交流QQ群: 950092318
HQChart代码地址

插件目录

创建步骤

1. 创建一个空的uni-app 工程，把umychart_uniapp_h5 目录拷贝到工程中。

2. 创建一个page页在page页中 import umychart.uniapp.h5.js

代码如下：

<template><div class='divchart' ><div class='kline' id="kline" ref='kline'  v-show="KLine.IsShow"></div></div>
</template><script>
import HQChart from '../../umychart_uniapp_h5/umychart.uniapp.h5.js'function DefaultData() { }DefaultData.GetKLineOption = function ()
{let data = {Type: '历史K线图', Windows: //窗口指标[{Index:"MA",Modify: false, Change: false}, {Index:"VOL",Modify: false, Change: false}], IsCorssOnlyDrawKLine:true,CorssCursorTouchEnd:true,Border: //边框{Left:   1,Right:  1, //右边间距Top:    25,Bottom: 25,},KLine:{Right:1,                            //复权 0 不复权 1 前复权 2 后复权Period:0,                           //周期: 0 日线 1 周线 2 月线 3 年线 PageSize:70,IsShowTooltip:false},ExtendChart:[{Name:'KLineTooltip' },    //开启手机端tooltip], };return data;
}export default
{data() {let data={Symbol:'600000.sh',ChartWidth:300,ChartHeight:600,KLine:{JSChart:null,Option:DefaultData.GetKLineOption(), IsShow:true,}};return data;},onLoad() {},onReady(){this.$nextTick(()=>{this.OnSize();this.CreateKLineChart(); });},methods: {OnSize(){var chartHeight = this.ChartHeight;var chartWidth = this.ChartWidth;var kline=this.$refs.kline;kline.style.width=chartWidth+'px';kline.style.height=chartHeight+'px';if (this.KLine.JSChart) this.KLine.JSChart.OnSize();},CreateKLineChart()  //创建K线图{if (this.KLine.JSChart) return;this.KLine.Option.Symbol=this.Symbol;let chart=HQChart.JSChart.Init(this.$refs.kline);chart.SetOption(this.KLine.Option);this.KLine.JSChart=chart;},}
}
</script><style></style>

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

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart

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

HQChart使用教程2- 如何把自定义指标显示在K线图页面
如何把自定义指标显示在K线图页面自定义一个指标通过Option设置指标自定义一个带参数的指标让我们用上证指数来回测这个奇葩的BS指标吧 HQChart代码地址效果图自定义一个指标假设我们 ...
HQChart使用教程37 - 如何在uni-app创建k线图(app)
HQChart使用教程37 - 如何在uni-app创建k线图 app 插件目录创建步骤 1. 拷贝插件到工程中 2. 创建一个page页在page页中 3.运行到模拟器通过uniapp下载hq ...
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使用教程35 - 如何在uni-app创建K线图(h5)

HQChart使用教程35 - 如何使用uni-app创建K线图

插件目录

创建步骤

1. 创建一个空的uni-app 工程，把umychart_uniapp_h5 目录拷贝到工程中。

2. 创建一个page页在page页中 import umychart.uniapp.h5.js

3.在浏览器里运行

效果图

通过uniapp下载hqchart插件

安装

使用

交流QQ群: 950092318

HQChart代码地址

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

最新文章

热门文章

HQChart使用教程35 - 如何在uni-app创建K线图(h5)

HQChart使用教程35 - 如何使用uni-app创建K线图

插件目录

创建步骤

1. 创建一个空的uni-app 工程， 把umychart_uniapp_h5 目录拷贝到工程中。

2. 创建一个page页 在page页中 import umychart.uniapp.h5.js

3.在浏览器里运行

效果图

通过uniapp下载hqchart插件

安装

使用

交流QQ群: 950092318

HQChart代码地址

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

最新文章

热门文章

1. 创建一个空的uni-app 工程，把umychart_uniapp_h5 目录拷贝到工程中。

2. 创建一个page页在page页中 import umychart.uniapp.h5.js