HQChart使用教程79-uniapp中hqchart内置组件使用教程

hqchart组件

为了方便hqchart在uniapp的使用, hqchart内置一个简单的hqchart组件,只需要导入组件就可以使用.

步骤

1. 下载插件

插件地址https://ext.dcloud.net.cn/plugin?id=4591,通过xhbuilderx直接导入就可以. 导入完成以后可以在uni_modules下面找到jones-hqchart2插件,见下图

导入组件

1. HQChartControl.vue 这个就是hqchart组件的文件,直接导入就可以

import HQChartControl from '@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue'

export default 
{
	components: { HQChartControl },
	...........
}

2. 在视图层添加一个hqchart组件

<template>
	
	<div>
		<div style='background-color:#101010;'>
			<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
		</div>
	...........
	</div>
			
</template>

3. 创建图形
   在页面初始化的时候获取手机页面大小，然后根据手机页面大小创建对应的K线图

onShow()
{
	uni.getSystemInfo({
	    success:  (res) =>
		{
			var width=res.windowWidth;
			var height=res.windowHeight;
	        this.ChartWidth=width;
			this.ChartHeight=height-130;
			this.$nextTick(()=>
			{
				this.CreateHQChart(); 
			})
	    }
	});
},

CreateHQChart()
{
	var chartHeight=this.ChartHeight;
	let hqchartCtrl=this.$refs.HQChartCtrl;
	//修改option
	//hqchartCtrl.KLine.Option.
	hqchartCtrl.NetworkFilter=this.NetworkFilter;
	hqchartCtrl.SetSize(this.ChartWidth,chartHeight);	//设置图形大小
	hqchartCtrl.OnSize();
	hqchartCtrl.CreateHQChart();
},

组件接口函数介绍

SetSize(width, height)

设置K线图大小

ClearChart()

清空hqchart示例， 在页面退出或隐藏的时候用，这样可以停止自动更新的定时器

OnSize()

调整K线图大小 ， 目前只支持h5.

CreateHQChart()

创建K线图/分时图 根据 成员变量ChartType决定的， “Minute”=分时图 “KLine”=k线图

ChangeKLinePeriod(period)

切换K线周期， 如果当前是分时图，会自动销毁分时图创建K线图

ChangeMinutePeriod(dayCount)

切换分时图， 如果当前是K线图， 会自动销毁K线图创建分时图

ChangeKLineIndex(windowId,name)

切换指标 windowId=窗口索引 name=指标名字
只在K线图下有效

ChangeSymbol(symbol)

切换股票

NetworkFilter(data, callback)

第3放数据对接， 直接在外部替换这个函数，换成你的NetworkFilter就可以。

CreateHQChart()
{
	var chartHeight=this.ChartHeight;
	let hqchartCtrl=this.$refs.HQChartCtrl;
	//修改option
	//hqchartCtrl.KLine.Option.
	hqchartCtrl.NetworkFilter=this.NetworkFilter; //替换成外部数据对接
	hqchartCtrl.SetSize(this.ChartWidth,chartHeight);
	hqchartCtrl.OnSize();
	hqchartCtrl.CreateHQChart();
},

NetworkFilter(data, callback) //对接数据
{
	console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}` );
},

默认设置

DefaultSymbol

默认股票代码

DefaultChart

默认图形类型 “Minute”, “KLine”
例子 直接在视图层配置就可以

<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>

说明

内置的组件功能比较简单， 如果需要定制的，可以自己写一个组件，如何写hqchart组件可以参见
HQChart实战教程40 - 如何制作hqchart组件(uniapp版本)

完成示例代码

index.vue

<template>
	
	<div>
		<div style='background-color:#101010;'>
			<HQChartControl ref="HQChartCtrl" DefaultChart="{Type:'KLine'}" DefaultSymbol="000001.sz"> </HQChartControl>
		</div>
	
		<!--   控制图1 !-->
		<div class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(1)">分时</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(5)">5D</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(0)">D</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(1)">W</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(4)">1M</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeKLinePeriod(5)">15M</button>
		</div>
		
	
	</div>
			
</template>

<script>

import HQChartControl from '@/uni_modules/jones-hqchart2/js_sdk/HQChartControl.vue'

	
export default 
{
	components: { HQChartControl },
	
	data()
	{
		let data=
		{
			Symbol:'600000.sh',
			ChartWidth:350,
			ChartHeight:500,
		};
		
		return data;
	},
	
	onShow()
	{
		uni.getSystemInfo({
		    success:  (res) =>
			{
				var width=res.windowWidth;
				var height=res.windowHeight;
		        this.ChartWidth=width;
				this.ChartHeight=height-130;
				this.$nextTick(()=>
				{
					this.CreateHQChart(); 
				})
		    }
		});
	},
	
	onHide()
	{
		this.ClearHQChart();
	},
	
	onUnload()
	{
		this.ClearHQChart();
	},
	
	methods:
	{
		CreateHQChart()
		{
			var chartHeight=this.ChartHeight;
			let hqchartCtrl=this.$refs.HQChartCtrl;
			//修改option
			//hqchartCtrl.KLine.Option.
			hqchartCtrl.NetworkFilter=this.NetworkFilter;
			hqchartCtrl.SetSize(this.ChartWidth,chartHeight);
			hqchartCtrl.OnSize();
			hqchartCtrl.CreateHQChart();
		},
		
		ClearHQChart()
		{
			let hqchartCtrl=this.$refs.HQChartCtrl;
			if (hqchartCtrl) hqchartCtrl.ClearChart();
		},
		
		ChangeMinutePeriod(days)
		{
			let hqchartCtrl=this.$refs.HQChartCtrl;
			
			hqchartCtrl.ChangeMinutePeriod(days);
		},
		
		ChangeKLinePeriod(period)
		{
			let hqchartCtrl=this.$refs.HQChartCtrl;
			
			hqchartCtrl.ChangeKLinePeriod(period);
		},
		
		NetworkFilter(data, callback)
		{
			console.log(`[App:NetworkFilter] Name=${data.Name} Explain=${data.Explain}` );
		},
	}
}
</script>

<style>
</style>

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart