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，教程点下赞 。谢谢~~
序
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.效果图
完整代码
<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();
else
g_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