HQChart使用教程63-uniapp使用renderjs+hqchart

序
步骤
- 1. 安装依赖模块
- 2. 创建 renderjs qhchart模块
- 3. 使用HQChartCtrl对hqchart进行简单的封装
- 4. page页面创建一个view元素绑定到HQChartCtrl
- 5. 分时K线切换说明
- 6.效果图
- 注意
完整代码
HQChart代码地址
如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

序

uniapp的画布实在是太烂了，导致app很卡，但是h5页面却很流畅，如果可以直接在uniapp里使用h5页面这样用户体验就很好了。

步骤

1. 安装依赖模块

安装 hqchart 和 jquery 这2个模块
npm i jquery
npm i hqchart

2. 创建 renderjs qhchart模块

这里我把模块名命名为HQChartCtrl

<script module="HQChartCtrl" lang="renderjs" type="module">
import HQChart from 'hqchart';
.......
export default
{name:'HQChartCtrl',......
}

3. 使用HQChartCtrl对hqchart进行简单的封装

这个使用 view id为’kline’ 来绑定到hqchart中
下面的封装的方法和说明

CreateKLineChart()   //创建K线图
CreateMinuteChart() //创建分时图
ClearDivDOM()   //清空hqchart内部创建的dom.
ChangePeriod(period)  //K线周期切换
ChangeSymbol(symbol)   //分时|K线切换股票
ChangeDays(dayCount)  //分时切换显示天数
ClearChart()        //清空hqchart实例， 在页面退出或隐藏的时候需要清空实例和定时器
ChartOperator(value)    //外部操作HQChartCtrl的统一接口 value:{ID：操作ID, Value:数值 }

4. page页面创建一个view元素绑定到HQChartCtrl

创建一个id为“kline"的view,这样hqchartctrl就可以获取这个dom并操作它。

<template><view class="kLine-main" style="height: 1200rpx;width: 750rpx;"><view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view>

绑定变量ChartOperatorData修改以后触发HQChartCtrl操作事件HQChartCtrl.ChartOperator。这个好像是renderjs特殊有的，其他我也找到怎么去操作hqchartctrl的方法。

5. 分时K线切换说明

这里使用了同一个view来切换分时和K线，这样就避免了2个view来会切换。所以在切换的时候需要清空原来的实例及hqchart创建的dom.
具体看教程
HQChart实战教程8-如何手动重新初始化hqchart

这样就可以在app上运行h5的hqchart.

如果还有问题可以加交流QQ群: 950092318
demo项目在群文件中"umiapp-renderjs-hqchart-demo.2020.06.24.01.rar"

6.效果图

注意

在 renderjs 里面的数据请求使用jquery， uni的网络请求接口在里面是无法调用的，不清楚为什么。

完整代码

<template><view class="kLine-main" style="height: 1200rpx;width: 750rpx;"><view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view><div class="button-sp-area"><button class="mini-btn" type="default" size="mini" @click="ChangePeriod(0)">日线</button><button class="mini-btn" type="default" size="mini" @click="ChangePeriod(1)">周线</button><button class="mini-btn" type="default" size="mini" @click="ChangePeriod(4)">1分钟</button><button class="mini-btn" type="default" size="mini" @click="ChangePeriod(6)">15分钟</button><button class="mini-btn" type="default" size="mini" @click="ChangeDays(1)">分时</button><button class="mini-btn" type="default" size="mini" @click="ChangeDays(5)">5日分时</button></div><div 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></div></view></template><script>
export default
{name: 'kLine-main', //k线 图表data() {var data={ChartOperatorData: {ID:null,       //操作ID 1=切换周期  2=切换股票 3=销毁 4=分时图Value:null      //数值}}return data;},created() {},mounted() {},methods: {ChangePeriod(period){this.ChartOperatorData.ID=1;this.ChartOperatorData.Value=period;},ChangeSymbol(symbol){this.ChartOperatorData.ID=2;this.ChartOperatorData.Value=symbol;},ChangeDays(dayCount){this.ChartOperatorData.ID=4;this.ChartOperatorData.Value=dayCount;}}
};
</script><script module="HQChartCtrl" lang="renderjs" type="module">
import HQChart from 'hqchart';
var g_KLine =
{JSChart: null
};var g_Minute=
{JSChart:null
}/* 关闭日志
HQChart.Chart.JSConsole.Chart.Log=()=>{ }
HQChart.Chart.JSConsole.Complier.Log=()=>{ }
*/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 },],IsAutoUpdate: true,AutoUpdateFrequency: 30000, //数据更新频率IsCorssOnlyDrawKLine: true, //十字光标只能在K线上EnableScrollUpDown: true, //允许手势上下操作滚动页面CorssCursorTouchEnd: true, //手势结束十字光标自动隐藏CorssCursorInfo:   //十字光标刻度设置{ Left: 2,Right: 2,Bottom: 1,}, Border:   //边框{Left: 1,Right: 1, //右边间距Top: 25,Bottom: 25},KLine: {Right: 0, //复权 0 不复权 1 前复权 2 后复权Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线PageSize: 60,IsShowTooltip: false,DrawType: 0 //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图},//子框架设置 (Height 窗口高度比例值)Frame: [{SplitCount: 3, //最多输出3个分隔线Height: 5,IsShowLeftText: false, //不显示左边刻度文字IsShowRightText: true, //显示右边刻度文字Custom: [{Type: 0,Position: 'right'}]},{SplitCount: 2,Height: 2,IsShowLeftText: true,IsShowRightText: false},{SplitCount: 2,Height: 2,IsShowLeftText: true,IsShowRightText: false}],ExtendChart:[{ Name: 'KLineTooltip' } //开启手机端tooltip]};return data;
};DefaultData.GetMinuteOption=function()
{var option= {Type:'分钟走势图',   //创建图形类型Windows: //窗口指标[{ Index: 'MACD', Modify: false, Change: false },], IsAutoUpdate:true,        //是自动更新数据AutoUpdateFrequency: 30000, //数据更新频率DayCount:1,                //1 最新交易日数据 >1 多日走势图IsShowRightMenu:false,       //是否显示右键菜单CorssCursorTouchEnd:true,CorssCursorInfo:     //十字光标刻度设置{ Left: 2,Right: 2,Bottom: 1,}, MinuteLine:{//IsDrawAreaPrice:false,      //是否画价格面积图},Border: //边框{Left:1,    //左边间距Right:1,   //右边间距Top:20,Bottom:20},Frame:  //子框架设置[{SplitCount:3},{SplitCount:2},{SplitCount:3},],ExtendChart:    //扩展图形[{Name:'MinuteTooltip' }  //手机端tooltip],};return option;
}export default
{name:'HQChartCtrl',data(){var data={Symbol:'000001.sz',Period:0,  //周期DayCount:1, //分时图 天数};return data;},mounted() {console.log('视图层加载完毕');this.CreateKLineChart();},methods: {CreateKLineChart()  //创建K线图{if (g_KLine.JSChart) return;if (g_Minute.JSChart){this.ClearChart();this.ClearDivDOM();}var option=DefaultData.GetKLineOption();option.Symbol=this.Symbol;option.KLine.Period=this.Period;var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置HQChart.Chart.JSChart.SetStyle(blackStyle);document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;  //div背景色设置黑色g_KLine.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));g_KLine.JSChart.SetOption(option);console.log('创建K线图结束');},CreateMinuteChart()  //创建分时图{if (g_Minute.JSChart) return;if (g_KLine.JSChart){this.ClearChart();this.ClearDivDOM();}var option=DefaultData.GetMinuteOption();option.Symbol=this.Symbol;option.DayCount=this.DayCount;var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置HQChart.Chart.JSChart.SetStyle(blackStyle);document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;   //div背景色设置黑色g_Minute.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));g_Minute.JSChart.SetOption(option);},ClearDivDOM()   {var divKLine=document.getElementById('kline');while (divKLine.hasChildNodes()) {divKLine.removeChild(divKLine.lastChild);}　},//对外接口ChangePeriod(period)  //周期切换{this.Period=period;if (!g_KLine.JSChart) this.CreateKLineChart();else g_KLine.JSChart.ChangePeriod(period);},ChangeSymbol(symbol)   //切换股票{this.Symbol=symbol;if (g_KLine.JSChart) g_KLine.JSChart.ChangeSymbol(symbol);else if (g_Minute.JSChart) g_Minute.JSChart.ChangeSymbol(symbol);},ChangeDays(dayCount){this.DayCount=dayCount;if (!g_Minute.JSChart)this.CreateMinuteChart();elseg_Minute.JSChart.ChangeDayCount(dayCount);},ClearChart(){if (g_KLine.JSChart){g_KLine.JSChart.StopAutoUpdate();g_KLine.JSChart=null;}if (g_Minute.JSChart){g_Minute.JSChart.StopAutoUpdate();g_Minute.JSChart=null;}},ChartOperator(value){switch(value.ID){case 1:this.ChangePeriod(value.Value);break;case 2:this.ChangeSymbol(value.Value);break;case 3:this.ClearChart();break;case 4:this.ChangeDays(value.Value);break;}}}
};
</script>
<style lang="scss">
.kline {}
</style>

HQChart代码地址

地址：github.com/jones2000/HQChart

如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)相关推荐

HQChart实战教程30-A股日K线数据对接-uniapp版本
HQChart实战教程30-A股日K线数据对接-uniapp版本日线数据对接预备知识创建K线图教程步骤 1. HQChart数据回调函数部分代码 2. 全量数据对接部分代码 3. 增量数据更 ...
HQChart使用教程37 - 如何在uni-app创建k线图(app)
HQChart使用教程37 - 如何在uni-app创建k线图 app 插件目录创建步骤 1. 拷贝插件到工程中 2. 创建一个page页在page页中 3.运行到模拟器通过uniapp下载hq ...
HQChart使用教程35 - 如何在uni-app创建K线图(h5)
HQChart使用教程35 - 如何使用uni-app创建K线图插件目录创建步骤 1. 创建一个空的uni-app 工程, 把umychart_uniapp_h5 目录拷贝到工程中. 2. 创建一 ...
HQChart实战教程42 - 新浪期货数据源对接 - uniapp版本 (源码付费)
HQChart实战教程41 - HQChart实战教程42 - 新浪期货数据源对接 - uniapp版本数据源支持周期期货品种平台支持 demo安卓apk下载源码售价 800元效果截图 H ...
HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本 (源码付费)
HQChart实战教程41 -新浪+腾讯A股数据源对接 - uniapp版本数据源支持周期平台支持 demo安卓apk下载源码售价 580元效果截图 HQChart代码地址数据源使用公开 ...
HQChart使用教程4- 如何自定义K线图颜色风格
如何自定义K线图颜色风格切换整体风格函数 uniapp/小程序修改部分配置颜色风格配置字段说明配置项说明 y轴顶部刻度文字向下偏移 X轴底部刻度文字,向下偏移 K线标题字段配色修改 PC端to ...
HQChart使用教程60-新版k线训练使用教程
HQChart使用教程60-新版k线训练使用教程样例页面 K线训练重构创建K线图 Type Train 操作接口下一个K线自动/停止自动移动K线买卖股票 K线移动监听事件重新开始训练买卖 ...
HQChart使用教程11-如何把K线数据API替换成自己的API数据
HQChart使用教程11-如何把K线数据API替换成自己的API数据设置API域名 Vue: uniapp: HQChart代码地址 HQChart只提供前端行情展示, 不提供行情API数据,De ...
HQChart使用教程95-报价列表对接第3方数据3-股票数据
HQChart使用教程95-报价列表对接第3方数据2]3-个股数据协议名称-报价列表股票数据协议日志截图 Request 字段说明 stocks 返回json数据结构数据截图 data code ...

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart使用教程63-uniapp使用renderjs+hqchart

序

步骤

1. 安装依赖模块

2. 创建 renderjs qhchart模块

3. 使用HQChartCtrl对hqchart进行简单的封装

4. page页面创建一个view元素绑定到HQChartCtrl

5. 分时K线切换说明

6.效果图

注意

完整代码

HQChart代码地址

如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)相关推荐

最新文章

热门文章

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart使用教程63-uniapp使用renderjs+hqchart

序

步骤

1. 安装依赖模块

2. 创建 renderjs qhchart模块

3. 使用HQChartCtrl对hqchart进行简单的封装

4. page页面创建一个view元素绑定到HQChartCtrl

5. 分时K线切换说明

6.效果图

注意

完整代码

HQChart代码地址

如果教程或hqchart对你有帮助， 请在git上star，教程点下赞 。谢谢~~

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)相关推荐

最新文章

热门文章

如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~